选择器与盒模型

最新推荐文章于 2024-06-22 17:01:14 发布

Neko__cat

最新推荐文章于 2024-06-22 17:01:14 发布

阅读量124

点赞数

分类专栏： html盒模型 CSS

本文链接：https://blog.csdn.net/Neko__cat/article/details/103570822

版权

html盒模型同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

继承

概念：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	.inherit{
		color: red;
		font-size: 22px;
	}
</style>

<body>
	<div class="inherit">
		<p>css继承性</p>
		<div>
			该子代会继承父代的某些属性
		</div>
	</div>
</body>
</html>

子代div没有设置属性，但继承了父代inherit的文本属性。

层叠

概念：层叠是CSS的一个基本特征，它是一个定义了如何合并来自多个源的属性值的算法（用于解决CSS声明冲突）。它在CSS处于核心地位，CSS的全称层叠样式表正是强调了这一点。（html中一个元素可以有多个css样式，当css样式的属性值发生冲突时有专门的计算方法）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
	.inherit{
		color: red;
		font-size: 22px;
	}
	.inherit width{
	width: 150px;
	height: 150px;
	background-color: aqua;
	}
	.color{
		color: blue;
		font-size: 16px;
	}
</style>

<body>
	<div class="inherit">
		<p>css继承性</p>
		<div class="color width">
			该子代会继承父代的某些属性
		</div>
	</div>
</body>
</html>

当一个div元素同时有两个css样式时该div元素会执行两个css样式赋予的属性。

层叠过程：
先比优先级 >在比特殊性> 在比源次序

特殊性：

示例
color:red; 普通声明
color:red !important; 重要声明

选择器优先级

当一个html元素的css样式发生层叠且层叠发生冲突时，就会按选择器优先级计算。
权重值高的优先级高于权重值低的。
权重值

	嵌入	id	class	元素
	a	b	c	d
style	1	0	0	0
id	0	1	0	0
class、属性、伪类	0	0	1	0
元素、伪元素	0	0	0	1
通配符	0
!important	最高

注意：权重值的大小不会满10进1；c的10还是属于c不会进位到b去

盒模型

概念：盒模型又称框模型（Box Model）,包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。其中只有外边距(margin)可以取负值。

盒模型又分为：IE盒模型和标准盒模型；其中标准盒模型的元素内容(content)等于css样式赋予的值，而IE盒模型的元素内容等于css样式赋予的值减去边框(border)和内边距(padding)的和。
将标准盒模型转换为IE盒模型的代码：

box-sizing: border-box;

定位体系

定位体系分为3种：
三种定位体系

常规流（normal flow）/文档流
浮动（float）
绝对定位（absolute positioned）

垂直方向上两个盒子相邻，外边距会折叠（取大值）

常规流（normal flow）/文档流(盒模型默认为常规流）
概念：
网页中的流就是对文档的读取和输出的顺序. 其遵循从左到右, 从上到下的读取, 输出和显示顺序.
通常的资料中,常常称之为文档流,但是标准中没有这种说法,只有normal flow一词,应称之为普通流,或常规流.

浮动：

float:none;/*不浮动（默认值）*/
float:left;/*左浮动*/
float:right;/*右浮动*/

浮动盒子位置

浮动盒子的顶边不得高于上一个盒子的顶边
右浮动的盒子向上向右排列
左浮动的盒子向上向左排列
若剩下的空间无法放下浮动盒子，则盒子自动换行

定位

相对定位(不会脱离文档流）

position:relative;/*（与margin相似）*/
left:50px;/*向右走50px；*/
top:50px;/*向下走50px；*/

绝对定位

会脱离文档流

position:absolute;
/*默认的(0,0)点在body左上角*/
top:0;
left:0;

绝对定位元素已包含它离它最近的非静态定位元素的(0,0)点

position:static;/*静态定位元素*/

固定定位
脱离文档流
行内元素脱离文档流后宽高可设

position:fixed;

多个元素重叠才用定位

Neko__cat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选择器与盒模型

继承概念：CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。例如：<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><style...
复制链接

扫一扫