CSS 总结-CSDN博客

本文链接：https://blog.csdn.net/CEZLZ/article/details/120456348

在这里插入图片描述

1 盒模型

盒模型分为标准盒模型和IE 盒模型。

『标准盒模型』

在标准盒模型中，设置的 width 仅仅是 content 部分的宽度。

width = content

如图所示：

『IE 盒模型』

在 IE 盒模型中，设置的width是content、padding和border这三部分的宽度之和。

width = content + padding + border

如图所示：

『扩展资料』

box-sizing：定义了应该如何计算一个元素的总宽度和总高度。

box-sizing: content-box：按标准盒模型来计算总宽度和总高度。
box-sizing: border-box：按IE盒模型来计算总宽度和总高度。

2. rem、em、vh、px 各自代表的含义

『rem』

rem是指相对于根元素的字体大小的单位。

rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时，相对于其出初始字体大小(16px)。

<!-- 省略其它元素 -->
<html class="p">
    <body>
        <div class="h">哈哈哈</div>
    </body>
</html>

第一种情况：rem作用于非根元素（相对于根元素字体大小）

.p {
    font-size: 10px;
}

.h {
    font-size: 2rem;   // 10 * 2 = 20px
    line-height: 2rem; // 10 * 2 = 20px
}

第二种情况： rem作用于根元素字体大小（相对于初始字体大小（16px））

.p {
    font-size: 2rem;   // 16 * 2 = 32px
}

『em』

em作为font-size的单位时，相对于父元素的字体大小；作为其他属性单位时，相对于自身字体大小。

<div class="p">
    <div class="h">哈哈哈</div>
</div>

.p {
    font-size: 10px;
}

.h {
    font-size: 2em;    // 10 * 2 = 20px
    line-height: 2em;  // 20 * 2 = 40px
}

『vh』

相对长度单位，vh/vw是相对于视口的尺寸而言。1vh=视口高度的1%，1vw=视口宽度的1%。

『px』

像素（Pixel）。相对长度单位。px是相对于显示器屏幕分辨率而言。

3. 实现水平居中、垂直居中

『水平居中』

/* --- 使块元素中的行内元素居中 --- */

/* 作用于父元素 */
text-align: center;

/* --- 使块元素水平居中 --- */

/* 作用于父元素 */
display: flex;
justify-content: center;

/* 作用于元素本身 */
margin: 0 auto;

/* 作用于元素本身 */
position: absolute;
left: 50%;
transform: translateX(-50%);

『垂直居中』

/* --- 使文字垂直居中 --- */
height: 30px;
line-height: 30px;

/* --- 使块元素垂直居中 --- */

/* 作用于父元素 */
display: flex;
align-items: center;

/* 作用于父元素 */
display: table-cell;
vertical-align: middle;

/* 作用于元素本身 */
position: absolute;
top: 50%;
transform: translateY(-50%)

4. 画出一条 0.5px 的线

/* transform: scale --> 缩放元素 */
height: 1px;
transform: scale(1, 0.5);

scale改变的不是元素的宽高，而是 X 和 Y 轴的刻度。

好文章

5. 画一个三角形

width: 0;
border: 100px solid orange;
border-color: transparent transparent orange;

6. 清除浮动的方式

使用clear: both样式
额外标签法（在最后一个浮动标签后，新加一个<div>标签，给其设置clear：both。）
使用伪元素after
使用display:flow-root样式

好文推荐

对于推荐文章中使用伪元素清除浮动方法的 CSS 应该修改成下面这样，不然会多出一个点：

.clearfix:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

7. CSS 加载方式有几种？

好文章推荐

8. link 和 @import 有什么区别？

『从属关系区别』

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是 HTML 的标签，不仅可以加载 CSS 文件，还可以定义站点图标等。

『加载顺序区别』

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

『兼容性区别』

@import是 CSS2.1 才有的语法，故只在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

『DOM 可控性区别』

可以通过 JS 操作 DOM，动态创建link标签来引入样式；由于 DOM 方法是基于文档的，故无法使用@import的方式插入样式。

好文章推荐

9. CSS 选择器常见的有几种？

好文章推荐

10. 伪类与伪元素？

『伪类』

伪类的特征是其前面会有一个冒号:，多用于描述一个元素的状态。

好文章推荐

『伪元素』

伪元素的特征是其前面会有两个冒号::，伪元素是创建了一个元素，但这个元素只是展示在页面中，并不存在 DOM 树中。

『伪类与伪元素的区别』

伪类是操作文档中已有的元素，而伪元素是创建了一个文档外的元素。

好文章推荐

14. 行内元素和块级元素

『行内元素（display: inline）』

行内元素的宽高有内容决定，和其它元素公占一行。比如：<span>、<i>和<a>等。

『块级元素（display: block）』

默认情况下，宽度是其父元素的宽度的 100%，高度与其内容一样高，独占一行并且可以设置宽高。比如：<div>、<p>和<ul> 等。

15. 绝对地位和相对定位

『绝对定位（position: absolute）』

绝对定位是相对于最近的已定位的父元素

『相对定位（position: relative）』

相对定位是相对于元素在文档中的初始位置

16. 两个按钮中间为何产生缝隙？如何解决？

原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来 HTML 代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px。

解决方法

在父元素中设置 font-size: 0，在子元素上设置正确的 font-size。

<body>
    <div style="font-size: 0;">
        <button>btn_1</button>
        <button>btn_2</button>
    </div>
</body>

为 inline-block 元素添加 float: left。

<body>
    <button style="float: left">btn_1</button>
    <button style="float: left">btn_2</button>
</body>

把标签写在同一行上。

<body>
    <button style="float: left">btn_1</button><button style="float: left">btn_2</button>
</body>

好文章推荐

17. 让一个元素“看不见”有几种方式？有什么区别？

display: none
- 原本占据的空间会被其他元素占有
visibility: hidden
- 原本占据的空间会被保留
opacity: 0
- 原本占据的空间会被保留
设置盒模型属性为 0
- 原本占据的空间会被其他元素占有
设置元素绝对定位将其移出屏幕

18. 单行/多行文本溢出加 … 如何实现？

单行文本

.title {
    width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行文本

.title {
    width: 400px;
    display: 
    -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 溢出省略的界限 */
    overflow: hidden;
}

19. `line-height` 3 种继承方式

具体数值

<style>
    .parent {
        line-height: 20px;
    }
</style>

<body>
    <div class="parent">
        <!-- 子元素继承父元素行高：20px -->
        <div>绿色的小山丘点缀着砂岩巨石，宛如一个个半掩埋的堡垒。</div>
    </div>
</body>

按比例

<style>
    .parent {
        line-height: 2;
    }
    
    .children {
        font-size: 18px;
    }
</style>

<body>
    <div class="parent">
        <!-- 子元素继承父元素行高的比例，此比例会与当前的字体尺寸相乘来设置行间距 -->
        <!-- 子元素行高：2 * 18 = 36px -->
        <div class="children">绿色的小山丘点缀着砂岩巨石，宛如一个个半掩埋的堡垒。</div>
    </div>
</body>

按百分比

<style>
    .parent {
        line-height: 200%;
    }
</style>

<body>
    <div class="parent">
        <!-- 当父元素的行高为百分比时，先计算出父元素行高的值，再由子元素继承 -->
        <!-- 父元素行高：16px * 200% = 32px -->
        <!-- 子元素继承父元素的行高：32px -->
        <div>绿色的小山丘点缀着砂岩巨石，宛如一个个半掩埋的堡垒。</div>
    </div>
</body>