面试必备！ CSS知识点总结

一、元素水平垂直居中的方法

水平居中

行内元素：text-align:center
已知元素的宽度

设置margin:0 auto

元素的宽度不确定

flex 布局 justify-content:center
设置为inline/inline-block布局，然后用text-align:center
绝对定位，使用transform:translateX(-width/2)或margin-left:-width/2

垂直居中

行内元素：line-height:height(content-box的高度)或者给父元素设置display:table-cell vertical-align:middle
使用定位，垂直方向移动50%的距离，然后使用margin-top或者tanslateY(-50%)
flex aligin-items:center

二、清除浮动的方式

为什么？ 浮动元素脱离文档流，就无法撑起父元素，会造成父元素的高度塌陷

原理就是将浮动区域设置为一个BFC，这样就不会影响到外面元素的布局

在父元素设置overflow不为none的属性值
给父元素设置高度
添加额外的标签，设置clear:both
使用伪元素（推荐）

.parent:after {
    display: block;
    content: "";
    clear: both;
    visibility: hidden;
}

三、什么是BFC

BFC是块级格式化上下文，它是一个独立的容器，而且不会影响BFC外部元素的布局，BFC对清除浮动和浮动定位很重要。它的渲染规则如下:

BFC垂直方向边距重叠
BFC的区域不会与浮动元素的box重叠
BFC是一个独立的容器，外面的元素不会影响里面的元素
计算BFC高度的时候浮动元素也会参与计算

生成BFC的条件

根元素
float不为none
overflow不为visiable
position为fixed或absolute
行级块元素
表格单元格元素
弹性盒子
网格元素等

特性以及作用

解决父元素高度塌陷
解决Margin重叠问题

四、 position属性

static : 默认

fixed: 脱离文档流，固定元素位置，相对的是视口的距离，

relative:相对定位，相对于元素被创建的位置进行移动

absolute：绝对定位，相对于最近定位为非static的父级元素进行定位，脱离文档流

sticky：粘性定位，元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和 containingblock（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

五、flex布局

flex 弹性布局。它有两个轴线，分别是x和y轴，默认x轴是主轴，表示容器内的元素排列的方向。可以通过flex-direction来进行主轴的切换，指定排列的方向。

通过justify-content来定义元素在主轴方向上的排列方式，可以设置为 center 居中对齐 space-between 两端对齐，元素之间间隔相同 space-around 每个元素两端间隔相同 flex-start(默认值) 顶部对齐 flex-end 尾部对齐

对应的也可以设置交叉轴上的排列方式align-items

center 居中对齐 flex-start 顶部对齐 flex-end 尾部对齐 baseline 基于基线对齐 stretch （默认值）如果元素未设置高度或为auto，元素就会拉伸占满整个容器

六、双栏布局三栏布局

双栏布局

用flex来布局

<body>
    <div class="left"></div>
    <div class="right"></div>

</body>

body{
    display:flex;
    justify-content:space-between
}
.left,.right{
    width:30%;
    height:100vh
    background-color:pink
}

float布局

.left,.right{
    width:30%;
    height:100vh
    background-color:pink
}
.left{
    float:left;
}
.right:{
    float:right
}


//或者只设置其中一个元素
.left{
    float:right;
    margin-left:0
}

三栏布局

float布局

 <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>

* {
    margin: 0;
    padding: 0;
}

body {}

.left,
.right {
    width: 30%;
    height: 100vh;
    background-color: pink;
}

.middle {
    width: 40%;
    height: 100vh;
    background-color: blue;
    margin-left: 30%;
    position: absolute;
}

.left {
    float: left;
}

.right {
    float: right;
}

flex来实现直接在body中添加一个display:flex直接安排有没有！

七、css选择器伪类与伪元素的区别

权重（从高到低）

!important

行内样式

id选择器 100

类选择器、伪类选择器、属性选择器 10

标签选择器、伪元素选择器 1

详细：不可不知的有关css的知识点

八、盒模型

标准盒模型= content + padding + border + margin 标准盒模型的宽度等于content的宽度怪异盒模型:width = content + padding+ border

可以通过box-sizing:border-box来设置使用怪异盒模型，默认是标准盒模型（content-box）

九、 px rem em vh.vw这些单位的区别

px 像素，对于普通的屏幕，就是代表一个像素点。 rem，是相对于根元素的font-size来决定的，可以由用户自己设定 em 是根据元素的font-size大小来决定的 vh 是当前视口高度的占比（视口就是当前肉眼可见的区域） vw 是当前视口宽度的占比

十、用css 画出三角形

设置宽高为0，然后设置border的宽度

div {
    width: 0px;
    height: 0px;
    border: 50px solid;
    border-color: #000 transparent;
}

十一、inline inline-block block的区别

block:

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

inline-block:

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

inline:

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

注：一些inline元素同时又是可替换元素，比如img\input这些，本身带有width height属性，所以可以设置宽高

十二、 inline-block存在什么问题

问题: 两个display：inline-block元素放到一起会产生一段空白

原因：元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据CSS中white-space属性的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度，所以inline-block的元素之间就出现了空隙。

也就是我们在写html的时候，有换行的渲染结果中间会有一段空白，所以我们可以把它们放在一行消除空白

 <span>aa</span>
 <span>bb</span>
 // output: aa bb
 
 
 <span>aa</span><span>bb</span>
 //output: aabb

十三左边定宽，右边自适应

基本结构

<body>
   <div class="left"></div>
   <div class="right"></div>
</body>

前置条件

     *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 100vh;
        }

1. float + calc(100vw - width)

 .left{
           width: 300px;
           height: 100%;
           background-color: red;
       }
       .right{
           width: calc(100vw - 300px);
           height: 100%;
           background-color: green;
           margin-left: 300px;
       }
       
       // 原理
       左边定宽，右边通过calc属性计算出宽度，高度需要自己设100%，不会继承自父元素的高度
       正常是一上一下 因为是两个块级元素
       然后我们让左边浮动，让两个元素变成一行
       
       然后右边设置margin-left为左边的宽度，至此完成

flex

// 给左右两元素的容器设置为flex，让左右两元素至于一行
  body{
            height: 100vh;
            display: flex;
        }
        
        .left{
           width: 300px;
           background-color: red;
       }
       .right{
           flex:1; // 右边设置flex：1 占据剩余空间
           background-color: green;
       }
       
       // flex布局 容器内部的元素会变为flex元素，交叉轴方向（如果是row排列，那么交叉轴就是垂直方向）会被自动拉伸为容器大小
       // 主轴不会拉伸 但能缩小

自适应布局之rem布局原理解析

原理： 保证设计稿中元素的比例在显示器上保持不变，因为rem是参照根元素的font-size属性进行改变的，所以我们需要动态改变根元素的字体大小来实现自适应布局。

目的： 就是保证元素的在设计图中的比重保持不变

比如设计稿750*1020，其中一个元素a为100px

，它在设计稿的占比就是100/750 ，所以如果把屏幕分成100份，每一份（1%）就是750/100=7.5px，则1rem = 7.5px，元素a的像素就为 100/750 rem

所以按此思路，我们计算出各个元素的占比，然后加上rem就可以了

rem布局原理解析