css-初学者必备(3)

学习目标(3):

1. 熟练掌握CSS三大特性
2. 熟练掌握CSS盒子模型
3. 熟练掌握CSS浮动
4. 熟练掌握CSS定位
5. 熟练掌握CSS高级技巧强化CSS

CSS三大特性

css层叠性

层叠性是指多种css样式的叠加。
是浏览器冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个会将另一个属性层叠掉

一般情况下，如果出现样式冲突，则会按照css书写顺序，以最后的样式为准

1. 样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
2. 样式不冲突，不会层叠

css继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是:子承父业。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式(text-, font-,，1ine-这些元素开头的都可以继承，以及co1or属性)

css优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况， 具体如下:

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖维承来的样式。
行内样式优先。应用sty1e属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important 都具有最大优先级。

css特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算, 这个就是CSS Specificity,我们称为CSS特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下:
specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，-级大于- -级，数位之间没有进制，级别之间不可超越。

继承或者*的贡献值	0，0，0，0
每个元素（标签）贡献值为	0，0，0，1
每个类，伪类贡献值为	0，0，1，0
每个ID贡献值为	0，1，00
每个行内样式贡献值	1，0，0，
每个!important	∞无穷大

权重是可以叠加的

div  ul  li ------>0,0,3
.nav ul li ------>0,0,1,2
a: hover ------>0,0,1,1
.nav a    ------>0,0,1,1
#nav p   ------>0,1,0,1

1.数位之间没有进制比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10而不是0,0, 1, 0,所以不会存在10个div能赶上一个类选择器的情况
2.继承的权重是0

1.使用了!important声明的规则。
2.内嵌在HTML元素的style属性里面的声明。
3.使用了ID选择器的规则。
4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5.使用了元素选择器的规则。
6.只包含-个通用选择器的规则。7.同一类选择器则遵循就近原则。

盒子模型（css重点）

其实，CSS就三个大模块:盒子模型、 浮动、定位， 其余的都是细节。要求这三部分，无论如何也要学的非常精通。.

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子， 也就是一个盛装内容的容器。 每个矩形都由元素的内容、内边距(padding) 、边框(border) 和外边距(margin) 组成。

看透网页布局的本质

看透网页布局的本质: 把网页元索比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。

盒子模型（Box Model）

所有的文档元素(标签)都会生成一个矩形框， 我们成为元索框(element box)，它描述了一个文档元索再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子边框（border）

语法：

border : border-width || border-style || border-color

边框属性-设置边框样式（border-style）
边框样式用于定义页面中边框的风格，通用属性值如下：

none:没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线（最为常用）
dashed：边框为虚线
dotted:边框为电线
double：边框为双实线

盒子边框写法总结表

设置 内容	样式属性	常用属性值
上边 框	border-top-style：样式；border-top-width: 宽度;border-top-color:颜色;border-top:宽度，样式 颜色；
下边框	border-bottom-style：样式；border-bottom-width: 宽度;border-bottom-color:颜色;border-bottom:宽度，样式 颜色；
左边框	border-left-style：样式；border-left-width:宽度; border-left-color:颜色;border-left:宽度，样式 颜色；
右边框	border-right-style：样式；border-right-width: 宽度;border-right-color:颜色;border-right:宽度，样式 颜色；
样式综 合设置	border-style :上边[右边 下边 左边];	none无(默认), solid单实线,dashed虚线, dotted点线,double双实线
宽度综 合设置	border-width: 上边[右边 下边 左边];	像素值
颜色综 合设置	border-color:上边[右边 下边 左边];	颜色值，#十六进制， rgb（r,g,b）, rgb(r%,g%,b%)
边框综 合设置	border:四边宽度 四边样式 四边颜色;

表格的细线边框

table{boder-cellapse:aollapse;}collapse单词是合并的意思
border-collapse:collapse;表示边框合并在一起

圆角边框（css3）

语法格式：
border-radius:左上角 右上角 右下角 左下角；

内边距

padding属性用于设置内边距。是指边框与内容之间的距离

padding-top：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

注意：后面跟几个数值表示的意思是不一致的。

值得个数	表达意思
1个值	padding：上下左右边距
2个值	padding：上下边距，左右边距
3个值	padding：上边距，左右边距，下边距
4个值	padding：上边距，左边距，右边距，下边距

外边距

margin属性用于设置外边距。设置外边距会在元素之间创建空白，这段空白通常不能放置其他内容。

margin-top：上外边距
margin-right：右外边距
margin-botton：下外边距
margin-left：左外边距
margin：上外边距 右外边距 下外边距 左外边距
取值顺序跟内边距形同

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足两个条件
1.必须是块级元素
2.盒子必须制定了宽度
然后就是左右的外边距都设置为auto，就可以使块级元素水平居中

实际示例代码：
.header{width:960px;magin:0 auto;}

文字盒子居中图片和背景区别

1.文字水平居中是 text-align:center
2.盒子水平居中 左右margin改为auto

text-align:center;
magin:10px auto;

3.插入图片我们用的最多 比如产品展示类
4.背景图片我们一般用于小秃瓢背景或者哈达背景图片

清除元素的默认内外边距

为了跟方便地控制网页的元素，只做网页时，可使用如下代码清除元素的默认内外边距

*{
		padding:0;  /*清除内边距*/
		margin:0; /*清除外边距*/
		}

注意：行内圆度是只有左右外边距的，是美欧上线外边距的。内边距，在ie6等低版本浏览器也会有问题。
我们尽量不要给行内元素制定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

响铃块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者张的较大者。
解决方法：避免就好

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：
1.可以为法院诉定义1像素的上边框或上内边框。
2.可以为父元素添加overflow：hidden。

cotent宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。
width和height的属性可以为不同单位的数值或相对于父元素的百分比，
大多数浏览器，如火狐，ie6级以上版本都采用w3c规范，符合css规范的盒子模型的总宽度和总高度的计算原则是：

外盒尺寸计算（元素空间尺寸）
Element空间高度=content height+paadding+border+margin
Element空间宽度=content width+paadding+border+margin
内盒尺寸计算（元素实际大小）
Element height=content height+paadding+border(height为内容高度)
Element width=content width+paadding+border(width为内容宽度)

注意：
1.宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（img标签和input除外）
2.计算盒子模型的总高度时，还应该考虑上下两个盒子垂直外边距合并的情况。
3.如果有个盒子没有给定高度/宽度或者继承父亲的宽度/高度，则padding不会影响本盒子大小。

盒子模型布局稳定性

对于内外边距的使用，根据稳定性，建议按照优先使用 宽度（width）其次使用内边距（padding）
再次外边距（margin）。
原因：
1…margin会有外边距合并还有ie6下面margin加倍的bug所以最后使用。
2.padding会影响盒子大小，需要进行加减计算其次使用。
3.width没有问题我们经常使用宽度剩余法高度剩余法来做。

css3盒模型

css3中可以通过box-sizing来指定盒模型
1.box-sizing:content-box 盒子大小为width+padding+border content-box；此值为其默认值，其让元素维持W3C的标准Box Mode
2.box-sizing:border-box 盒子大小为width 就是说padding和border是包含到width里面的

	div{
		width：100px；
		height：100px；
		background：skyblue；
		margin：0 auto；
		border：1px solid gray；
		box-sizing：border-box；
	}

盒子阴影

语法格式：

	box-shadow：水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

1. 前两个属性是必须写的。其余的可以省略 2. 外阴影（outset）但是不能写 默认 想要内阴影 inset

	img{
		border：10px solid orange；
		box-shadow：3px 3px 5px 4px rgba（0，0，0，1）;
	}