H5C3基础学习总结之CSS三大特性

程序猿tu

已于 2022-02-02 16:33:15 修改

阅读量563

点赞数 1

分类专栏： HTML/CSS 文章标签： css css3 前端

于 2022-02-02 14:59:39 首次发布

本文链接：https://blog.csdn.net/qq_41171409/article/details/122769247

版权

HTML/CSS 专栏收录该内容

17 篇文章 8 订阅

订阅专栏

CSS三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级。

层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。

比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）

代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            background-color: red;
        }
        div{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>123</div>  <!-- 最终背景颜色是蓝色 -->
    <div style="background-color: green;">123</div>  <!-- 最终背景颜色是绿色 -->
</body>
</html>

结果：

继承性

现实中的继承：我们继承了父亲的姓名。

CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号等。（子承父业）

恰当的使用继承可以简化代码，降低CSS样式的复杂性
子元素可以继承父元素的样式（text-,fint-,line-这些元素开头的可以继承，以及color属性）

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            font-size:70px;
            background-color: pink;
            color:skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>p继承div的样式</p>
    </div>
</body>
</html>

结果：

优先级

选择器权重：

选择器	选择器权重
继承，通配符选择器*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器，属性选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important（在需要添加强度的代码后面添加!important）	∞（最重要）

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        /* 从上到下，依次注释选择器来测试优先级 */
        div{
            color:green!important;
        }
        #id1{
            color:red;
        }
        .class{
            color: blue;
        }
        div{
            color:purple;
        }

    </style>
</head>
<body>
    <div>!import优先级</div>
    <div style="color:red">行内样式优先级</div>
    <div id="id1">id选择器优先级</div>
    <div class="c1">类选择器优先级</div>
    <div>标签选择器优先级</div>
</body>
</html>

结果：

盒子模型

Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

边框(border)

border可以设置元素的边框。边框有三部分组成：边框宽度、边框样式、边框颜色。

语法：

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

属性	作用
border-width	定义边框粗细，单位为px
border-style	定义边框的样式
border-color	定义边框颜色

其中盒子的四边都可以分开进行设置，代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p {
/*分开设置*/
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
p.one {
/*合并设置*/
    border-style:solid;
    border-color:red;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
<p class="one">两个不同的边界样式。</p>
</body>
</html>

结果：

此外在盒子模型中，可以通过vorder-collapse设置表格的粗细边框。

语法：

border-collapse: collapse;

表示相邻边框合并在一起，防止两个边框和在一起，使得边框变粗。

内边距（padding）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

padding属性可以有1～4个值。

值的个数	作用
padding: 5px;	1个值，代表上下左右都为5像素的内边距；
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素；
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素，下内边距10像素；
padding: 5px 10px 20px 30px;	4个值，内边距上5像素,右10像素,下20像素,左30像素。顺时针顺序

可能的值：

值	说明
length	定义一个固定的填充（像素px，pt，em等）
%	使用百分比值来定义填充

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
	background-color:yellow;
}
p.padding
{
	padding-top:25px;
	padding-bottom:25px;
	padding-right:50px;
	padding-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定填充边距的段落。</p>
<p class="padding">这是一个指定填充边距的段落。</p>
</body>

</html>

结果：

外边距（margin）

margin属性用于设置外边距，控制盒子与盒子之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

可能的值：

值	说明
auto	设置浏览器边距，这样设置，会依赖于浏览器
length	定义一个固定的margin（使用像素px，pt，em等）
%	定义一个使用百分比的边距

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p
{
	background-color:yellow;
}
p.margin
{
	margin-top:100px;
	margin-bottom:100px;
	margin-right:50px;
	margin-left:50px;
}
</style>
</head>

<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>

</html>

margin简写方式代表的意义和padding完全一致。

外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

盒子必须设定了宽度
盒子左右外边距都设置为auto。

.header {width: 960px; margin: 0 auto;}

常见的写法，以下三种都可以：

margin-left:auto; margin-right: auto;
margin: auto;
margin: 0 auto;

外边距合并

使用margin定义块级元素的垂直外边距时，可能出现外边距的合并，如下图所示：

嵌套块元素垂直外边距的塌陷

对于两个潜逃关系（父子关系）的块元素，父元素上有外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以为父元素定义上边框
可以为父元素定义上内边框
可以为父元素添加：overflow:hidden

相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和。其结果是取两个值中较大者。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局之前，需要首先清楚网页的内外边距。

在CSS样式中书协一下代码：

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

注意细节：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以了。