CSS三大特性，初识盒子

CSS层叠性
层叠性就是CSS处理冲突的一种能力。
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性。
层叠性由优先级决定。
间接选中就是指继承。
1.样式冲突，遵循的原则时就近原则
2.样式不冲突，不会层叠
CSS继承性子承父业
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可
CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
继承样式的权重为0，即在嵌套结构中，不管父元素的权重多大，被子元素继承是，权重都为0.
行内样式优先。行内样式权重相当高
权重相同时，层叠行，就近原则
css有一个命令 !important 优先级最大
CSS特殊性
我们使用四个以逗号分隔的数字来表示特殊性，比如:
每个元素或伪元素选择器贡献特殊性为 0，0，0，1
每个类、伪类或者属性选择器的特殊性为 0，0，1，0
每个ID选择器的特殊性为 0，1，0，0
结合符和通配符的对特殊性没有贡献
计算一个组合选择器的特殊性的时候就先计算各种选择器的数量以及对应的特殊性再相加

盒子模型（CSS重点）简介
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
border
语法：border: 1px solid red;
边框宽度实线类型红色
总结表：
圆角边框
语法：border-radius(半径) : 左上右上右下左下
padding
设置内边距，指的是边框与内容之间的距离
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
margin
设置外边距，其中不能放置其他内容
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距右外边距下外边距左外边
杂项
外边距实现盒子居中：如果是块级元素，且指定了宽度，左右外边距设置为auto
两个块级元素相遇，之间的距离是两者相遇的top及bottom的较大值

CSS三大特性，初识盒子相关推荐

CSS布局：CSS三大特性、盒子模型
CSS布局 Date: September 3, 2022 Summary: CSS三大特性.盒子模型 CSS三大特性 ◆ 能够认识不同选择器的优先级公式 ◆ 能够进行 CSS 权重叠加计算,分析 ...
day 9/16 css三大特性和盒子模型
CSS 三大特性层叠性继承性特殊性 CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另 ...
CSS 三大特性与盒子模型
CSS 三大特性 CSS层叠性 css=层叠样式表所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个 ...
【前端基础之css2(emmet语法、CSS复合选择器、元素的显示模式、Snipaste截图工具、小米侧边栏制作、CSS背景、CSS三大特性、盒子模型、PS基本操作】
emmet语法快速生成HTML标签: 快速生成CSS样式语法: 方法1(没有找到对应的文件,所以用了方法2): 方法2: 左下角选择设置搜索框输入"格式化",勾选上如图三个选项 ...
前端之CSS篇(三)——CSS三大特性及盒子模式和边距边框
1.CSS的三大特性 CSS有三个非常重要的三个特性:层叠性.继承性.优先性 1.1 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式.层叠性主要解决样式冲突的问题. ...
2022年7月28日（CSS三大特性、盒子模型）
目录一.CSS的三大特性 1.1 层叠性 1.2 继承性--简化代码行高的继承 1.3 优先级二.盒子模型 2.1 盒子模型盒子模型的组成: (1)边框(border) (2)内边距(padd ...
css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录文章目录系列文章目录前言一.css三大特性 1.继承性 2.层叠性 3.优先级二.权重计算 1.引入库 2.读入数据三.BFC(块级格式化上下文) 1.引入库 2.读入数据总 ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
前端笔记（4）css，复合选择器，标签的显示模式，行高，css背景，css三大特性
css样式表/层叠样式表(2) (1)css复合选择器后代选择器子元素选择器交集选择器(不常用) 并集选择器链接伪类选择器 (2)标签的显示模式块级元素block-level 行内元素inl ...

CSS三大特性，初识盒子

CSS三大特性，初识盒子

CSS三大特性，初识盒子相关推荐

最新文章

热门文章