css样式继承体现&&盒模型分析&&BFC&&clearfix

一时失言乱红尘 2022-06-06 07:05 175阅读 0赞

**css继承性**  
继承性相关说明  
• 定义：有些样式属性，在给指定标签设置的时候，同时也给后代设置了，此性质就是继承性  
• 条件：继承到样式的标签和定义样式的标签必须是从属关系（后代标签关系）  
对文本样式设置的基本属性才能被继承（颜色color\\样式text\\字体font\\行属性line）  
所有关于对于盒子模型（div、span等）的属性设置（border、定位、布局）都不能被继承  
**CSS层叠性**  
• 层叠性指的是样式的优先级，当产生冲突时以优先级高的为准  
• 初步认定：id比class厉害，class比标签厉害？  
**具体如何判断选择器的层叠效果呢？**  
• 通过权值判断法  
• 通过每一个选择其中的id选择、类选择、标签选择数量来计做权值（ICE）  
• 先比较id权值，再次比较类、最后比较标签  
• 全部一样比较顺序  
**注意**：数权值前提是一定要保证每一条选择器必须要选中的指定元素  
**说明：**只有通过提升权值方式来加大选中力度  
**说明**：没有直接选中的选择器权值是0  
**权值判定注意点：**  
• 1、看是否所有的选择器都选中了指定标签，如果全部选中就数权值  
• 2、如果没有选中，则遵循就近原则  
• 3、都选中同一级别，则看个体元素的权值  
**最后补充说明**：important优先级最高，\*优先级最低

> **选择器（4+3+3+\*）**  
> **四个基本选择器**  
> • 通用选择器  
> • 标签选择器  
> • ID选择器  
> • 类名选择器 ： 类就是被重用的一个标签可以有多个类一个类可以用在多个标签上  
> PS：挂类法编写样式  
> **三套复杂选择器格式**  
> • 后代选择器 : 空格表示后代 多层选择，不固定层次  
> • 交集选择器 ：不用任何字符隔开，后面的选择器一般是class或者id  
> • 并集选择器 ： 逗号表示并集  
> **三个非常用选择器：（E、F为基本选择器）**  
> •子元素选择器：E>F\{property:value\} : 右尖括号符合F选择器的所有E子元素  
> •直接相邻选择器：E+F\{property: value\} : +号表示紧邻 当前选中元素后紧跟的后续一个元素  
> •普通相邻选择器：E~F\{property: value\} : ~兄弟后续元素当前选中元素后的所有符合F选择器的元素  
> **伪类选择：（E、F为基本选择器）**  
> •超链接选择：:link、:visited、:hover、:active  
> •第一个子元素：E:first-child  
> **伪对象/伪元素选择：（E、F为基本选择器）**  
> •文字选择：E::first-letter、E::first-line  
> •插入内容：E::before、E::after

--------------------

**盒模型解析**  
盒模型概念  
• 也成为盒子模型或者框模型  
• 每一个封闭区域我们都可以把它看做一个盒子模型，依照盒子的属性来确定区域的样式  
**盒模型的区域划分**  
• margin(外边距) - 清除边框外的区域，外边距是透明的  
• border(边框) - 围绕在内边距和内容外的边框  
• padding(内边距) - 清除内容周围的区域，内边距是透明的  
• content(内容) - 盒子的内容，显示文本和图像  
**盒模型CSS相关属性**  
• width（宽度）- 设置模型的内容宽度  
• height（高度）- 设置模型的内容高度  
• padding（内边距）- 设置模型的内边距的距离  
• margin（外边距）- 设置模型的外边距的距离  
• border（边框）- 设置模型的边框大小  
**说明**：实际上给盒子设置的大小只是内容content区域的大小，盒子的边框和padding是不包括的  
**注意：**如果子盒子通过margin-top方式使用，则父盒子必须要设置粗细或者padding或者overflow：hidden，才能避免父盒子受影响

--------------------

**内联元素和块元素分析**  
什么是标准文档流？  
• 标准文档流是指元素排版布局过程中，元素会自动从左往右，从上往下的流式排列  
• 典型的文档流：word排版，html所有排版方式，类似于word中的文档排版，遵循排版规则  
文档流中元素分类  
• 内联元素（行内元素）  
• 块级元素  
**块级元素特点**  
• 所有块级元素独自占有一行，不能和其他元素共享一行  
• 可以根据盒模型特性设置宽高内外间距，如果不设置宽度，则默认填充父级元素的宽度  
• 内部可以继续容纳其他元素  
• 元素包括：div、dl、h系列、hr、ul、li、ol、table、p等  
**内联元素特点**  
• 默认和其他元素在同一行  
• 不遵循盒模型特性设置，宽高只和内容有关  
• 元素包括：文本标签(a、b、u、font、span )、input、label、textarea、img、select等  
**块级元素和内联元素相互转换**  
• 块级元素->内联元素：增加css属性 display:inline  
• 内联元素->块级元素：增加css属性 display:block  
**脱标实现**  
• 定义：让标签脱离标准文档流的约束限制，独自进行定位设置  
• 约束：一般脱标设置的都是块级元素（内联元素可以脱标，不常用）  
• 实现方式：浮动、绝对定位、固定定位  
**浮动分析**  
浮动说明  
• 给元素的float属性赋值后，标签会脱标，停留在浮动层  
• 浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去  
• 如果填充的元素为块级元素且发生了重叠，浮动元素覆盖块级元素  
• 如果之前是内联标签，浮动后，是可以设置宽高度（因为脱标了）  
**注意**：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。  
**注意**：所有脱标的元素，都符合盒模型的约束规则（不管是块级元素还是内联元素）

--------------------

**有关BFC的定义：**  
• BFC（W3C CSS 2.1 规范中的一个概念）就是所谓的Block formatting contexts （块级格式化上下文）。创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC仍然属于文档中的普通流。  
**那么怎么触发BFC呢？**  
（1）：float 除了none以外的值  
（2）：overflow 除了visible 以外的值（hidden，auto，scroll ）  
（3）：display (table-cell，table-caption，inline-block)  
（4）：position（absolute，fixed）  
（5）：fieldset元素  
**注意：**  
display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。  
**BFC的特性：**  
**1)**块级格式化上下文会阻止外边距叠加  
当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。  
**2)**块级格式化上下文不会重叠浮动元素  
根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元 素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这 个测试用例）。  
**3)**块级格式化上下文通常可以包含浮动  
触发了BFC的话，就不会被float元素覆盖，当子元素全部浮动的时候也能够正确地包含了

--------------------

**clearfix**

.clearfix:after { content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/ display: block; /*加入的这个元素转换为块级元素。*/ clear: both; /*清除左右两边浮动。*/ visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/ line-height: 0; /*行高为0；*/ height: 0; /*高度为0；*/ font-size:0; /*字体大小为0；*/ }
    
    .clearfix { *zoom:1;}   /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的

**.clearfix的原理：**  
1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。  
2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。  
3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。

--------------------

我的淘宝小店：店名：珍珍的时尚饰配阁。店铺号：16668402  
网页链接：[https://shop222559160.taobao.com/][https_shop222559160.taobao.com]

[https_shop222559160.taobao.com]: https://shop222559160.taobao.com/