9.16

最新推荐文章于 2022-09-13 11:26:40 发布

giao大星

最新推荐文章于 2022-09-13 11:26:40 发布

阅读量235

点赞数

本文链接：https://blog.csdn.net/weixin_45615651/article/details/100892423

版权

CSS优先级

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

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
       /*  0， 0 ， 0 ， 0  特殊性公式 */
        
        div {  /* 标签选择器  0,0,0,1*/
          color: pink;
        }
        
        :first-child {  /* 伪类选择器 0,0,1,0 */
          color: green;
        }

        .king {  /* 类选择器  0,0,1,0 */
          color: blue;
        }

        #wang {  /* id选择器   0,1,0,0 */
          color: red;
        }

        /* 最大的  不是选择器 */

        div {
          color: orange!important;  /* important就是重要的  级别最高 一旦出现优先执行*/
        }
        </style>
   
    </head>
    <body>
    <div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
    </body>
</html>

CSS特殊性（Specificity）

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准具体规范入如下：

specificity用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

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

盒子模型（CSS重点）

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

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

盒子边框（border）

边框就是那层皮。橘子皮。。柚子皮。。橙子皮。。。

语法：

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

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

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

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			width: 200px;
			height: 200px;
			border-width: 10px;  /* 边框宽度 粗细 */
			border-color: pink;  /* 边框颜色 */
			/* border-style: solid;  边框样式 实线 用的最多的 */
			/* border-style: dashed;  边框样式    大使的  虚词*/
			/* border-style: dotted;  边框样式 点线   */
			 border-style: double; /* 边框样式 双线  */


			 border:1px solid #ccc;

		}
        </style>
    </head>
    <body>
    <div>我是一个盒子</div>
    </body>
</html>

盒子边框写法总结表


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

内边距（padding）

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

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
			 /*padding-left: 20px; padding-top: 30px; 左内边距 */
			/* padding: 20px;  padding 如果只写一个值表示 上下左右都是 20像素 */
			/* padding: 10px 30px; 上下10  左右 30 */
			/* padding: 10px 30px 50px;  上 10  左右 30  下 50 */
			padding: 10px 20px 30px 40px;  /*  顺时针 上右下左 */
		}
        </style>
    </head>
    <body>
    <div>内边距就是内容和边框的距离</div>
    </body>
</html>