Css三大特性
css层叠性
所谓层叠性是指多重css样式的的叠加。
是浏览器处理冲突的一个能力,如果一个属性通过两个选择器设置到同一个元素上,那么这个时候一个属性会把另一个属性叠掉。
一般情况下,如果出现相同的样式,则会按照css书顺序,以最后样式为准
div
{
font-size: 12px;
color: skyblue
}
div
{
color: red
}
前面的天蓝色会被后面的红色来覆盖。哪个样式离结构近,就执行那个样式/
css继承性
所谓继承性是指书写css样式表时,子标签会继承父标签的某些样式,如文本和字号,想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是 :子承父业。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div
{
font-size: 12px;
color: skyblue
}
</style>
</head>
<body>
<div>
<p>内容哦</p>
</div>
</body>
</html>
如上并没有设置p的属性,但是p继承了div的属性,这就是css的继承性。
注意
恰当的使用继承可以简化代码,降低css样式的复杂性,子元素可以继承父元素的样式(text- , font-,line- 这些元素开头的都可以继承,以及color属性)。
css优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级问题。此外还有一些特殊情况要注意
1,继承样式的权重为0.即在嵌套结构中,不管父元素样式权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承的样式。
2,行内样式有限。应用style属性的元素,其行内的权重非常高,可以理解为远大于100.总之,他拥有比上面的选择器都大的优先级。
3,权重相同的时候,css遵循就近原则,也就是说靠近元素的样式具有最大的优先级,或者说排在后面的样式优先级最大。
4,此外,定义了一个 !important 命令,该命令赋予最大的优先级。也就是不管权重如何以及样式位置的远近,!important都具有最大的优先级。
css特殊性(specificity)
关于css权重,我们许哟一套公式来计算,这个就是css specificity,我们成为css特性或者非凡性。他是衡量css值优先级的一个标准,具体规范如下
specificity用一个四位数 字段来表示,更像是四个级别,值从左到右,左面最大,一级大于一级,数位之间没有进制,级别之间不可超越
权重可是可以叠加的
div ul li 是0,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,使用 !import声明规则
2. 内嵌在 HTML元素的style属性的声明
3. 使用了id 选择器的规则
4. 使用了类选择器,属性选择器,为元素和伪类选择器的规则
5. 使用了元素选择器的规则
6. 只包含一个通用选择器的规则
7. 同一类选择器则遵循就近原则
Css盒子
CSS盒子也是装东西的,比如我们要将文字内容、图片布局网页中,那就需要像盒子一样装着。这个时候我们对其对象设置css高度(css height)、css宽度(css width)、css边框(css border)、css 边距(css margin)、填充(css padding),即可实现像盒子一样的长方形、正方形平面盒子。
通常我们这样:
一组<div></div>、<span></span>
等类似这种语法标签组叫1个盒子。因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充(padding)等属性后即可呈现出盒子一样的长方形或正方形。所以我们CSS盒子模型因此而得来。
盒子边框
边框就是那层皮,下图的border部分
语法 : border: width style color
其中边框的样式(style)常用属性为下
边框的综合设定:
<style>
.email
{
border-top: 1px solid red;
border-bottom: 1px solid pink;
}
.tel
{
border: 1px solid skyblue;
}
</style>
表格的细线边框
html里面表格边框会叠加在一起,所以会显得特别的粗,用border-collapse: collapse;
和border-collapse: collapse;
就可以合并在一起
<head>
<style>
table
{
width: 700px;
height: 700px;
border: 1px solid red;
border-collapse: collapse;
}
td
{
border: 1px solid red;
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>1231</td>
<td>1231</td>
<td>1231</td>
<td>1231</td>
</tr>
<tr>
<td>113131</td>
<td>113131</td>
<td>113131</td>
<td>113131</td>
</tr>
<tr>
<td>23232</td>
<td>23232</td>
<td>23232</td>
<td>23232</td>
</tr>
</table>
</body>
</table>
圆角边框(css3)
语法
<head>
<style>
div
{
width: 50px;
height: 50px;
color: red;
border: 1px solid black;
background-color: pink;
border-radius: 10px; <>
}
</style>
</head>
<body>
<div>
内容
</div>
</body>
内边距(padding)
padding属性用于设置内边距。是指边框与内容之间的距离。
*padding-top;上内边距
padding-right;右内边距
padding-right;下内边距
padding-right;左内边距
*
外边距(margin)
margin属性用于设置外边距,设置外边距会在元素之间创建空白,这段空白通常不能放置其他内容。
margin-top;上外边距
margin-right;右外边距
margin-bottom;下外边距
maigin-left;上外边距
maigin:上外边距 右外边距 下外边距 做外边距
取值顺序和内边距相同。
外边距实现和子居中
可以让一个盒子实现水平居中,需要满足以下两个条件;
1,必须是块级元素
2,盒子必须指定宽度(width)
然后给做右外边距都设置auto,就可以是块级元素水平居中
实际工作中常用这种方式进行网页布局,代码如下
div
{
width: 960px;
margin: 0 auto;
}
清除元素的默认内外边距
为了更方便控制网页中的元素,制作网页的时候,可以使用如下代码清楚默认元素的默认内外边距;
*
{
padding: 0; /* 清除内边距 */
margin: 0; /* 清除外边距 */
}
注意:行内元素只有左右内外边距,没有上下的内外边距的。
外边距合并问题
使用margin定义块元素的垂直外边距时候,可能会出现外边距合并
相邻块元素垂直外边距合并
当上下相邻的两个块级元素相遇时,如果有上面的元素又下外边距margin-bottom ,下面的元素有上外边距 margin-top,则他们的之间的垂直不是marigin-bottom和margin-top之和,而是两者中的较大者,这种现象叫做相邻块元素垂直外边距合并,也称外边距塌陷。
解决方案:外边距只给一个元素不要分开给,避免就好了
相邻块元素垂直外边距合并
对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并成两者中较大者,即使父元素的上外边距为0,也会发生合并,
解决方案:
1,可以为父元素定义1像素的上边框或者上内边距
2,可以为父元素添加 overflow:hidden;
Content的宽度和高度
使用宽度属性width和高度属性height可以对盒子的大小进行控制,
width和height的属性值可以为不同单位的数值或对于父元素的百分比%,实际工作中最常用的是像素值,
大多数浏览器的计算原则是:
/* 外盒尺寸计算(元素空间尺寸) */
Element 空间高度 =content height +padding + border +margin
Element 空间宽度 =content width +padding + border +margin
/* 内盒尺寸计算(元素大小) */
Element height =content height +padding + border (height为内容高度)
Element width =content width +padding + border (height为内容宽度)
注意:
1,宽度属性width和高度属性height只适用于块级元素,对行内元素无效(img标签和input除外)
2,计算盒子模型总高度的时候,还要考虑上下盒子垂直外边距合并的情况
3,如果一个盒子没有给定宽度或者高度, 或者继承了父亲的宽高,则padding不会影响本盒子的大小;