1+X考试课程（六）CSS特性

最新推荐文章于 2025-03-18 11:45:39 发布

Java.李知恩

最新推荐文章于 2025-03-18 11:45:39 发布

阅读量165

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_45166354/article/details/100915352

版权

本文详细介绍了CSS的三大特性：层叠性、继承性和优先级，包括样式冲突的解决、继承的原理以及CSS Specificity的权重规则。同时，探讨了CSS的盒子模型，涵盖边框、内边距和外边距的设置方法，如细线边框、圆角边框以及如何实现盒子居中等。最后提到了浮动和定位的概念，但具体内容将在后续分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS三大特性
CSS三大模块-盒子模型

CSS三大特性

层叠性

指多种CSS样式的叠加。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: pink;
        }
        p{
            color: orange;
        }
    </style>
</head>
<body>
	<p>面朝大海，春暖花开</p>
</body>

1.样式冲突，遵循就近原则。
2.样式不冲突，不会层叠。
在这里插入图片描述

继承性

子标签继承父标签的某些样式。

<body>
<div style="color: red">
    <p>面朝大海，春暖花开</p>
</div>
</body>

这里给父标签div设置改变字体样式，子标签p同样改变。
在这里插入图片描述

优先级

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1{
            color: orange;
        }
    </style>
</head>
<body>
<div class="d1" style="color: red">
    <p>面朝大海，春暖花开</p>
</div>

</body>

在这里插入图片描述
CSS Specificity为衡量CSS优先级的一个标准，以下为具体规范：
四个级别，值从左到右，左边最大，一级大于一级，数位之间没有进制，级别之间不可超越。

贡献元素	贡献值
继承或者*	0,0,0,0
标签	0,0,0,1
类，伪类	0,1,0,0
ID	0,1,0,0
行内样式	1,0,0,0
! important	无穷大

权重可以叠加，例如：在这里插入图片描述
总结（按优先级的先后顺序）：
1.使用了!important声明的规则。
2.行内样式。
3.id选择器。
4.类选择器、属性选择器、伪元素和伪类选择器。
5.标签选择器。
6.只包含一个通用选择器。
7.同一类选择器遵循就近原则。

CSS三大模块-盒子模型

所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
每个矩形都由元素的内容、内边距、边框、外边距组成。
在这里插入图片描述
所有的文档元素都会生成一个矩形框，我们成为元素框。
用于描述一个文档元素在网页布局中所占的位置大小，因此，每个盒子除了有自己的大小和位置外，还影响着其他盒子的大小和位置。

边框

border : border-width   border-style   border-color   ;

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

none：没有边框。
solid：单实线。
dashed：虚线。
dotted：点线。
double：双实线。

细线边框

表格使用。

table{
		border-collapse:collapse;
		}

圆角边框

border-radius : 左上角   右上角   右下角   左下角

<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        div:first-child{
            border-radius: 10px;
        }
        div:nth-child(2){
            border-radius: 50%;
        }
        div:nth-child(3){
            border-radius: 10px 40px;
        }
        div:nth-child(4){
            border-radius: 10px 40px 80px;
        }
        div:nth-child(5){
            border-radius: 10px 40px 80px 100px;
        }
        div:nth-child(6){
            border-radius: 100px;
            height: 100px;
        }
        div:nth-child(7){
            border-radius: 100px 0;
        }
    </style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>

在这里插入图片描述

内边距padding

内容与边框之间的距离。
padding-top ：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

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

外边距margin

在元素之间创建空白。这段空白通常不能放置其他内容。
padding-top ：上内边距
padding-right：右内边距
padding-bottom：下内边距
padding-left：左内边距

取值顺序与padding相同。

外边距实现盒子居中

条件：
1.必须是块级元素。
2.盒子必须制定了宽度。

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

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

清除元素的默认内外边距

*{
	padding:0;
	margin:0;
	}

注意：
行内元素只有左右边距，所以尽量不要给行内元素指定上下的内边距。

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

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。
在这里插入图片描述
解决方案：
1.可以为父元素定义1像素的上边框或上内边框。
2.可以为父元素添加 overflow:hidden;