HTML和CSS基础系列（二）

语义化标签

让标签具有自己的含义。

常见语义化标签：title header footer article hn(h1~h6) main nav strong code等。

好处：

1. 代码结构清晰，方便阅读，有利于团队合作开发。
2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
3. 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
4. 有利于搜索引擎优化（SEO）。

@import @media @charset 等 @ 规则

@规则（at-rule）是一个CSS语句，以 at符号开头，@后面跟一个标识符，并包括直到下一个分号的所有内容，或是下一个CSS代码块，就近原则，先到的为准。

页面导入样式时，使用link和@import的区别

• link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用，@import是CSS提供的，只能用于加载CSS
• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
• import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

css中有哪些单位

px、em、rem、%、vh、vw、vmin、vmax、ex、ch

px、em、rem的区别

px：绝对单位，页面按精确像素展示。

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

然后可以提一下他们在移动端适配上的应用。

rem为什么能够实现自适应布局，在不同的手机端表现是什么

rem是相对根元素的大小。

根据屏幕宽度设置根元素的字体大小。这样一来其他基于根元素的大小会自动缩放。

<script type="text/javascript">
　　document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>

static、fixed、relative、absolute的区别

定位模式	是否脱离文档流	是否可用边偏移（left/right/top/bottom）	移动位置基准	是否可以转换display
static	否	否	正常模式	否
relative	否	是	元素自身	否
absolute	是	是	相对于最近的定位为除static的父元素	是，可以转换为行内块级元素
fixed	是	是	相对于浏览器	是，可以转换为行内块级元素

• 浮动半脱离文档流，还会占据原来的位置

• absolute和fixed定位会脱离文档流，不占据原来的位置

display可以取哪些值

inline、block、inline-block、list-item、run-in、none、table、table-row、table-column、table-cell、inherit、table-row-group、table-column-group

href和src的区别

href：超文本引用。link、a。浏览器会识别href引用的文档并行下载该文档，并且不会停止对当前文档的处理。

src：引入。img、script、iframe。src指向的内容会嵌入到文档中当前标签所在的位置。当浏览器解析到src引用时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部的原因。

三栏布局

两端宽度固定，中间宽度自适应布局
三种方式实现：

1. flex布局
2. float
3. position: absolute

具体代码：github

css3动画 transition和animation

Transition：对元素某个属性或多个属性的变化，进行控制(时间等)，类似flash的补间动画。但只有两个关键帧。开始，结束。

Animation：对元素某个属性或多个属性的变化，进行控制(时间等)，类似flash的补间动画。可以设置多个关键帧。

Transition与Animation区别: transition需要触发一个事件,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。Transition: transition属性是一个简单的动画属性，非常简单非常容易用。可以说它是animation的简化版本，是给普通做简单网页特效用的。

flex的使用方法，flex：1代表了什么

flex：1为3个属性的简写。这三个属性分别为

1. flex-grow，项目的放大比例，默认值为0
2. flex-shrink，项目的缩小比例，默认值为1
3. flex-basis，给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

flex: 1就相当于flex: 1 1 0。

bfc的作用，触发条件

bfc：block formatting context 块级格式化上下文

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

触发条件：

1. float不是none
2. position不是static或relative（absolute、fixed）
3. display是inline-block、table-cell、flex、table-caption或inline-flex
4. overflow不是visible（hidden、auto、scroll）
5. body根元素

作用：

1. 避免margin重叠

属于同一个BFC的相邻box会发生margin重叠，所以可以设置两个不同的bfc（包裹div）
2. 自适应两栏布局

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。可以给一个块添加overflow:hidden，使其成为BFC。
3. 清除浮动

不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷（父节点的高度为border和）。根据计算BFC的高度时，浮动元素也参与计算，激活父节点的BFC。

清除浮动的方式（解决高度坍塌）

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题（高度坍塌）。

清除浮动：

1. 在最后一个浮动标签后添加一个标签，给其设置为clear: both。
   • 缺点：添加无意义的标签，语义化差
2. 给父元素添加overflow: auto，触发BFC
   • 缺点：当内部元素宽度超出父元素宽度时，会出现滚动条
   • 当设置overflow: hidden时，超出部分会被隐藏
   • 通过设置*zoom: 1;兼容IE6、7
3. 使用after伪元素清除浮动
   • 主流方法，推荐使用
   • 通过设置*zoom: 1;兼容IE6、7

   选择符:after{
      content:"";
      clear:both;
      display:block;
      height:0;
      overflow:hidden;
      visibility:hidden;
   }
   

4. 给父元素设置高度
   • 浮动元素高度不确定时不适用
5. 给父元素设置float
   • 同样是通过触发BFC，这样设置会使父元素半脱离文档流，后面的元素与该父元素同行显示

css水平垂直居中

以下所有方法的前提都是父元素width，height都有值。

1. 父元素display: flex; + 要居中的子元素margin:auto
2. 父元素flex(四个属性设置全！)
3. 子元素position:relative;top:50%;left:50%;transform:translate(-50%,-50%);
4. 父元素position:relative + 子元素position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
   这里设置margin-top: -50px;margin-left: -50px;与上面设置transform:translate(-50%,-50%);效果相同
5. 父元素position:relative + 子元素position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;

具体的可以参考我之前写的博客：div+css实现水平/垂直/水平垂直居中超详解