div盒子

特点：

宽度自适应拉伸到浏览器的边缘，默认占据一行，固定宽度就没有margin-right、(给了宽度会自动用右边填满，且不允许设置。)

高度默认为0，没有设定高的时候，可以由子元素内容撑起父元素

内边距没有 auto 值，但是可以解决父元素与子元素边距重合

CSS元素类型有三类：

块元素

前后的元素都会被换行，允许设置宽高

使用了脱离正常文档流的样式，元素将作为块显示(浮动、absolute、fixed) 浮动过后就无法用正常方式居中

内联元素(行内元素)

前后的元素不会被换行，无法设置宽高和上下的外边距

内联块(行内块)

内联元素的块，但是拥有了块的特质，除了占据一行

display显示的样式valuedescriptionblock显示为块inline-block在一行的块inline内联元素(默认)none隐藏表格的值tableLI标签的列表项的值list-item通过样式去修改还不如直接使用标签方便效率，这里不在阐述。居中text-align样式

可以居中内部的文字、内联元素、内联块

块居中

水平方向上外边距auto

margin-left: auto; margin-right: auto;

块装内联元素和内联块会有奇怪的现象

会多出来一截 通过vertical-align: middle/bottom/top; 基线对准中间可以解决

默认对齐基线

<div> <img /> </div>

overflowvaluedescriptionvisible默认hidden会被修剪隐藏溢出的部分scroll内容会被修剪，以滚动条方式查看溢出内容，（没内容时也会出现禁止的滚动条）auto当内容溢出最大区域时，会自动添加滚动条调整透明样式Methoddescriptionopacity: 0.5;IE9+（包括IE9）filter: alpha(opacity=50);IE8-IE9filter: opacity(50%);不兼容IEbackground-color: rgba(0, 0, 0, 0.7);RGB颜色透明，不会影响子元素

如果不想让子元素透明单独给个盒子给上透明

rgba颜色

rgba(0, 0, 0, 0.67)

R ==> red

G ==> Green

B ==> Blue

A ==> Alpha

红绿蓝三原色的值，其范围在0~255 共256个数，最后alpha透明通道数值在0~1之间，如果不需要透明颜色可以直接写成rgb(0, 0, 0)的形式

阴影Methoddescriptionbox-shadow添加盒子阴影text-shadow添加文字阴影

inset 参数选项表示内阴影 默认使用外阴影

选择器(复习)

.box .abc 后代选择器(派生选择器、子代选择器)

伪类选择器(CSS3特性)

在选择器上面进行筛选，来选择最终的一个元素 或者触发条件的时候添加新的样式

伪类使用方法是加冒号

:first-child 选择当前所处第一个位置的元素（兼容老IE）

.box-box:last-child

前面.box-box 可以是多个 但是我只要所处子元素的第一个.box-box :last-child 选择当前所处最后一个位置的元素(IE9+)

:link[lɪŋk] a标签访问前的样式

:visited['vɪzɪtɪd] a标签访问后的样式（必须要写在hover之后，可能会出现一些问题）

锚伪类

:hover['hɒvə] 鼠标划上去应用的样式

后面只能跟前面的子元素选择器 可以通过~选择同级下的元素 通过+选择下"一个"的同级元素

:visited 访问后的样式 :focus 获取焦点的样式

:active 鼠标按下的样式 还没松开

顺序不能颠倒使用，否则会有问题 link visited hover active

访问前的样式 > 访问后的样式 > 鼠标划上去的样式 > 获取焦点的样式 > 鼠标按下的样式

not选择器:not(p) {...}

除了P的所有元素应用样式

p:not(.pare) {...}

p标签除了class名字叫pare的元素

p:not(.pare):not(.next) {...}

可以追加多个非的元素在后面

假如有个需求：我页面中只有一个元素，但是可能会有多个元素，我只想给最后一个元素添加样式,如果只有一个元素的时候我不能给它添加样式

提示：除了第一个元素

.box:last-child:not(first-child) {...}

当前.box元素必须在所处同级关系的最后一个子元素，其次排除它是第一个子元素visibility

可见度 默认可见：visible 隐藏：hidden

display: none;会将元素也隐藏

border-radius圆角Methoddescriptionborder-radius圆角50%从宽高一半开始border-top-left-radius上左角border-top-right-radius上右角border-bottom-left-radius下左角border-bottom-right-radius下右角

可以圆角宽高的一半 长方形的盒子可能就是椭圆，短边的一半 或 大于51%也可以，不推荐使用大于51%

伪类

元素内容之前或之后添加内容，是内联元素

:before :after

必须要添加content: " "; 这条样式，才会有效果 空的内容也要添加，after和before不加content是不会显示在页面当中

:before 在元素内容里添加一个子元素其位置是第一个

:after 在元素内容里添加一个子元素其位置是最后一个