PS: 此资料为本人学习双越老师课程过程中的记录加上平时的一些积累, 如果有问题请及时联系
HTML篇
如何理解HTML语义化?
- 让人更容易读懂 (增加代码可读性)
- 让搜索引擎更容易读懂(SEO Search Engine Optimization: 搜索引擎优化)
默认情况下, 那些是块级元素, 那些是行级元素?
- 块级元素
display设置为block或者table的元素, 默认元素有<div> <h1> <h2> <table> <ul> <p>等 - 行级元素
display设置为inline或者inline-block的元素, 默认元素有<span> <img> <input> <button>等
置换元素
一个元素, 如果存在默认有CSS格式化外表范围的元素, 其实是拥有内在尺寸, 这些元素性质同行内元素设置了inline-block一样
置换元素有 <img> <select> <input> <textarea> <label> <button>
CSS篇
1. 布局
1.1 盒子模型的宽度
- offsetWidth = (内容宽度 + 内边距 + 边框), 不包含外边距
1.2 margin纵向重合
- 纵向相邻元素的
margin-top和margin-bottom会发生重叠, 重叠后的元素间距为大的那个数 - 空白内容的标签会直接重叠
1.3 margin设置为负值
-
margin-top和margin-left设置为负值, 元素会像上/左偏移 -
margin-right设置为负值, 右侧元素向左偏移, 自身不受影响, 类似元素实际宽度变小 -
margin-bottom设置为负值, 下侧元素上移, 自身不受影响, 类似自身元素高度变小
1.4 margin溢出
- 当父元素没有设置边界时, 子元素的margin会溢出, 直接作用于父节点上, 导致父元素发生偏移
- 如:
<style>
.father {
background: #66ccff;
height: 300px;
width: 300px;
}
.father .child {
height: 200px;
width: 200px;
margin-top: 50px;
border: 1px solid;
}
</style>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
效果如图
页面效果
解决方案
- 给父元素添加边框
- 给父元素设置
::before伪元素, 并设置display: table/inline-block; - 给父元素添加内边距
1.5 什么是BFC
- BFC (Block Format Context), 块级格式化上下文
- 一块独立渲染区域, 内部元素渲染不会影响外界元素
1.6 形成BFC的条件
- 设置
float且值不为none - 设置
position为absolute或者fixed - 设置
overflow且值不为visible - 设置
display为flex / inline-block等
1.7 BFC的常见应用
- 清除浮动
float布局
- 圣杯布局及双飞翼布局 (略)
- 手写clearfix (略)
1.8 flex布局
- 略
省略内容后续会陆续补充
2. 定位
2.1 position参照
absolute
- 依据父级第一个定位元素进行定位
- 如果查询到
body都不存在定位元素则根据body进行定位
relative - 依据自身位置进行偏移
2.2 居中对齐方式
2.2.1 水平居中
-
inine元素:text-align: center; -
block元素:margin: auto; -
absolute元素:left: 50%; margin-left: -(自身宽度的50%);/transform: translateX: (-50%); (支持CSS3)
2.2.2 垂直居中
-
inline元素:line-height值设置为height值 -
absolute元素:top: 50%; margin-top: -(自身高度的50%);transform: translateY: (-50%) (支持CSS3)
2.2.3 垂直水平居中
-
absolute元素:top: 50%;left: 50%;transform: translate(-50%, -50%); -
absolute元素:top, left, bottom, right = 0; margin: auto;
3. 图文样式
3.1 line-height继承
- 如果父元素设置为具体数值, 如 30px, 则继承该值
- 如果父元素设置为比例, 如2或1.5, 则继承该比例
- 如果父元素设置为百分比, 如200%, 则继承计算后的值 (注意!)
4. 响应式
4.1 rem
-
px绝对长度单位, 最常用 -
em相对长度单位, 相对于父元素(自身字体大小), 不常用
注: 除非元素字体大小使用em作为单位, 否则1em都等于自身元素字体大小, 而不是父元素 -
rem相对长度单位, 响应式布局常用
注: 1rem的长度为该页面根元素的字体大小
4.2 如何实现响应式
- 使用
media-query + rem, 根据不同屏幕大小设置根节点字体大小
注:media-query使用only关键字时, 如果前面条件不满足, 就不会判断后续条件 - rem存在阶梯性的弊端, 只有到达设定的宽高界限才会应用设置的样式
补: 网页窗口尺寸
-
window.screen.height--- 屏幕高度 -
window.screen.innerHeight--- 网页视口高度 -
window.screen.clientHeight---body元素高度
4.3 vw/vh
-
vh的大小为网页视口高度的1% -
vw的大小为网页视口宽度的1% -
vmax的大小为两者中较大的那个 -
vmin的大小为两者中较小的那个
