CSS高频知识点

Vickers
107 阅读5分钟

这些都是个人认为CSS方面比较容易问到的一些点，遂做个回顾如果有不正确的地方请指出。

首先引入一个问题：如果一个父容器的高度发生了塌陷该如何解决？

一般父容器的高度都是由内部未浮动的子元素高度决定，而一旦子元素设置了浮动后便会脱离文档流，原本该由子元素撑起的高度就会发生塌陷。

解决塌陷的方案主要有四种：

  1. 给父容器设置一个overflow:hidden的属性，这个属性会强制要求父容器包裹内部所有浮动的子元素以及外边距
    缺点：如果父容器存在某些超范围的子元素就会被隐藏（通过position定位的子元素）
  2. 将父容器也设置float浮动，这个属性也会强制要求父容器包含内部所有浮动的元素
    缺点：整个父容器也会脱离文档流
  3. 在父容器的内部末尾添加一个空块级元素，并设置clear:both属性，利用clear:both属性清除浮动以及父元素必须包含非浮动的元素
    缺点：凭空增加一个无用元素，并且使用选择器获取父元素最后一个子元素时可能获取的不是想要的结果
  4. 为父容器的末尾伪元素设置clear:both和display:table，既清除了浮动又不会产生多余的元素，也不会影响部分子元素的显示和元素的查找
    父容器::after{content:""; display:table; clear:both; height:0}

而上述的方法中其实1、2都是使用了一种简称为“BFC”的布局规则来解决塌陷问题

BFC（Block formatting context）

  • 译为“块级格式化上下文”
  • 他是一块独立渲染的区域，这个区域只有块级元素才能参与
  • 这块区域内部的元素布局不会影响到区域外的元素
  • 而区域外的元素也同样不会影响到区域内部的元素

BFC的规则包括：

  • 所有内部的块级元素会按照垂直方向挨个的放置并且独占一行
  • 块级元素垂直方向的总距离由高度和外边距共同决定
  • 在这个区域内的所有已浮动元素的高度依旧会被计算
  • 这个区域内垂直方向上两个相邻元素的外边距会重叠，水平方向的则不会

如何能形成一个BFC区域：

  • display设置为table, table-cell, table-caption, inline-block, flex
  • float设置的值不为none
  • position设置的值不为relative, static
  • overflow设置的值不为visible

BFC区域除了解决元素浮动造成的塌陷之外还有其它的作用

  • 解决垂直方向上相邻元素的margin合并问题
  • 解决垂直方向上的margin溢出问题
    通过将父容器的before伪元素设置成一个BFC区域，提前形成一个与子元素同级的BFC区域来阻挡子元素外边距的溢出
  • 实现水平相邻元素其中一个宽度固定，另一个宽度自适应的布局
    左{float:left; width:定宽} 右{overflow:hidden}

flex布局

属性
display : flex\inline-flex
flex:父容器独占一行；inline-flex:父容器显示为行内元素特征与其他元素在同一行内
flex-direction: row; row-reverse\column; column-reverse
flex-warp：warp\nowarp
justify-content：flex-start\flex-end\center\space-between\space-around
align-items:flex-start\flex-end\center\baseline\stretch
flex-flow：flex-direction flex-warp
同时设置flex-direction和flex-warp，值用空格分隔
flex-grow\flex-shrink：定义元素的放大\缩小比例，值为整数无需单位

居中

水平居中
text-align:center
margin:0 auto
子宽度已知：父元素相对定位，子元素绝对定位left:50% + margin-left:负子宽一半
子宽度未知：父元素相对定位，子元素绝对定位left:50% + transform:translateX(-50%)
flex布局 display:flex; justify-content:center

垂直居中
行内元素：line-height:父高度 \ display:inline; vertical-align:middle
flex布局：display:flex; align-items:center
子高度已知：父元素相对定位，子元素绝对定位top:50% + margin-top:负子高一半
子高度未知：父元素相对定位，子元素绝对定位top:50% + transform:translateY(-50%)

垂直水平居中
flex布局

display: flex; 
justify-content: center;
align-items: center

子元素宽高已知，子绝父相

position: absolute;
top: 50%;
left: 50%;
margin-top: -高的一半
margin-left: -宽的一半

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto

子元素宽高未知，子绝父相

position:absolute; 
top:50%;
left:50%;
transform:translate(-50%, -50%)

如何利用css实现一条0.5px的线

核心思想是利用transform属性的scale来进行缩放，但需注意的是形变的中心必须是以左上角作为原点，否则页面布局会错位，通过设置原点的方式分为两种实现

.line{
    height:1px;
    background-color:#000;
    transform:scaleY(.5);
    transform-origin:left top;
}

.line{
    position:relative;
}
.line::after{
    content:"";
    height:1px;
    width:100%;
    background-color:#000;
    position:absolute;
    top:0;
    left:0;
    transform:scaleY(.5)
}

用css画一个三角

核心思想是增大一个矩形的边框时四条边框依旧会相邻形成四个类梯形的形状，之后再将矩形的宽高设为0但不能去掉，最后将其中三条边框设置为透明

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

C3新增的属性

  • transition：过渡
  • transform：变换
  • text-shadow：文字阴影
  • box-shadow：阴影
  • border-color：边框颜色
  • border-image：图片边框
  • border-radius：圆角边框
  • box-sizing：盒模型
  • opacity：不透明度
  • rgba：颜色
  • word-warp：文字换行
  • text-overflow：文字截断
  • animation：动画
  • outline：外边框
  • background-size：设置背景图片大小
  • background-origin：规定背景图片相对什么位置进行定位
  • background-clip：设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面
avatar
文章
阅读
粉丝