面试必备! CSS知识点总结

·  阅读 926

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

水平居中

  1. 行内元素:text-align:center
  2. 已知元素的宽度
  • 设置margin:0 auto
  1. 元素的宽度不确定
  • flex 布局 justify-content:center

  • 设置为inline/inline-block布局,然后用text-align:center

  • 绝对定位,使用transform:translateX(-width/2)或margin-left:-width/2

垂直居中

  • 行内元素:line-height:height或者给父元素设置display:table-cell vertical-align:middle

  • 使用定位,垂直方向移动50%的距离,然后使用margin-top或者tanslateY(-50%)

  • flex aligin-items:center

二、清除浮动的方式

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

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

  1. 在父元素设置overflow不为none的属性值
  2. 给父元素设置高度
  3. 添加额外的标签,设置clear:both
  4. 使用伪元素(推荐)
.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
  • 行级块元素
  • 表格单元格元素
  • 弹性盒子
  • 网格元素等

特性以及作用

  1. 解决父元素高度塌陷
  2. 解决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,元素就会拉伸占满整个容器

六、 双栏布局 三栏布局

双栏布局

  1. 用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
}
复制代码

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


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

三栏布局

  1. 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;
}
复制代码

  1. 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:
  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。
  • inline-block:

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

  • inline:
  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. 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; // 右边设置flex1 占据剩余空间
           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布局原理解析

分类:
前端
标签: