CSS

1、双飞翼布局

2、圣杯布局

3、clearFix
.clearfix:after{
contnet:'';
display:table;
clear:both;
}

4、flex布局
flex实现一个三点的色子
语法：
display:flex
flex-direction 主轴方向，可以是 X轴 也可以是Y轴
justify-content 内容对齐方式，从开始、结束、两边、居中等方式对齐
align-items 交叉轴的对齐方式，与主轴垂直的轴，从开始、结束、两边、居中等方式对齐
flex-wrap 换行方式 ，什么时候换行
align-self 子元素在交叉轴中的对齐，从开始、结束、两边、居中等方式对齐

image.png

5、CSS-定位

absolute 和relative分别依据什么定位？

relative依据自身定位，对外界元素没有影响
absolute依据最近一层的定位元素定位
向上一层层的找，直到找到定位元素。
定位元素有absolute relative fixed以及body.。如果没有任何定位的话，就直接找到boby了。
定位元素的定位内容：top left right bottom margin padding等

居中对齐有那些方式？

1、水平居中
inline元素：text-align:center
block元素：margin:auto
absolute元素：left:50%+margin-left负值
2、垂直居中
inline元素： line-height的值等于height值
absolute元素：top:50%+margin-top负值，必须知道子元素的高度
absolute元素：transform(-50%,-50%)，left:-50%,不知道子元素高度
absolute元素：top,left,bottom,right=0+margin:auto，不知道子元素高度

CSS 图文样式

line-height 如何继承？
1、写具体数值，如30px，则直接继承该值
2、写比例，如1、1.5等，则继承该值，本身元素的font-size乘以比例
3、写百分比，比如200%，则继承计算出来的值（重点），以body元素的font-size和百分比的计算值为准
以font-size为准。

CSS响应式

1、rem是什么？是一个长度单位
px，绝对长度单位，最常用；em相对长度单位，相对于父元素，不常用；rem相对长度单位，相对于根元素，常用响应式。r-root
设置根元素的font-size:100px，body元素fon-size：0.1rem，可以得出font-size:10px。其他的元素可以以100px为准，使用长度单位，比如：height = 0.1rem
2、响应式布局的常用方案
media-query，根据不同的屏幕宽度设置根元素font-size
rem相对于根元素的长度单位进行计算
3、vw/vh
(1)rem的弊端：阶梯性，对于多尺寸的适配，代码复杂
(2)网页视口尺寸：
window.screen.height //屏幕高度----显示区域的高度
window.innerHeight //网页视口高度----去掉网页的头部和尾部，显示内容区域的高度
doucument.body.clientHeight //body高度----当前文档的高度
vh：网页视口高度的1/100
vw: 网页视口宽度的1/100
vmax取两者vh,vw最大值，vmin取两者vh,vw的最小值
比如：width:10vh height:10vw top:10vmax

总结

1、如何理解HTML语义化？
（1）让人更容易读懂（增加代码的可读性）（2）让搜索引擎更容易读懂（SEO）
2、块状元素和内联元素？
display:block/table;有div,h1,h2,table,ul,ol,pl等
display:inline/inline-block;有span img input button等
3、盒模型宽度计算
offsetWidth = (内容宽度 + 内部距 + 边框)，无外边距
如果要让元素的width为offsetWidth，而非内容宽度的，需要增加设置box-sizing:border-box
4、margin 纵向重叠
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的

也会发生重叠
5、margin负值问题
margin-top和margin-left为负值的时候，该元素会向上、向左移动
margin-right负值，右侧元素左移，自身不动