CSS八股学习

原创已于 2025-08-10 18:18:04 修改 · 320 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #前端

于 2025-08-04 10:55:30 首次发布

1.盒模型：标准盒模型和IE盒模型

盒模型即我们可以将近似的将页面中的元素占据的空间看成一个盒子。

盒模型四部分有内到外分别有四部分：内容、内边距、边框、外边距（content、padding、border、margin）

我们可以设置盒子的宽度和高度，而标准盒模型和IE和模型的区别主要是在width范围组成不同。

标准盒模型：width = content

IE盒模型：width = content + padding + border

2.CSS选择器

从权重大小，从高往低记

!important > 内联样式 > id选择器 > class选择器/属性选择器/伪类选择器 > 标签选择器＞通配选择器

３.伪类和伪元素的区别

表面上伪类是单冒号（:）开头，伪元素是双冒号开头（::）

主要是在于有没有在文档树之外创建一个新的元素

伪类选择器是修改文档树中已有的元素样式

伪元素选择器是创建了一个文档树之外的新元素，然后为其添加样式

4.CSS的继承

父元素中的样式属性会传递给子元素从而改变其样式

字体样式：font-family 字体类型 font-size 字体大小

文本样式: color 文本颜色 text-align 对齐方式

可见度: visibility

列表样式: list-style 列表标记 list-style-color 颜色

5.link和@import

作用是将CSS文件引入页面中，改变元素样式。

本质区别：link属于HTML标签，且可以修改rel（加载类型、图标等）、RSS连接属性（订阅源），@import单纯导用样式表，在CSS文件中也可以用来导入外部的样式表

引入位置不同：link一般放在<head>中,@import是在<head>中的<style>中引入

加载顺序：link和页面元素是同时加载的，@import要等页面元素加载完成后再加载

(这让我想起来之前浏览器浏览页面时会有只渲染了元素的情况，一般都是靠左排布一列，没有样式，会不会和这有关系)

权重：link的权重高于@import

dom操作：link支持用js中元素捕获后修改元素样式，@import 不支持

6.a标签超链接中的四种伪类状态

顺序从前往后

链接访问前(:link)、链接访问后(:visited)、鼠标经过(:hover)、点击激活(:active)

鼠标经过时触发 :link :hover

鼠标点击时触发 :link :hover :active

链接访问后浏览器会记录历史记录

更改属性时，应注意触发顺序

7.CSS浮动

float属性，可以将元素从标准文档流中脱离出来，沿着其容器靠左或靠右放置。设置浮动元素和标准流不在一个层次上，在标准流之上。当设置浮动的元素的上一个元素是标准流，是不改变设置浮动元素的位置的，其后边的元素按照标准流排布移动，因此该元素会覆盖移动此位置的元素。如果其上一个元素也是浮动元素，则会跟随在后边进行排布。

高度塌陷：当父元素没有设置高度，为子元素设置浮动后，其脱离了标准流，导致父元素容器无法被支撑起来，父元素形成塌陷的状态。

要解决浮动带来的影响：1.为父元素设置高度 2.在浮动元素后跟随一个块级元素div，设置clear:both清除浮动元素对我左右两边的影响，这个块级元素是按标准文档流排布的，因此会挨着浮动元素的父元素。3.overflow:hidden 触发BFC

8.position属性

position用来对于页面元素定位的处理，其有四个值，static、relative、fixed、absolute,分别对应四种定位方式

static即默认值，此时改变top, bottom, left, right值不生效。

relative相对定位：元素相对于自身的位置进行定位

absolute绝对定位：脱离标准文档流，对于最近的设置非static的元素(relative、fixed、absolute都可以)进行定位，如果都没有目前这个就是第一个则相对HTML根元素定位，也就是页面左上角坐标（0，0）

fixed固定定位：脱离标准文档流，根据窗口位置进行定位，即使窗口滚动，依然会停留在这个位置。像导航栏等

9.z-index是什么

判断z轴的堆叠顺序，脱离文档流的元素会和正常文档流元素发生重叠，该元素可以设置他们的重叠顺序。

只在定义了position的元素且不为static的元素上生效，值越大越靠前，层级越高

10.flex布局

弹性布局，对于一个元素display: flex，设置为弹性布局，此时其子元素自动开启弹性布局，成为容器中的成员。

核心点：为父容器设置两条轴线，一条是水平方向主轴，另一条是垂直方向交叉轴。flex布局围绕这两根轴线进行布局排布

flex属性分为两块，一是针对父容器的flex属性，一是对于子容器的flex属性。

父容器：flex-direction 设置轴线的方向，左到右 row 右到左 row-reverse 上到下 column 下到上 colunmn-reverse

flex-wrap 设置换行方式 nowrap(默认)不换行 wrap换行第一行在上面 wrap-reverse换行第一行在下面

flex-flow 上面两种方式简写，设置两个属性

轴排列：主轴排列justify-content : flex-start / flex-end 根据其方向左对齐或右对齐

center 中间对齐

space-between 两端对齐，间隔相等

space-around 两端流出间隔，元素间间隔相等

交叉轴排列align-items 对于单行 align-content 对于多行

子容器：order 排列顺序,值越大越靠后或靠下

flex-grow 放大比例,会挤压其他元素默认为0 此时有剩余空间，也不放大

flex-shrink 缩小比例,默认为1 此时空间不足，将被挤压位置，改为0可以保持不被其他元素挤压变形

flex-basis 设置占据主轴方向的初始大小默认值auto，原本大小单位px

flex 三合一 grow shrink basis 默认0,1,auto

align-self 改变单个的布局方式回覆盖align-items 对于交叉轴布局，默认auto，其他属性和align-items一样

11.BFC IFC 布局概念

在我看来这是个很抽象的概念，更加细化了CSS有关盒子布局的相关内容，感觉是对于整理页面元素时，能够了解布局方式的原理，方便排查问题，以及CSS为什么会以这样去布局元素内容。

BFC块级格式化上下文，当元素拥有了BFC属性后，此元素可以看作一个独立的容器，内部元素不会影响外部环境，相当于设置了一个独立空间环境。

形成的方式有：HTML根元素、overflow:hidden、position设置为absolute或fixed、display设置为flex或inline-flex或inline-block

应用：清除浮动防止高度塌陷、避免margin合并(相邻块级元素的margin会默认合并)(如果元素在同一个BFC里其margin仍会合并)、两栏自适应布局

IFC行内格式化上下文，默认情况下，行内元素会形成IFC。其主要用来控制行内元素的排布布局方式。

行内元素，在水平方向上从左到右排布，自动换行。

行框架的高度由其内部盒子最高的盒子高度决定。

12.浏览器解析CSS选择器匹配文档元素

从右往左从深往浅逆向匹配，先匹配最具体的的部分，因此可以排除大量不匹配的元素，减少匹配的次数。从左往右先匹配最外层的会存在大量的无效匹配，降低性能。

13.px em rem区别 vw,vh是什么单位

px像素，绝对单位长度。基于屏幕的像素点大小，固定大小不会改变

em,相对单位长度。基于父元素的字体大小，根据父元素字体大小的改变而改变

rem,相对单位长度。基于html根元素的字体大小，不受父元素影响，统一全局设置的大小。

vw,视窗宽度，根据视窗高度的变化而变化,1vw = 1%视窗宽度

vh,视窗高度

14.CSS两栏、三栏布局(建议写个HTML进行布局观察练习)

两栏布局：左侧固定宽度，右侧自适应宽度

1.float浮动 + margin边距控制

<style>
    *{
        padding: 0;
        margin: 0;
    }
    aside{
        float: left;
        width: 100px;
        height: 100%;
    }
    .content{
        background-color: pink;
        width: 100%;
        height: 100%;
        margin-left: 100px;
    }
    
</style>
<body>
    <div style="background-color: blue; width: 300px; height: 300px;">
        <aside style="background-color: black"></aside>
        <div class="content"></div>
    </div>
</body>

2.position实现

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .mainBox{
        position: relative;
        background-color: blue;
         width: 300px; 
         height: 300px;
    }
    aside{
        position: absolute;
        background-color: black;
        width: 100px;
        height: 100%;
    }
    .content{
        position: absolute;
        background-color: pink;
        width: 100%;
        height: 100%;
        left: 100px;
        
    }
    
</style>
<body>
    <div class="mainBox">
        <aside></aside>
        <div class="content"></div>
    </div>
 
</body>

有个有意思的点，这里的子盒子aside和div设置的absolute绝对定位都是根据父元素定位，因为父元素改变了默认值static。如果父元素设置为static，会向上查找到HTML根元素，此时这两个盒子都会根据HTML来改变自己的位置和大小，一直扩展到页面底部了。为什么div不根据aside进行定位呢？明明aside是相邻最近的非static元素？因为absolute绝对定位是根据已定位祖先元素定位，这之中不包括子元素，即使是父元素的父元素的子元素是非static也不会管。都没有一直查到HTML根元素头上

3.flex实现

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .mainBox{
        display: flex;
        background-color: blue;
         width: 300px; 
         height: 300px;
    }
    aside{
        flex-basis: 100px;
        background-color: black;
    }
    .content{
        flex: 1;
        background-color: pink;
    }
    
</style>
<body>
    <div class="mainBox">
        <aside></aside>
        <div class="content"></div>
    </div>
 
</body>

利用flex-grow：1，自动填充剩下的空间
三栏布局：左中右三块区域

1.float浮动 + margin边距控制

一块左浮动占据左侧，一块右浮动占据右侧。中间自适应，设置其左右边距分别为左侧右侧的宽度，注意盒子大小。中间盒子要放在左右之后，浮动原因，否则中间盒子会挤压其之后的浮动盒子。

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .mainBox{
        background-color: white;
         width: 500px; 
         height: 300px;
    }
    .left{
        background-color: black;
        float: left;
        width: 100px;
        height: 100%;
    }
    .content{
        height: 100%;
        background-color: pink;
        margin-left: 100px;
        margin-right: 100px;
        
    }
    .right{
        background-color: red;
        float: right;
        width: 100px;
        height: 100%;
    }
    
</style>
<body>
    <div class="mainBox">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content"></div>
        
        
    </div>
 
</body>

2.position实现

运用绝对定位，将两个盒子分别设定到父盒子的左右两侧，中间盒子自动填充没有占据的空间，

仍旧中间content盒子放最后，因为其会充满剩余空间，如果放前面，其他盒子就没地方占了。

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .mainBox{
        position: absolute;
        background-color: white;
         width: 500px; 
         height: 300px;
    }
    .left{
        position: absolute;
        left: 0;
        background-color: black;
        width: 100px;
        height: 100%;
    }
    .content{
        background-color: pink;
        width: 100%; 
        height: 100%;
        
    }
    .right{
        position: absolute;
        right: 0;
        background-color: red;
        width: 100px;
        height: 100%;
    }
    
</style>
<body>
    <div class="mainBox">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content"></div>
    </div>
</body>

3.flex实现

左中设置占据的空间，右侧让其自动填充剩下的空间

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .mainBox{
        display: flex;
        background-color: white;
         width: 500px; 
         height: 300px;
    }
    .left{
        flex: 0 1 100px;
        background-color: black;
    }
    .content{
        flex: 0 1 300px;
        background-color: pink;
        
    }
    .right{
        flex:1 1 auto;
        margin-left: auto;
        background-color: red;
    }
    
</style>
<body>
    <div class="mainBox">
        <div class="left"></div>
        <div class="content"></div>
        <div class="right"></div>
    </div>
</body>

15.圣杯布局和双飞翼布局
相同：都是三栏布局，三栏均设置左浮动，中间自适应宽度。
中间栏放文档流前面，自上向下最先渲染。
不同：实现方式不同
圣杯布局：左中右三栏先都设置左浮动，然后为父盒子设置左右外边距将三栏挤压到中间，左右栏会因为中间栏宽度100%挤压到下一行。左栏的左边距设置为-100%，这样左栏会移动到上一行并移动到中间栏的最左侧，设置相对定位，左移动100px到左侧空置出来的位置。右栏也一样，移动到右侧空置的位置。最后填充拉伸到页面底部。

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .main{
        margin-left: 100px;
        margin-right: 100px;
        height: 100vh;
        
    }
    .content{
        background-color: red;
        float: left;
        height: 100%;
        width: 100%;
    }
    .left{
        background-color: blue;
        margin-left: -100%;
        position: relative;
        left: -100px;
        float: left;
        height: 100%;
        width: 100px;
    }
    .right{
        background-color: green;
        margin-left: -100px;
        position: relative;
        right: -100px;
        float: left;
        height: 100%;
        width: 100px;
    }
    footer {
            height: 50px;
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            background: skyblue;
            color: #fff;
            clear: both;
        }
        header {
            height: 50px;
            background: #666;
            color: #fff;
        }
</style>
<body>
    <header></header>
    <div class="main">
    <div class="content"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<footer></footer>
    
</body>