css 文字重叠_css(1)---初解

分手后的思念是犯贱 2023-01-04 11:53 143阅读 0赞

![3d71dc23ad02307c644ba0bd7c089649.png][]

### **什么是CSS？** ###

CSS通常称为CSS样式表或层叠样式表（级联样式表） 。

主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。 CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

### **CSS 三大特性**  ###

**层叠、**

**继承、**

**优先级**

**CSS层叠性**：是指多种CSS样式的叠加。 **CSS继承性**：是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。

想要设置一个可继承的属性，只需将它应用于父元素即可。简单理解就是： 子承父业。 **CSS优先级**：定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

使用了 !important声明的规则。 考虑权重时，需要注意的一些点：

*  继承样式的权重为0。
 *  行内样式优先。
 *  权重相同时，CSS遵循就近原则。

### **盒模型** ###

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：`外边距（margin）`、`边框（border）`、`内边距（padding）`、`实际内容（content）`四个属性。

CSS盒模型：**标准模型 + IE模型**

### **标准模型和IE模型的区别** ###

计算宽度和高度的不同。 **标准盒模型**：盒子总宽度/高度 = `width/height + padding + border + margin`。（ 即 width/height 只是内容高度，不包含 padding 和 border 值 ） **IE盒子模型**：盒子总宽度/高度 = `width/height + margin = (内容区宽度/高度 + padding + border) + margin`。（ 即 width/height 包含了 padding 和 border 值 ）

### **CSS如何设置这两种模型** ###

标准：`box-sizing: content-box;` ( 浏览器默认设置 ) IE： `box-sizing: border-box;`

### **W3C盒子模型(标准盒模型)** ###

![fd1be7c4f34e7909b887e5c9d8522840.png][]

### **IE盒子模型(怪异盒模型)** ###

![8ac98c4940f43d48509c70753a5bccdc.png][]

### **JS如何获取盒模型对应的宽和高** ###

（1）`dom.style.width/height` 只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。 （2）`dom.currentStyle.width/height` （只有IE兼容）取到的是最终渲染后的宽和高 （3）`window.getComputedStyle(dom).width/height` 同（2）但是多浏览器支持，IE9 以上支持。 （4）`dom.getBoundingClientRect().width/height` 也是得到渲染后的宽和高，大多浏览器支持。IE9 以上支持，除此外还可以取到相对于视窗的上下左右的距离。 （6）`dom.offsetWidth/offsetHeight` 包括高度（宽度）、内边距和边框，不包括外边距。最常用，兼容性最好。

### **BFC** ###

### **BFC基本概念** ###

**BFC: 块级格式化上下文** BFC基本概念：`BFC` 是 `CSS` 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。 父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 `margin` 与 padding 的最大值。

### **BFC原理（渲染规则|布局规则）：** ###

（1）内部的 `Box` 会在垂直方向，从顶部开始一个接着一个地放置； （2）`Box` 垂直方向的距离由 `margin` (外边距)决定，属于同一个 `BFC` 的两个相邻 `Box` 的 `margin` 会发生重叠； （3）每个元素的 `margin Box` 的左边， 与包含块 `border Box` 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此； （4）BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 `float`； （5）BFC 的区域不会与 `float Box` 重叠（清浮动）; （6）计算 `BFC` 的高度时，浮动元素也参与计算。

### **CSS在什么情况下会创建出BFC（即脱离文档流）** ###

0、根元素，即 HTML 元素（最大的一个 `BFC`） 1、浮动（ `float 的值不为 none` ） 2、绝对定位元素（ `position 的值为 absolute 或 fixed` ） 3、行内块（ `display 为 inline-block` ） 4、表格单元（ `display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性` ) 5、弹性盒（ `display 为 flex 或 inline-flex` ） 6、默认值。内容不会被修剪，会呈现在元素框之外（`overflow 不为 visible`）

### **BFC作用（使用场景）** ###

1、自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行） 2、避免元素被浮动元素覆盖 3、可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 `div` 的 `BFC` 属性，使下面的子 `div` 都处在父 `div`的同一个 `BFC` 区域之内） 4、去除边距重叠现象，分属于不同的 `BFC` 时，可以阻止 `margin` 重叠

### **定位(position) position**  ###

属性值分为四种：

static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。

relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位

absolute：绝对定位，相对于其上一个已经定位的父元素进行定位

fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。

叠放次序（z-index的特点：

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

如果取值相同，则根据书写顺序，后来居上。

后面数字一定不能加单位。

只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

[3d71dc23ad02307c644ba0bd7c089649.png]: /images/20221119/df40095b934c47359f58b2eaa78bdab9.png
[fd1be7c4f34e7909b887e5c9d8522840.png]: https://img-blog.csdnimg.cn/img_convert/fd1be7c4f34e7909b887e5c9d8522840.png
[8ac98c4940f43d48509c70753a5bccdc.png]: https://img-blog.csdnimg.cn/img_convert/8ac98c4940f43d48509c70753a5bccdc.png