CSS概念性东西总结

本文主要是介绍CSS概念性东西总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.a标签颜色的继承

1. a标签比较特殊，如果a标签没有href属性，a标签没有默认样式，那么继承颜色生效

2. 但是如果a标签拥有href属性，a标签链接的自带样色会盖过继承

3. a的4个状态（有链接、被点击后、点击中、鼠标悬浮）是有自己的样式的，只能通过伪类来控制这4中样式

4. 所以在开发中给a标签设置颜色，需要直接对a标签进行设置

2.去除图片默认间隙

产生原因

1. 因为图片底部默认和行框的文字基线对齐，所以图片和行框底部有一定的间隙

2. 就算行框只有一个图片，间隙也存在。是因为在当前行框内，如果存在一个行内块元素的时候，就会渲染一个看不见摸不着的节点

3. 这个节点拥有当前元素的字号大小，行高等信息。这个节点被称作为“幽灵空白节点”

解决办法

display:block

图片底部能够和文字的基线对齐，是因为图片默认的vertical-align为baseline

但是verticle-align这个属性只有行内元素和行内块元素支持，块级元素是失效的

所以将img设置为块元素属性 就可以不用基线对齐了

也可以理解为：因为改成块，解决了幽灵空白节点的问题,并且没有元素和他在个行框

设置vertical-align不为baseline

设置verticle-align不为baseline 比如 top bottom middle都可以

font-size:0

空白是文字有字号大小，撑开了当前的em方框

直接让字号大小变成0 文字就没有大小了 也就是幽灵空白节点文字大小变成0了
也不会撑开间隙了,主要针对于没有文字的行框

line-height:0

改变文字的高度 文字的高度可以由line-height来控制

让line-height：0 也可以解决问题

浮动

3.display:none和undefined的区别

• visibility可以继承，子元素是因为继承了才隐藏

  • 可以覆盖继承，子元素即可显示

  • display不能被继承，而是直接带着所有内部元素直接隐藏

• visibility隐藏，原来空间仍然保留,display隐藏，原来空间消失被占用

• js可以获取到visibility隐藏元素的可视化宽高,
  js不可以获取到display隐藏元素的可视化宽高

4.opacity和rgba和hsla透明的区别

• rgba和hsla只是一个颜色，是属性的取值，比如color
  background-color，所以只是对颜色的一个处理

• opacity是一个属性，透明是直接设置给元素的，并不会对元素的某部分进行控制

5.盒子模型概念

• 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间

• 盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成

  • 内容区域：你书写的内容或者子元素能够显示的区域

  • 内边距：撑开内容与边框的距离

  • 边框：元素的边框

  • 外边距：撑开元素和其他元素之间的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xc3yEZTc-1605107819904)(media/f9b76e24463a4991088b89a37982f0fa.png)]

6.盒子模型-内容区域(在标准盒子模型下):

标准盒子模型下设置的width和height都是content（内容）区域的宽高

• width：

  • 默认是auto。auto分为4种情况：

    1. fill-available：充分利用可使用空间（块标签）

    2. fit-content:收缩到合适（浮动，定位）

    3. min-content:收缩到最小（表格中常见）

    4. max-content:超出容器限制（英文单词较长，或者设置了不换行，就会超出容器限制）

• height：

  • auto：其高度由内部元素堆叠而成，也就是内部元素撑起来的

8.margin 0 auto居中

• 在正常的布局中，块级元素具有满屏的属性，也就是在水平方向上占满父级的宽度

• 满屏以后，内部元素的内容+内边距+边框+外边距 刚好是等于 父级的 内容区域的大小

• 所以当水平方向上的 宽度 边框
  内边距都是固定值的时候，在水平方向上margin设置auto的时候，默认左右平分剩余空间，达到水平居中效果

• 当水平方向出现auto的时候，剩余空间会进行分配，当某一边不要
  另外一边出现auto， 剩余空间就会直接给另外一边

7.设置width和height的坑

• 想要让高度的百分比生效，需要给父级也要设置高度（不能是auto）

• .box{

• /*假设一个元素 内容区域加上左右各50的margin 正好撑满父级

• 以下设置是错误的*/

• width: 100%;/*把内容区域设置成了和父级一样宽 再加上margin
  就超出父级了*/

• margin: 0 50px;

• height: 100px;

• background-color: red;

• /*解决以上问题很简单，不写width，或者设置width为auto*/

• width: auto;

• }

9.垂直方向上的margin : auto 0 为什么不行

• 相对于水平方向来说，块元素在垂直方向上并没有满屏的属性，margin默认在上下的值都是0

• 无论是否设置垂直方向的auto，表现出来的都是元素多高就占用多少，并没有剩余空间去平分

10.margin的父级塌陷

• 当一个父级中 第一个元素的margin-top会塌陷给父级

• 最后一个元素的margin-bottom会塌陷给父级
  防止父级和其他元素之间的间隙过大，当第一个和最后一个子元素的margn塌陷给父级以后
  父级就可以和兄弟元素在垂直方向上进行叠加

• 避免父级塌陷

  1. 给父级设置一个边框 边框的宽度不能为0
     防止影响视觉，可以设置透明（transparent）颜色

  2. 开启BFC（块级格式化上下文）
     很多种方法，后边讲解:overflow：hidden 可以开启 。。。。。。

11.margin对元素的影响和支持性(margin都为正值)

• 对块标签来说：

  • margin-left：元素右移动

  • margin-top：元素下移动

  • margin-right：如果右边有元素 后边的元素右移动

  • margin-bottom：如果下边有元素 后边的元素下移动

  • margin垂直方向叠加，父级塌陷

• 对行标签：

  • margin在垂直方向上不生效

  • 水平方向：margin-left：元素右移动，margin-right：如果右边有元素
    后边的元素右移动

• 对行内块:

  • 和块元素一样

12.负margin的基础用法

• margin-left为负：

  • 元素向左移动，并且原来的位置不保留（后边元素会紧跟上一起移动），

  • 元素向左移动，并不会挤到前边的兄弟元素，而是覆盖前边的兄弟元素

• margin-right为负：

  • 元素视觉大小不发生变化

  • 但是元素实际所占用的空间变小，后边元素会跟上来 或者是撑不开父级宽度

  • 假如元素width为100px 设置marginright为-20 元素实际大小是80px

• margin-top为负：

  • 元素向上移动，并且原来的位置不保留（下边元素会紧跟上一起移动），

  • 元素向上移动，并不会挤到上边的兄弟元素，而是覆盖上边的兄弟元素

• margin-bottom为负：

  • 元素视觉大小不发生变化

  • 但是元素实际所占用的空间变小，下边元素会跟上来 或者是撑不开父级高度

  • 假如元素height为100px 设置marginbottom为-20 元素实际大小是80px

13.边框画三角形

.box{

width: 0;

height: 0;

border: 100px solid #000;

border-top-color: transparent;

border-bottom-color: #ff8d9e;

border-left-color: transparent;

border-right-color:transparent;

transform: rotate(0deg);

}

<!–

当内容非常小的时候，

上下左右边框重合，重合部分就会平分为两半，

这个时候，整个边框就分为了4个三角形

→

14.标准盒子模型和怪异盒子模型

默认情况基本都是标准盒模型

• 怪异盒模型：

• 标准盒模型：

  • 元素占用的空间大小为：内容区域（content）+内边距（padding）+边框（border）+外边距（margin）

  • ex：
    一个元素 margin：20px 30px;

  • padding:10px 5px; border: 2px solid #000; width:300px;

  • 求这个元素所占用的宽度空间大小是：374px

• 怪异盒模型：

  • ie6 或者是 没有正确书写版本声明 或者是设置了box-sizing

  • 元素所占用的空间大小为：内容（content+padding+border）+外边距（margin）

  • 怪异盒模型设置的width是 content+padding+border整体的宽度
    ex：
    一个元素 margin：20px 30px;

  • padding:10px 5px; border: 2px solid #000; width:300px;

  • 求这个元素所占用的宽度空间大小是：360px
    求这个元素内容（content）区域的宽度是286px

15.生成怪异盒子模型

• 一个盒子模型中，每一个属性盒子都有自己的名字，由内向外分别是 content-box 、
  padding-box、border-box、margin-box（没有官方说明）

• 将一个元素设置盒模型显示

  • box-sizing属性：
    content-box:标准盒模型
    border-box:怪异盒模型

16.盒子模型概念总结

• 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间

• 盒子模型由
  内容（content）、内边距（padding）、边框（border）、外边距（margin）四个构成

• 盒子模型分为怪异盒子模型和标准盒子模型

• 标准盒子模型的所占用空间的计算方式是 content+padding+border+margin

• 怪异盒子模型所占的的空间计算方式是
  content+margin（content内容是包含内容内边距和边框的）

• 使用box-sizing属性可以切换盒子模型的方式

17.padding和margin的使用场景

• padding和margin的使用场景

  • padding：撑开内容与边框的距离 padding中会显示背景颜色和背景图片

  • margin：撑开元素之间距离

• 日常使用过程中，可以按照下边方式来使用：

  • padding和margin都可以撑开元素之间的距离。

  • padding主要用来撑开父子之间的距离

  • margin主要用来撑开兄弟之间的距离

18.浮动来历

• 正常页面流：

  • 在css中，是存在流的概念的，正常情况下，页面总是由左至右，由上至下布局，我们把这种情况称作为正常页面流

  • 但是，在很多情况下，正常页面流有很多效果实现不了，所以需要一些手段来破坏流，而浮动（float）就是破坏流的一种手段

• 浮动的来历：

  • float设计的初始想法仅仅是为了做文字环绕图片

    • 浮动以后元素出现重叠，但是行框盒子和浮动元素有不可重叠性

  • 在目前开发中，很多的元素都是一个个的float堆叠起来的，但是这种布局及其容易崩溃

  • 只要高度和宽度发生一点变化，页面都可能发生错乱

19.浮动对元素的影响

浮动对元素的影响:

• 块标签：
  不再独占一行
  仍然可以设置宽和高
  构成了BFC，不再进行父级塌陷
  完美支持margin和padding

• 行标签：
  可以设置宽高
  完美支持padding和margin

脱离文档流

• 设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。

• 由于浮动这种特性，导致本属于普通流的元素设置浮动后，如果父级不存在其他普通流元素，父级的高度就会为0，如果父级存在其他普通流的元素，父级的高度也会受影响

清除浮动

• 浮动的概念：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来

• 清除浮动：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响

高度塌陷

• 浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度

• 父级的兄弟元素是 按照父级的位置进行布局的，所以页面会乱掉

清除浮动的方法

1. 给浮动元素的父级设置高度height（不推荐使用）
   缺点：很多情况下 高度都是不缺定的 所有不适用

2. 以浮制浮，给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）
   缺点：只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局

3. overflow：hidden；给父级设置，原理也是开启BFC（可以使用）
   优点：简单快捷
   缺点：元素超出的时候，会隐藏超出部分

4. br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为all
   缺点：增加不必要的元素，不符合样式与结构相分离的要求

5. clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both
   缺点：增加额外的结构，不符合语义化标准

6. after伪元素清浮动（推荐）
   可以给所有浮动元素的父级一个 clearFix的类名
   当一个元素需要清除浮动的时候 直接设置clearFix类名即可

.clearFix:after{

content:"\200B"; 必须拥有content属性 内容为空

display: block; 必须块标签才能清浮动

height: 0; 高度为0 不占用空间

clear: both; 清除浮动

}

.clearFix{ //兼容ie

*zoom:1; //*是css hack 只有ie6.7 认识

ie6、7 不支持伪元素，所以需要开启元素的haslayout来清除浮动

}

20.包含块

• 绝对定位的元素 相对于它的包含块进行定位

• 如何确定一个元素的包含块，完全取决于它自身的position属性：

  • 如果一个元素自身的position属性是
    static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。

  • 如果一个元素自身的position属性是absolute，
    它的包含块就是离他最近的 拥有定位属性（值不为static）的元素

  • 如果一个元素自身的position属性是fixed
    它的包含块就是viewport（视口）

  • 补充：如果一个元素的position属性是absolute 或者是 fixed
    在下边几种情况下，包含块会发生改变
    1、当祖先元素的 拥有 transform 或 perspective 属性 并且值不为none的时候
    它也是被当做包含块
    2、当祖先元素 拥有 filter属性的时候（值不为none） 它也可以被当做包含块

  • 如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块

21.伪元素

常用伪元素

• 伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们。

• 虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等

• after:

• 在当前元素的最后边插入一个伪元素

• before：

• 在当前元素的最前边插入一个伪元素

• 伪元素必须拥有content属性
  ，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的

其他伪元素

• first-letter伪元素：
  把一个块级元素的第一个文字选中，可以单独进行控制

• first-line伪元素
  把一个块级元素的第一行选中，单独进行控制

p:first-letter{

font-size: 30px;

color: #fff;

}

p:first-line{

font-size: 24px;

color: yellow;

}

22.样式重置

• 什么是样式重置（css reset）
  将html的默认样式全部去掉，需要的时候我们自行添加。
  统一页面风格

• 为什么是使用样式重置：
  多数元素拥有自己的默认样式，并且我们很多都不需要
  默认样式在不同浏览器中呈现的也不一定相同，就会导致浏览器展示页面不相同的现象
  整个页面中 固定的风格代码，可以在样式重置中直接书写，不用每一个都设置

• 为什么不使用
  样式重置简单，不够完整 一些demo可以使用，真正项目不推荐使用，请使用css reset
  *****通配符 匹配所有的标签，影响很大 效率很低

• normalize.css是什么
  normalize觉得，存在即合理。保留了应该存在的默认样式，并且把每一个默认样式在浏览器中中统一了

23.css hack

• 由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器

• 比如：
  after伪元素清浮动，只有ie8及以上支持，所以要针对ie6、7书写一个开启haslayout
  *代表ie6,7 zoom代表开启haslayout 所以可以书写 *zoom：1；
  那么这个代码只有ie 6 7 认识

• 为什么使用css hack
  第一种理解：让我们css 的代码兼容不同的浏览器
  第二种理解：我们可以为不同的浏览器定制不同的样式

• css hack有3种表现方式：
  1、css属性前缀法 2、选择器前缀法 3、IE条件注释法

  • IE条件注释法
    主要针对IE的版本

  • gt ：大于 lt：小于 gte：大于等于 lte：小于等于 ！：非当前
    目前条件注释只支持到ie9及以下 其他浏览器不支持条件注释

  • css属性前缀法

  • *color：ie 5,6,7 +color：ie 5,6,7 #color：ie 5,6,7 -color：ie 5、6
    color\0:ie 9 10 11 color\9:ie 6 7 8 9 10 color\9\0:ie 8 9 10

  • 选择器前缀法

  • 将前缀写在选择器前边，控制选择器是否针对当前浏览器有效 *html ie 5 6
    *+html ie7 :root ie9 10 11

24.BFC(块级格式化上下文)

它是页面 CSS
视觉渲染的一部分，用于决定块级盒的布局及浮动相互影响范围的一个区域。

BFC 的创建

以下元素会创建 BFC：

• 根元素（html）

• 浮动元素（float 不为 none）

• 绝对固定定位元素（position 为 absolute 或 fixed）

• 表格的标题和单元格（display 为 table-caption，table-cell）

• 匿名表格单元格元素（display 为 table 或 inline-table）

• 行内块元素（display 为 inline-block）

• overflow 的值不为 visible 的元素

BFC 的范围

A block formatting context contains everything inside of the element creating
it, that is not also inside a descendant element that creates a new block
formatting context.

• 直译过来就是, BFC包含创建它的元素的所有子元素,
  但不包括创建了新BFC的子元素的内部元素

• 简单来说，子元素如果又创建了一个新的 BFC，那么它里面的内容就不属于上一个
  BFC 了，这体现了 BFC 隔离 的思想

• 也就是所说，一个元素不能同时存在于两个 BFC 中。

BFC 的特性

BFC 除了会创建一个隔离的空间外，还具有以下特性：

• BFC 内部的块级盒会在垂直方向上一个接一个排列

• 同一BFC下的相邻块级元素可能发生外边距折叠，创建新的BFC可以避免外边距折叠

• 每个元素的外边距盒（margin box）的左边与包含块边框盒（border
  box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此

• 浮动盒的区域不会和BFC重叠

• 计算BFC的高度时，浮动元素也会参与计算

BFC 的应用

• 自适应多栏布局
  中间栏创建 BFC，左右栏宽度固定后浮动。由于盒子的 margin box
  的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 BFC
  重叠，所以中间栏的宽度会自适应

• 防止外边距折叠
  创建新的 BFC ，让相邻的块级盒位于不同 BFC 下可以防止外边距折叠

• 清除浮动
  BFC 内部的浮动元素也会参与高度计算，可以清除 BFC 内部的浮动

IFC的规则

• 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始

• 这些盒之间的水平margin，border和padding都有效

• 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

25.空元素和替换元素

空元素：

• 在html中
  ，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素

• 通常在空元素上使用 闭合标签 是无效的
  <input type=“text”></input> ：闭合标签无效
  br、hr、img、input、link、meta、source

替换元素

• 浏览器根据元素的标签和属性，来决定元素具体显示的内容

• img、input、textarea、select、video、iframe是替换元素

  BFC 内部的浮动元素也会参与高度计算，可以清除 BFC 内部的浮动

IFC的规则

• 在一个行内格式化上下文中，盒是一个接一个水平放置的，从包含块的顶部开始

• 这些盒之间的水平margin，border和padding都有效

• 盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

25.空元素和替换元素

空元素：

• 在html中
  ，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素

• 通常在空元素上使用 闭合标签 是无效的
  <input type=“text”></input> ：闭合标签无效
  br、hr、img、input、link、meta、source

替换元素

• 浏览器根据元素的标签和属性，来决定元素具体显示的内容

• img、input、textarea、select、video、iframe是替换元素

• audio、canvas标签在某些时候也是替换元素

这篇关于CSS概念性东西总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---