CSS 常用属性概念查缺补漏
css 盒子模型
盒子模型是 css 中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。
标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
ie 盒子模型的 content 部分包含了 border 和 pading。
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
顶部加了 doctype 声明。在所有浏览器中都显示“标准 w3c 盒子模型”
选择器优先级
内连样式 优先级 1000
id 选择器 优先级 100
类选择器 优先级 10
元素选择器 优先级 1
统配选择器 优先级 0
css 基本选择器有哪些？
1、标记选择器（如：body,div,p,ul,li）
2、id 选择器（如：id=“name”,id=“name_txt”）
3、类选择器（如：id=“name”,id=“name_txt”）
4、后代选择器（如：#head.navulli 从父集到子孙集的选择器）
5、子元素选择器（如：div>p,带大于号>）
6、伪类选择器（如：就是链接样式,a 元素的伪类，4 种不同的状态：link、visited、active、hover。）
css 属性继承
1、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是 uppercase、lowercase、capitalize 这三个）
color：文本颜色
3、元素可见性：
visibility：控制元素显示隐藏
4、列表布局属性：
list-style：列表风格，包括 list-style-type、list-style-image 等
5、光标属性：
cursor：光标显示为何种形态
css @规则
@charset
用于提示 css 文件使用的字符串编码方式，它如果被使用，必须出现在最前面。这个规则只是在给出语法解析阶段前使用，并不影响页面上展示效果。
@charset “utf-8”
@import
用于引入一个 css 文件，除@charset 规则不会被引入外，可以引入一个文件的全部内容。
@import “mystyle.css”;
@import url(“mystyle.css”);
@media
media query 使用规则，它能够对设备的类型进行一些判断，在 media 的区块中，是普通规则列表。
@media print {
body {
font-size: 10pt;
}
}
@page
page 用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。
@page {
size: 8.5in 11in;
margin: 10%;
@top-left {
content: "Hamlet";
}
@top-right {
content: "Page " counter(page);
}
}
@counter-style
counter-style 产生一种数据，用于定义列表项的表现。
@counter-style triangle {
system: cyclic;
suffix: "";
}
@key-frames
key-frames 产生一种数据，用于定义动画关键帧。
@keyframes diagonal-side {
from {
left: 0;
top: 0;
}
to {
left: 100px;
top: 100px;
}
}
@fontface
fontface 用于定义一种字体，iconfont 技术就是利用这个特性来实现。
@font-face {
font-family: Gentium;
src: url(http://xxxx);
}
p {
font-family: Gentium, serif;
}
@support
support 检查环境的特性，它与 media 比较类似。
@namespace
用于跟 xml 命名空间配合的一个规则，表示内部的 css 选择器全都带上特定命名空间。
@viewport
用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被 html 的 meta 代替。
伪类元素及用法
1）伪元素主要是用来创建一些不存在原有 dom 结构树种的元素，例如：用::before 和::after 在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的 UI 显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在 DOM 中，不可复制，仅仅是在 CSS 渲染层加入。CSS3 中建议使用::表示伪元素，如：div::before。
::before 和::after 这两个伪类下有特有的属性 content，必须有这个属性。
1、attr() 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或链接的 Href 地址显示出来，如下：
a:after {
content: "(" attr(href) ")";
}
2、url() / uri() 用于引入媒体文件
h1:before{
content: url(log.png);
}
3、counter() 调用计数器，可以不使用列表元素实现序号功能。
h2:before{
counter-increment: chapter;
content: "Chapter" counter(chapter) ". "
}
（2）伪类表示已存在的某个元素处于某种状态，但是通过 dom 树又无法表示这种状态，就可以通过伪类来为其添加样式。例如 a 元素的:hover, :active 等。CSS3 中建议使用:表示伪元素，如：a:hover
文档流、定位
position:absolute
position:fixed
float
可以脱离文档流
块级元素：四四方方的块，在文档中自己占一行。如
内联元素：（行内元素）多个内联元素，可以在一行显示。如
1）、static 定位(普通流定位) -------------- 默认定位
2）、float 定位(浮动定位) 例：float:left;
有两个取值：left(左浮动)和 right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有 float 样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
3）、relative 定位(相对定位) position:relative;
相对本元素的左上角进行定位，top,left,bottom,right 都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置 z-index。使本元素相对于文档流中的元素，或者脱离文档流但是 z-index 的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置 position 为 relative。
4）、absolute 定位(绝对定位) position:absolute;
相对于祖代中有 relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有 relative 定位的，就默认相对于 body 进行定位。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置 z-index 属性。
雪碧图
gulp 跟 webpack 实现雪碧图
将小图标 合并在一起之后的图片称作雪碧图；
水平垂直居中
方案一：
div 绝对定位水平垂直居中【margin:auto 实现绝对定位元素的居中】，
兼容性：,IE7 及之前版本不支持
.father{
width：400px;
height:400px;
background: red;
position:relative; /* 或者position:absolute;*/
}
.son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}

优点：
简单
缺点：
IE(IE8 beta)中无效
无足够空间时，.son 被截断，但是不会有滚动条出现
方案二：
div 绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。
.father{
width：400px;
height:400px;
background: red;
position:relative; /* 或者position:absolute;*/
}
.son{
width:200px;
height: 200px;
background:green;
position: absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
```
优点：
适用于所有浏览器
不需要嵌套标签
缺点：
没有足够空间时，.son会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
###### 方案三：
div绝对定位水平垂直居中【Transforms 变形】
兼容性：IE8不支持；
```
.father{
width：400px;
height:400px;
background: red;
position:relative; /* 或者position:absolute;*/
}
.son{
width: 200px;
height: 200px;
background: green;
position:absolute;
left:50%; /* 定位父级的50% */
top:50%;
transform: translate(-50%,-50%); /*自己的50% */
}

不定宽高的的水平垂直居中
方案四：
css 不定宽高水平垂直居中，CSS3 属性
.father{
width：？px;
height:？px;
background: red;
display:flex;
justify-content:center;
align-items:center;
/_ aa 只要三句话就可以实现不定宽高水平垂直居中。 _/
}
.son{
background: green;
width: ？px;
height: ？px;
}
方案五：
将父盒子设置为 table-cell 元素，可以使用 text-align:center 和 vertical-align:middle 实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构
.father{
width：？px;
height:？px;
background: red;
display: table-cell;
vertical-align: middle;
}
.son{
background: green;
width: ？px;
height: ？px;
margin: auto;
}
或者
.father{
width：？px;
height:？px;
background: red;
display: table-cell;
vertical-align: middle;
text-align:center;
}
.son{
background: green;
width: ？px;
height: ？px;
display:inline-block;
}
优点：
.son 可以动态改变高度(不需在 CSS 中定义)，.son 不会被截断
缺点：
Internet Explorer(甚至 IE8 beta)中无效，许多嵌套标签
方案六：
对子盒子实现绝对定位，利用 calc 计算位置
.box {
position: relative;
}
.div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: -webkit-calc((400px - 200px)/2);
top: -webkit-calc((400px - 200px)/2);
left: -moz-calc((400px - 200px)/2);
top: -moz-calc((400px - 200px)/2);
left: calc((400px - 200px)/2);
top: calc((400px - 200px)/2);
}
BFC
一、BFC 作用
清除浮动：BFC 会包含创建它的元素内部的所有内容（包含浮动元素）
外边距折叠：解决同一 BFC 容器中的相邻元素间的外边距折叠问题
左图右文布局：利用浮动元产生 BFC 以及 BFC 之间不会互相覆盖实现左图右文布局
凡脱离文档流都可以产生 BFC
为什么 overflow: hidden 可以清除浮动？
overflow: hidden 使得外层元素产生了一个 BFC，BFC 的高度计算包含其内部的浮动元素，从而达到清除浮动效果
常用的 clearfix 清除浮动如何实现？
// 采用 after 伪元素实现
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
// 兼容IE6
.clearfix {
zoom: 1;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
