特点：
宽度自适应拉伸到浏览器的边缘，默认占据一行，固定宽度就没有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; 基线对准中间可以解决
默认对齐基线
如果不想让子元素透明单独给个盒子给上透明
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 在元素内容里添加一个子元素其位置是最后一个
看完div css网页样式与布局 我怎么还设计不出网页来 是怎么回事
div只是html中的一部分。设计网页要考瞎帆虑很多东西团神乱，包括功能，美观等等。。。最快学html的方法就是看别人的网站代码，当初我没有系统学习html光是看网站代码就理解差不多60%的html知识塌档
怎么进行divcss网页布局
1
在桌面建立一个index.htm的文件和main.css的文件，当然你也可以不用main.css的文件，但是为了方便操作，还是建一个吧。只要把记事本另存为就可以了。
2
做好这两个文件后我们把网页的基础代码写上去，并使index文件受到main.css的控制，我们右键选择用记事本打开index文件输入代码，并在head里写上<linkhref="main.css"type="text/css"rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的，看上去温馨，我在main.css里写上*{background:FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的，表示已经受到css样式表的控制了。
4
下面我们进行布局一般网页都是3层一级，所以我们需要div布局了在body里面写一般我会先分为3层
<html>
<head>
<title></title>
<linkhref="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1"></div>
<divid="top2"></div>
<divid="top3"></div>
</div>
</body>
</html>
5
布局好后我们需要去定义属性了，这里我只是简单的定义了一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
定义好了我们打开预谈扮览一下看看，图片是不是居中和分成3块了。当然，颜色只是为了方便看清楚，可以不写。
6
其实做网页就是不断的画框宏侍灶，只要知道布局和定义属性就可以了，下面我们就整个做一下，因为我蔽扮的有一些是一样的，可以用class调用，class=这个只是随便写的，你爱等于什么就等于什么
<html>
<head>
<title></title>
<linkhref="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我截图的照片</div>
<divid="top2">
<divclass=""></div>
<divclass=""></div>
</div>
<divid="top3">
<divclass="jingyan"></div>
<divclass="jingyan"></div>
</div>
</div>
</body>
</html>
7
下面我们再去定义他的属性，当然我只是简单的定义一下
*{background:FF33FF}
top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}
top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}
top2{background:FF00CC;height:400px;width:800px}
top3{background:FF9933;height:550px;width:800px}
.{background:FF6666;height:380px;width:380px;float:left;margin:10px}
.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}
8
因为我这个是我截图相册的网页，下面我们就放照片吧，这里我偷个懒，把照片都放在桌面了，所以不用连接照片地址了。
<html>
<head>
<title></title>
<linkhref="main.css"type="text/css"rel="stylesheet">
</head>
<body>
<divid="top">
<divid="top1">这里都是我老婆的照片</div>
<divid="top2">
<divclass=""><imgsrc="QQ图片20141212090452.jpg"></div>
<divclass=""><imgsrc="QQ图片20141212090346.jpg"></div>
</div>
<divid="top3">
<divclass="jingyan"><imgsrc="QQ图片20141212090224.jpg"></div>
<divclass="jingyan"><imgsrc="QQ图片20141212090255.jpg"></div>
</div>
</div>
</body>
</html>
如果图片不在同一层目录，就需要连接到图片地址
9
这样一个网页就做好了，如果需要制作精美的网页，就需要不断的进行div布局和css样式的规定了。
10
下面我来说说网页制作的定义，网页的制作只要会使用div不停的布局，不停的定义他的属性，基本静态的网页就是这样做出来的