HTML5/CSS篇
目录
1.浮动及清除浮动
- 为什么需要浮动：可以让多个盒子(div)水平排列成一行（行内块元素它可以实现多个元素一行显示，但是中间会有空白缝隙），实现盒子的左右对齐。、
- 为什么清除浮动：浮动是脱标（脱离标准流）的，由于父级盒子在很多的情况下不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子的高度为0，就会影响下面的标准流盒子。准确地说，并不是清除浮动，而是清除浮动后造成的影响。
- 清除浮动的方法：@1.是W3C推荐的做法，是通过在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div>，或则其他标签br等亦可。@2.可以给父级添加：overflow为 hidden | auto | scroll 都可以实现。@3.使用after伪元素清除浮动，:after 方式为空元素额外标签法的升级版，好处是不用单独加标签了。
2.行内元素和块级元素
- 常见的行内元素有：<a>,<img>,<input>,<span>等，不独占一行且不能设置宽高
- 常见块级元素有：div，footer，header，p，h1-h6，独占一行，可以设置宽高
- 元素之间转换：display：inline（行内元素），inline-block（行内块元素，不独占一行，可以设置宽高），block（块元素）
3.link和@import的区别
- link属于html标签。@import在css中使用表示导入外部样式表；
- 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
- import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
4.介绍下CSS盒子模型
- 标准盒子模型：margin+border+padding+content
- IE盒子模型：margin+content（padding,border,content）
5.居中
1.水平居中：
- text-center
- 1.块级元素下使用text-align: center，使得其文本内容居中对齐
- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐
- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
- 但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐
<div class="parent">
<!-- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐-->
<p>hahaha</p>
</div>
- margin:0 auto
- 通过把固定宽度的块级元素的
margin-left和margin-right设成auto,就可以使块级元素水平居中 - 使用弹性布局设置居中 justify-content: center（取决于水平轴是主轴还是交叉轴）
2.垂直居中
- inline-height和height设置相同
- auto
- 绝对定位top:50%后在上移自己宽度的一半(margin-top:负一半宽度或者使用translateY(-50%)左移自己的一半宽度)
- 使用弹性布局设置居中 align-items: center（取决于水平轴是主轴还是交叉轴）