2021-06-04关于css的重要知识点

如何理解HTML语义化？

• 让人更容易读懂（增加代码的可读性）
• 让搜索引擎更容易读懂（SEO）

块状元素和内联元素

• display: block/table; 有div h1 table ul ol p等等
• display: inline/inline-block; 有span img input button等等

盒模型宽度计算

• offsetwidth = （内容宽度+内边距+边框），无外边距
• box-sizing：border-box；border-box就是用元素内容和padding和border一起决定width和height，啥意思，就是width和元素的内容以及padding和border相互制约，width和height改变，paddign和border不改变时，元素内容的宽高会发生相应的改变，改变的值就是width和height改变的值，paddign和border改变，width和height不改变时，元素内容的宽高会发生相应的改变，改变的值就是width和height改变的值，box-sizing默认是content-box，content-box就是元素的width和height决定了元素的宽高，这意味着元素的border和padding等不能算在元素的width和height中 ，padding和border的改变不能改变width和height的值。

margin纵向重叠问题

• 相邻元素的margin-top和margin-bottom会发生重叠
• 空白内容<p></p>也会重叠

margin负值的问题

• margin-top和margin-left负值，元素向上、向左移动
• margin-right和margin-bottom负值，右侧元素左移，下方元素上移，都自身不受影响

BFC的理解和应用

• float不是none
• position是absolute和fixed
• overflow不是visible
• display是flex inline-block等
• 常见应用有：清除浮动

float布局
圣杯布局和双飞翼布局的技术总结

• 使用float布局
• 两侧使用margin负值，以便和中间内容横向重叠
• 防止中间内容被两侧覆盖，一个用padding一个用margin

手写clear fix

.clearfix:after{
 	content:'';
 	display:table;
 	clear:both;
 }
 .clearfix{
 	*zoom:1;
 }

flex布局
常见语法：

• flex-direction
• justify-content
• align-items
• flex-wrap
• align-self

absolute和relative定位

• relative依据自身位置定位
• absolute依据最近一层的定位元素定位
• 定位元素：（1）absolute relative fixed（2）body

水平居中

• inline元素：text-align：center
• block元素：margin：auto
• absolute元素：left：50%+margin-left负值

垂直居中

• inline元素：line-height的值等于height值
• absolute元素：top：50%+margin-top负值
• absolute元素：transform：translate（-50%，-50%）
• absolute元素：top，left，bottom，right = 0 + margin：auto

line-height如何继承

• 写具体的数值，如30px，则继承该值
• 写比例，如2/1.5，则继承该比例
• 写百分比，如200%，则继承计算出来的值

CSS响应式
rem是什么、响应式布局的常见方案