CSS04

新知识点：去掉li前面的项目符号（小圆点）

list-style：none；

圆角边框

（css3新增，有兼容性问题ie9以上）

border-radius：值

1、圆形：
Border-radius：50%；

2、圆角矩形：
border-radius：height/2 px；

3、常规圆角：
四个数值：上右下左
两个数值：对角（先左后右）
单个数值：border-top-left：10px（top和left数值不能颠倒）
三个数值：上左，右上和对角，右下

盒子阴影

css3新增

box-shadow：

h-shadow（阴影在水平的位置，必须）|
v-shadow（阴影在垂直的位置，必须）|
blur（模糊距离，模糊程度）|
spread（阴影尺寸）|
color（阴影颜色）|
inset（默认outset，不可以写outset，不然会没有阴影）
阴影不会影响盒子大小

鼠标经过：

任何盒子都可以用：hover来表示鼠标经过效果
div：hover

文字阴影

text-shadow：

h-shadow|
v-shadow|
blur|
color

浮动

传统网页布局的三种方式（1、标准流； 2、浮动；3、定位）

一、标准流

标签按照默认好的方式排列
1、块级元素会独占一行，从上向下顺序排列：
	常用元素*div、hr、p、h1~h6、ul、dl、form、table
2、行内元素按照顺序从左向右，碰到父亲边缘自动换行
	常用元素：span、a、i、em

二、浮动

什么时候用浮动：
1、如何让多个盒子一行并列分布，并且没有缝隙
2、让两个盒子左右对齐
就可以用浮动来解决
浮动可以改变标准流的默认排列方式
纵向排列标准流最合适，横向排列找浮动
浮动：
float：属性值
		none（默认不浮动）
		left
		right

浮动的特性

1、浮动的元素会脱离标准流（脱标）
	1、脱离标准流的控制移动到指定位置，会压住标准流
	2、浮动的盒子不再保留原先的位置
2、浮动元素会一行内显示并且元素顶部对齐
	如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并且顶端对齐排列，装不下就另起一行
3、浮动的元素会具有行内块元素的特性：
（任何元素都可以添加浮动，添加完就相当于行内块模式）
如果行内元素有了浮动，则不需要转化就可以直接给高度和宽度，而且没有空白缝隙
	*块级元素没有设置宽度，默认和父级元素一样宽，添加浮动后根据内容来判断
	*浮动的盒子中间是没有缝隙的，是紧挨者一起的
	*行内元素同理

浮动元素经常和标准流父级搭配使用（第一准则）

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则。
div本身没有内外边距，ul和li有
注意权重

网页布局第二准则：先设置盒子大小，之后设置盒子位置

浮动布局的两个注意点

1、浮动和标准流的父盒子搭配
2、一个元素浮动了，理论上其余的兄弟元素也要浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

清除浮动

一、为什么要清除浮动

1、不应该给父盒子设置高度，应该孩子有多少，就撑开父盒子多少，**不给父盒子高度**
2、但是给了浮动之后，子盒子浮动，脱标，父亲高度就变成0了，不会被撑开盒子，就会影响下面的标准流，所以要清除浮动。
*由于浮动元素不再占有原文档流的位置，所以会对后面的元素排版造成影响

二、清除浮动的本质

*清除浮动元素造成的影响
*如果父盒子本身具有高度，则不需要清除浮动
*清除浮动之后，父盒子会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
选择器{clear：属性值（left：清除左浮动，right：清除右浮动，both：同时清除两侧浮动）}
几乎只用clear：both
清除浮动采取的策略：闭合浮动，让孩子在父亲内部浮动

三、清除浮动的方法

1、额外标签法
（在最后一个浮动元素添加一个新标签）

.clear{
	clear:both;
	}
	<div class='clear'></div>
//缺点:添加了许多无意义的标签，结构化差

2、父级添加overflow方法

overflow：属性值
		hidden
		auto
		scroll
overflow：hidden
//缺点：移除隐藏，但无法显示溢出的部分

3、父级添加after伪元素
：after方法是额外标签法的升级版，也是给父元素添加

.clearfix:after{
	content；‘’；
	display：block；
	height：0；
	clear：both；
	visibility：hidden；
	}
<div class='box clearfix'>（在父元素中添加）
//缺点：没有照顾低版本浏览器

4、父级添加双伪元素
（相当于把窗户和门都给堵上了）

.clearfix:before,
	.clearfix:after{
		content:'';
		display:table;
	}
	.clearfix::after{
		clear:both;
	}
		.clearfix{
			*zoom:1;
		}
//缺点：没有照顾到低版本浏览器

总结

为什么要清除浮动
1、父级没高度
2、子盒子浮动了
3、影响下面布局了