CSS 三大特性

CSS层叠性

css=层叠样式表

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

1.样式冲突，遵循的原则时就近原则

2.样式不冲突，不会层叠

CSS继承性子承父业

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

适当使用，不可滥用，好处减低了css的复杂度，子元素可以继承父元素的哪些样式(color,text-,font-,line-)

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

继承样式的权重为0，即在嵌套结构中，不管父元素的权重多大，被子元素继承是，权重都为0.行内样式优先。行内样式权重相当高权重相同时，层叠行，就近原则css有一个命令 !important  优先级最大

CSS的特殊性(Specificity)

关于css 的权重，我们需要一套公式，就叫CSS的特殊性(Specificity)，我们称之为css特性或非凡性

css特性有四个数字组成，从左到右，左边最大，数位没有进制，级别之间不可超越

继承的贡献值	0，0，0，0
每个元素贡献值	0，0，0，1
每个类，伪类	0，0，1，0
每个id	0，1，0，0
行内样式	1，0，0，0
！important	无穷大

div ul li	0003
.nav ul li	0012
a:hover	0011
.nav a	0011
#nav p	0101

1.数位之间没有进制，0005+0005=00010，
2.继承的权重为0总结优先级1.!important2.行内样式3.id选择器4.类选择器，属性选择器，伪元素，伪类5.元素选择器6.通配符选择7.同一类选择就近原则权重是优先级的算法，层叠是优先级的表现

盒子模型（CSS重点）

css三大模块，盒子模型，浮动，定位。

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

文字相当于牛奶，把它放进容器，也就我们的盒子。

万物皆是盒子

看透网页布局的本质

CSS 其实没有太多逻辑可言，类似我们小时候玩的积木,我们可以自由的，随意的摆放出我们想要的效果。

盒子模型（Box Model）

。首先，我们来看一张图，来体会下什么是盒子模型。

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

盒子边框（border）

盒子应用于ie6以上，ie5的略过

语法：

border : border-width || border-style || border-color
border: 1px solid red;

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

盒子边框写法总结表


设置内容	样式属性	常用属性值
上边框	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:四边宽度四边样式四边颜色;

border: 1px 2px 3px 3px ;

圆角边框(CSS3)

之前的世界只有矩形，学了这个就不只矩形

border-radius(半径): 左上 右上 右下 左下

内边距（padding）

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

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

值的个数	表达意思
1	上下左右
2	上下左右
3	上左右下
4	上右下左

外边距（margin）

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

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距右外边距下外边距左外边

取值顺序跟内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

必须是块级元素。
盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

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

文字水平居中是 text-align: center
盒子水平居中左右margin 改为 auto
插入图片我们用的最多比如产品展示类
背景图片我们一般用于小图标背景或者超大背景图片

background-position: center center;

清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，需要清除元素的默认内外边距：

* {  padding : 0px ;margin:0px;}

外边距合并

外边距塌陷：

当上下相邻的两个块级元素相遇时，他们之间的垂直间距不是top，bottom的和，而是两者的较大者，相邻块元素的垂直外边距的合并

解决方案：把较大值改成期望的值

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