CSS（三大特性，盒子模型）

最新推荐文章于 2023-01-05 14:35:51 发布

Everything_na

最新推荐文章于 2023-01-05 14:35:51 发布

阅读量192

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/Everything_na/article/details/110246225

版权

CSS的三大特性

层叠性：

相同选择给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。
原则：1⃣️样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
2⃣️样式不冲突，不会层叠。

继承性：
子标签会继承父标签的某些样式，如文本字号和颜色。
行高的继承：
行高可以跟单位也可以不跟单位

body{
	color:pink;
	font:12px/1.5 'Microsoft YaHei'；
}
div{
/*子元素继承了父元素body的行高1.5*/
/*这个1.5就是当前元素文字大小font-size 的1.5倍 所以当前div的行高就是21像素*/
font-size:14px;
}

⚠️如果子元素没有设置行高，则会继承父元素的行高为1.5
⚠️此时子元素的行高是：当前子元素的文字大小*1.5
⚠️body行高1.5这样写法最大的优势就是里面的子元素可以根据自己文字大小自动调整行高

优先级
当同一个元素指定多个选择器，就会有优先级的产生。
1⃣️选择器相同，则执行层叠行
2⃣️选择器不同，则根据选择器权重执行
继承或者*的选择器权重：0，0，0，0
元素选择器（标签选择器）：0，0，0，1
类选择器，伪类选择器：0，0，1，0
ID选择器：0，1，0，0
行内样式 style=“”：1，0，0，0
!important重要的：无穷大

div{
	color:pink!important;
}
#demo{
	color:red;
}
执行出来依旧是pink

⚠️：权重是有4组数字组成，但是不会有进位
⚠️：可以理解为类选择器永远大于元素选择器，以此类推
⚠️：等级判断从左向右，如果某一位数值相同，则判断下一位数值
⚠️：继承的权重是0
权重叠加
复合选择器会有叠加问题

复合选择器会有叠加的问题。
ul li权重 0，0，0，1+0，0，0，1=0，0，0，2 不会进位！！！
ul li{
	color:red;
}
li{
	color:green;
}
显示结果为red

盒子模型
看透网页布局的本质
过程：
1.准备好相关的网页元素，网页元素基本都是盒子box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容。
网页布局的核心本质：利用css摆盒子。

盒子模型（Box Model）组成
border边框，content内容，padding内边距，外边距margin

边框border
边框有三部分组成：边框宽度（粗细），边框样式，边框颜色
语法：border：border-width||border-style||border-color
border-width：定义边框粗细，单位是px
border-style：边框的样式
border-color：边框颜色

border-style：solid；实线边框
border-style：dashed；虚线边框
border-style：dotted；点线边框

边框简写：border：1px solid red；没有顺序
边框分开写法：border-top：1px solid red；只设定上边框，其余同理

表格细线边框border-collapse
控制浏览器绘制表格边框的方式，控制相邻单元格的边框
语法：
border-collapse：collapse；
collapse单词是合并的意思
border-collapse：collapse；表示相邻边框合并在一起

边框会影响盒子实际大小
1.测量盒子大小的时候，不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框宽度

内边距padding
设置内边距，盒子边框与内容的距离
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距

复合属性：
padding：5px；上下左右都有5像素的内边距
padding：5px 10px ；上下内边距5像素，左右内边距10像素
padding：5px 10px 20px；上内边距5像素，左右内边距10像素，下内边距20像素
padding：5px 10px 20px 30px：上右下左，顺时针
padding会影响盒子实际大小已经有了盒子宽高，会增加盒子大小
解决方法同border。

应用：导航栏

不设置盒子宽高，padding不会撑开盒子大小

外边距margin
控制盒子与盒子之间的距离
margin-top：上外边距
margin-bottom：下外边距
margin-left：左外边距
margin-right：右外边距
margin简写方式代表的意义跟padding完全一致。
应用：块级盒子水平居中对齐。
1⃣️盒子必须指定宽度
2⃣️盒子左右外边距都设置为auto
.header{ width:960px; margin:0 auto}
常规写法：
margin-left:auto; margin-right:auto;
margin:auto; margin:0 auto;

行内元素和行内块元素水平居中
给其父元素添加text-align：center即可

外边距合并：相邻块元素垂直外边距
1.相邻块元素垂直外边距的合并
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

.damao{
	margin-bottom:100px;
}
.ermao{
	margin-top:200px;
}

显示结果为200px

2.嵌套块元素垂直合并外边距的塌陷

<head>
	<style>
		.father{
			width:400px;
			height:400px;
			background-color:purple;
			margin-top:50px;
		}
		.son{
		width:200px;
		height:200px;
		background-color:pink;
		margin-top:100px;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
父元素会同子元素掉下来

父元素有上边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。
解决方法：给父元素加个边框；给父元素定义个内边距；可以给父元素添加overflow：hidden。

清除内外边距
在布局前，清除内外边距！！！

这句话也是我们css的第一行代码
*{
	margin:0;清除外边距
	padding:0;清除内边距
}

行内元素尽量只设置左右内外边距。

美工效果图基本用ps来做。

Everything_na

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（三大特性，盒子模型）

CSS的三大特性层叠性：相同选择给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。原则：1⃣️样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。2⃣️样式不冲突，不会层叠。继承性：子标签会继承父标签的某些样式，如文本字号和颜色。行高的继承：行高可以跟单位也可以不跟单位body{ color:pink; font:12px/1.5 'Microsoft YaHei'；}div{/*子元素继承了父元素body的行高1.5*/
复制链接

扫一扫