HTMLCSS声明冲突和视觉格式化

最新推荐文章于 2022-07-02 18:46:22 发布

想被带飞的鱼

最新推荐文章于 2022-07-02 18:46:22 发布

阅读量404

点赞数

分类专栏： HTMLCSS 文章标签： html css3 前端

本文链接：https://blog.csdn.net/m0_62008199/article/details/124070293

版权

HTMLCSS 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

声明冲突

声明冲突：规则属性相同，值不同
层叠（解决声明冲突的一种机制）
- 层叠的过程
  - 比较优先级（用户样式表>作者样式表（内部，外部，行内）>浏览器样式表）
    - 优先级低的声明会被淘汰，高的则胜出
  - 比较特殊性（表）
    - 特殊性低的声明会被淘汰，高的则胜出
  - 比较源次序（代码的先后顺序）
    - 最后的胜出
- 若属性值后面根!important是一个重要声明
```
.se_item2_1_2 .pa{
    width: 261px;
    height: 242.5px;
    padding: 30px 20px 0 20px !important;
}
```
- 比较优先级（低到高）
  - 浏览器默认样式表中的声明
  - 作者样式表中的普通声明
  - 作者样式表中的重要声明
- 比较特殊性-具体规则
嵌入 id class 元素
a b c d
style 1 0 0 0
id 0 1 0 0
claas,属性，伪类 0 0 1 0
元素，伪元素 0 0 0 1
通配符 0
！important 最高
遇到最后相同的就比较源次序

行内元素>ID选择器>类选择器>元素选择器>通配符选择器（!important>style>id>calss>element>*）

规则适用范围越大，特殊性越低，使用范围越小，特殊性越高
继承（inherit）：父元素有的元素，子元素也有
- 文本类的属性会被继承如：color，font-size
- 图片，背景颜色不会被继承
- 继承具有传递性
- 满足继承的条件
  - 该属性是可继承的属性
  - 该属性在样式表种没有声明
- 强制继承（inherit）
```
/*将css的属性值设置为Inherit*/
.preent{
    width: 400px;
    height: 400px;
    border: 3px solid;
}
.chlid{
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    border: inherit;
}
```
- 属性值计算过程简介
  - 无属性值-------
  - 1.确定声明值
  - 2.层叠冲突
  - 3.使用继承
  - 4.使用默认值
  - ------>每个值都有属性

	嵌入	id	class	元素
	a	b	c	d
style	1	0	0	0
id	0	1	0	0
claas,属性，伪类	0	0	1	0
元素，伪元素	0	0	0	1
通配符	0
！important	最高

视觉格式化

视觉格式化模型要求，所有的元素必须放置在它的包含块中
元素在包含块中的尺寸和位置，主要受到两个因素的影响
- 元素的盒模型
- 元素的定位体系

定位体系的概述

常规流（normal）：又叫普通流，文档流，普通文档流
- 行内元素多个元素在一行，不会自动换行
浮动（float）
- 当元素的float属性值为left和right时则为浮动

决对定位（absolute positioned）

属性值：

 /* 子绝父相 */
/* 相对定位 相当于元素原来的位置移动 元素原来的空间不变，不脱离文档流 */
position: relative;
/* 绝对定位 相对于有position（不能是static）属性的父元素偏移 */
/* 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */
position: absolute;
/* 静态定位 不脱离文档流*/
position: static;
/* 固定定位 元素的位置相对于浏览器窗口是固定位置，不发生滚动 脱离文档流 */
position: fixed;

盒子位置（垂直方向上若两个外边距相邻，则折叠）
- 均为正数取最大，均为负数取最小，一正一负则相加
常规流盒子与浮动（高度坍塌）：当常规流是父元素时，会忽视浮动元素
- 解决高度坍塌，就是清除浮动（方法：）
- a标签设置浮动后会变成块级元素
  - clear(写在最后一个常规流父元素里面)
  - 伪元素清除浮动
```
p::after{
 content:'',
 clear:both
}
```
  - 激活BFC：overflow：hidden;

想被带飞的鱼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTMLCSS声明冲突和视觉格式化

声明冲突声明冲突：规则属性相同，值不同层叠（解决声明冲突的一种机制）层叠的过程比较优先级（用户样式表>作者样式表（内部，外部，行内）>浏览器样式表）优先级低的声明会被淘汰，高的则胜出比较特殊性（表）特殊性低的声明会被淘汰，高的则胜出比较源次序（代码的先后顺序）最后的胜出若属性值后面根!important是一个重要声明.se_item2_1_2 .pa{ width: 261px; height: 242.5px;
复制链接

扫一扫