什么是标签语义化
都有哪些标签，都是什么意思
“流体布局”是html默认的布局机制，如你写的html不用css，默认自上而下（块级元素如div）从左 到右 （内联元素如span）堆砌的布局方式。
块级元素是指单独撑满一行的元素，如div、ul、li、table、p、h1等元素。这些元素的display值默认block、table、list-item等。
内联元素又叫行内元素，指只占据它对应标签的边框所包含的空间的元素，这些元素如果父元素宽度足够则并排在一行显示的，如span、a、em、i、img、td等。这些元素的display值默认是inline、inline-block、inline-table、table-cell等。
行内块标签 可以设置宽高、内外边距
可以与其他行内元素、内联元素共处一行
如：input、img
块级标签和行内标签的区别
块标签：独自占领一行、可以进行宽高的数值的设定；
行标签：在一行内显示、不可以进行宽高的数值设定；
嵌套规则
- 块标签可以套行标签，行标签不可以套块标签。
- P标签不要套块属性标签，可以套a，span，文本。。。
- 嵌套的时候注意代码的缩进。
对于块级元素，流体布局之下width: auto自适应撑满父元素宽度。这里的撑满并不同于width: 100%的固定宽度，而是像水一样能够根据margin不同而自适应父元素的宽度。
对于内联元素，width: auto则呈现出包裹性，即由子元素的宽度决定。
无论内联元素还是块级元素，height: auto都是呈现包裹性，即高度由子级元素撑开。
注意父元素height: auto会导致子元素height: 100%百分比失效。
css的属性非常有意思，正常流下，如果块级元素的width是个固定值，margin是auto，则margin会撑满剩下的空间；如果margin是固定值，width是auto，则width会撑满剩下的空间。这就是流体布局的根本所在。
如何转换
- display:block；(将元素变为块级元素)
- display:inline； (将元素变为行级元素)
display：inline-block；（将元素变为行级块元素）
display除了这几个值还有哪些
display: none
让元素隐藏，你可以怎么做？
display: none visibility: hidden opacity: 0
- display: none 和 visibility: hidden的区别
- 让元素消失的方法
overflow:hidden
opacity:0；
visibility:hidden
display:none
position:absolute
clip(clip-path):rect()/inset()/polygon()
z-index:-1000
transform:scaleY(0)
- opacity的兼容处理
opacity在IE7、8不兼容用filter处理
- filter还能做哪些事情
为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。
居中
- 除了这种方式能居中还有哪些
定位： 三种
display：flex
JavaScript
display：table-cell
.father {
dispaly: table-cell;
vertical-align: center;
//=>宽高不能是百分比
}
- 响应式布局还可以怎么做
px和视口
媒体查询
百分比
自适应场景下的rem解决方案
通过vw/vh来实现自适应
- 怎么设置rem
fontSize
- 都有哪些盒子模型
box-sizing: conent-box; 将盒子设置为标准模型（盒子默认为标准模型）
box-sizing: border-box; 将盒子设置为 IE 模型（也叫做怪异盒子）
flex 弹性伸缩盒模型
多列布局盒模型
css权重
body#god div.dad span.son {width: 200px;} // 1
body#god span#test {width: 250px;} // 0
掌握几大经典布局方案
圣杯布局
双飞翼布局
=>左右固定，中间自适应
若有收获，就点个赞吧
0 人点赞
