一些CSS知识点总结

灯火十里
465 阅读11分钟

1. 盒模型

盒模型有两种：标准和模型和怪异盒模型。

CSS box-model

标准盒模型的宽高是指的 content 区宽高；怪异盒模型的宽高是指的 content+padding+border 的宽高。

CSS设置标准盒模型：（默认值）

 box-sizing: content-box;

CSS设置怪异盒模型：

 box-sizing: border-box;

2. BFC

BFC定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

简而言之，BFC就是一块独立的渲染区域，内部元素的渲染不会影响外部元素。

BFC的形成条件：

  1. float不为none；
  2. overflow的值不为visible；（最常用的形成BFC的方法：overflow: hidden;）
  3. position的值为absolute或fixed；
  4. display的值为inline-block, flex等。

BFC的作用：

  1. 利用BFC避免margin重叠
  2. 清除内部浮动（原理: 触发父 div 的 BFC 属性，使下面的子 div 都处在父 div 的同一个 BFC 区域之内）

3. 行高的构成

行高是由line-box组成的，line-box是由一行中的inline-box组成的，inline-box中最高的那个，或者字体最大的那个元素决定行高。

行高不决定元素的高度，但是它决定元素所占的空间大小。

4. 对line-height的理解

  • line-height指一行字的高度，包含了字间距。实际上是下一行基线到上一行基线的距离。
  • 如果一个标签没有定义height属性，那么其最终表现的高度是由line-height决定的。撑开容器高度的是 line-height 而不是容器内的文字内容。
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中。

5. line-height的继承问题

  • 如果line-height是具体数值，比如30px，则会继承该值；
  • 如果line-height是比例，比如1.5或者2，则会继承该比例；
  • 如果line-height是百分比，如200%，则会继承计算出来的值。（考点）

line-height是具体数值，直接继承该值。

 <style>
   body {
     /* line-height为具体数值 */
     line-height: 30px;
   }
 </style>
 ​
 <body>
   <p>line-height继承问题</p>
 </body>

image-20210706101920088

line-height为比例，继承该比例，用元素自身的font-size * 该比例。

 <style>
   body {
     font-size: 20px;
     /* line-height为比例 */
     line-height: 2;
   }
   p {
     font-size: 16px;
   }
 </style>
   
 <body>
   <p>line-height为比例</p>
 </body>

image-20210706102052025

line-height是百分比，则用设置了line-height的那个元素的font-size * 该百分比，子元素继承这个计算出来的值，和子元素自身的font-size没有关系。

 <style>
   body {
     font-size: 20px;
     /* line-height为比例 */
     line-height: 200%;
   }
   p {
     font-size: 16px;
   }
 </style>
 ​
 <body>
   <p>line-height为百分比</p>
 </body>

image-20210706102344089

6. float属性

  • 使元素浮动
  • 浮动的元素脱离文档流
  • 浮动的元素不脱离文本流

浮动对自身的影响：

  • 形成BFC（所以浮动的元素可以设置宽高）

浮动对父级元素的影响：

  • 脱离文档流，从布局上“消失”
  • 父级元素产生高度塌陷

7. 清除浮动

  1. 给最后一个浮动元素后面添加一个空标签，并为其设置clear: both（不推荐，增加了无意义的标签）

  2. 让浮动元素的父元素形成BFC（最简单的方式：overflow: hidden）

  3. 使用伪元素清除浮动

     .clearfix:after{
     content: "";
     display: block;
     clear: both;
 }
   .clearfix {
     *zoom: 1; /* 兼容IE低版本 */
   }

8. display: none、 visibility: hidden、opacity: 0 的区别

  • display: none让元素从DOM树中完全消失，渲染的时候不占据空间，不能点击；
  • visibility: hidden不会让元素从DOM树中消失，渲染的时候依然占据空间，只是看不到了，不能点击；
  • opacity: 0不会让元素从DOM树中消失，渲染的时候依然占据空间，只是看不到了，可以点击。

9. CSS单位

  1. px。像素。很常用的长度单位。

  2. em。相对长度单位。对于字体大小属性（font-size）来说，em的计算方式是相对于父元素的字体大小；border, width, height, padding, margin, line-height）在这些属性中，使用 em 单位的计算方式是参照该元素的 font-size，1em 等于该元素设置的字体大小。同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。

  3. rem。相对长度单位，相对于根元素的font-size（<html>），常用于响应式布局。任何可以使用长度的地方都可以使用rem。

  4. vw/vh/vmax/vmin。

    • vh：网页视口高度的1%（1/100）
    • vw：网页视口宽度的1%（1/100）
    • vmax：取vh和vw两者最大值；
    • vmin：取vh和vw两者最小值。

10. transform和transition

我总是搞混transform，transition，translate，在这里特意记录一下。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。translate是transform的一个属性值。

transition 属性是用来做过渡动画的。

transform

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

  • 旋转rotate

    • rotate(angle): 定义2D旋转，参数规定角度
    • rotate3d(x, y, x, angle): 定义3D旋转
    • rotateX(angle): 定义沿着X轴的3D旋转
    • rotateY(angle): 定义沿着Y轴的3D旋转
    • rotateZ(angle): 定义沿着Z轴的3D旋转

  • 扭曲skew

    • skew(x-angle, y-angle): 定义沿着X轴和Y轴的2D倾斜转换
    • skewX(angle): 定义沿着X轴的2D倾斜转换
    • skewY(angle): 定义沿着Y轴的2D倾斜转换

  • 缩放scale

    • scale(x, y): 定义2D缩放转换
    • scale3d(x, y, z): 定义3D缩放转换
    • scaleX(x): 通过设置X轴的值来定义缩放转换
    • scaleY(y): 通过设置Y轴的值来定义缩放转换
    • scaleZ(z): 通过设置Z轴的值来定义3D缩放转换

  • 移动translate

    • translate(x, y): 定义2D转换
    • translate3d(x, y, z): 定义3D转换
    • translateX(x): 定义转换，只是用X轴的值
    • translateY(y): 定义转换，只是用Y轴的值
    • translateZ(z): 定义3D转换，只是用Z轴的值

transition

transition 属性是一个简写属性，用于设置四个过渡属性：

  • transition-property：规定设置过渡效果的 CSS 属性的名称。
  • transition-duration：规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function：规定速度效果的速度曲线。
  • transition-delay： 定义过渡效果何时开始。

11. CSS中的性能优化

  • 多个 css 合并，尽量减少 HTTP 请求
  • css 雪碧图
  • 抽象提取公共样式，减少代码量
  • 选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）
  • 属性值为 0 时，不加单位
  • 压缩 CSS 代码
  • 避免使用 CSS 表达式（它们要计算成千上万次并且可能会对你页面的性能产生影响）

12. link与@import的区别

  • link是HTML方式，@import是CSS方式
  • link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
  • 浏览器对 link 支持早于@import ，可以使用 @import 对老浏览器隐藏样式
  • @import 必须在样式规则之前，可以在 css 文件中引用其他文件
  • 总体来说：link 优于@import

13. CSS的继承属性

文字系列的属性：

  • font
  • font-family
  • font-weight
  • font-size
  • font-style
  • font-variant

文本系列属性：

  • text-indent：文本缩进
  • text-align
  • line-height
  • word-spacing
  • letter-spacing
  • text-transform：控制文本大小写
  • direction：规定文本的书写方向
  • color

元素可见性

  • visibility

列表属性

  • list-style

光标属性

  • cursor

14. CSS的非继承属性

  • display

一些文本属性

  • vertical-align
  • text-decoration
  • text-shadow

背景属性：背景图片、颜色、位置等

定位属性：浮动、清除浮动、position

a标签的字体颜色

15. display的值

  • none：元素不显示
  • block：像块元素一样显示
  • inline：显示为内联元素，元素前后没有换行符
  • inline-block：像行内元素一样定位，但其内容像块元素一样显示
  • list-item：像块类型元素一样显示，并添加样式列表标记
  • table：元素会作为块级表格来显示
  • inherit：规定应该从父元素继承 display 属性的值

16. position的值

  • static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
  • relative：相对定位。相对其正常位置进行定位。
  • absolute：绝对定位。相对于值不为static的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
  • inherit：规定应该从父元素继承 position 属性的值。

17. relative和absolute依据什么定位？

  • relative根据元素自身的位置进行定位
  • absolute依据最近一层的定位元素进行定位（即相对于值不为 static 的第一个父元素进行定位。定位元素包括：position属性为absolute, relative, fixed的元素以及<body>标签）

18. CSS3有哪些新特性？

  • 新增选择器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

  • 弹性盒模型 display: flex;

  • 多列布局 column-count: 5;

  • 媒体查询 @media (max-width: 480px) {.box: {column-count: 1;}}

  • 个性化字体 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}

  • 颜色透明度 color: rgba(255, 0, 0, 0.75);

  • 圆角 border-radius: 5px;

  • 渐变 background:linear-gradient(red, green, blue);

  • 阴影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);

  • 倒影 box-reflect: below 2px;

  • 文字装饰 text-stroke-color: red;

  • 文字溢出 text-overflow:ellipsis;

  • 背景效果 background-size: 100px 100px;

  • 边框效果 border-image:url(bt_blue.png) 0 10;

  • 平滑过渡 transition: all .3s ease-in .1s;

  • 动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

  • 变形 transform

    • 旋转 transform: rotate(20deg);
    • 倾斜 transform: skew(150deg, -10deg);
    • 位移 transform: translate(20px, 20px);
    • 缩放 transform: scale(.5);

19. 如何实现水平垂直居中？

水平居中：

  • inline元素： text-align: center;
  • block元素：margin: auto;
  • absolute元素：left: 50% + margin-left负的元素宽度的一半

垂直居中：

  • inline元素：line-height: height的值
  • absolute元素：top: 50% + margin-top负值
  • absolute元素：top: 50% + transform: translate (-50%, -50%) （旧的浏览器兼容性可能存在问题，但是不需要知道子元素的宽高就可以实现）
  • absolute元素：top, left, bottom, right = 0 + margin: auto;（浏览器兼容性不存在问题，而且不需要知道子元素的尺寸）

20. 纯CSS创建一个三角形

设置一个宽高为0的盒子，添加边框样式，三条边为transparent，剩余的一条边设置颜色。

 div {
     border-width: 10px;
     border-style: solid;
     border-color: transparent transparent transparent #000;
   }

21. 响应式

  • 响应式设计就是网站能够兼容多个不同大小的终端，而不是为每个终端做一个特定的版本。
  • 实现方式： 媒体查询+rem

22. 移动端布局方案

  • 流式布局

    使用百分比进行布局。

    缺点：不能改变字体大小，可以改变元素的尺寸，但是高度固定。

  • flex布局

    使用方便，通常配合其他方案一起使用

  • rem+媒体查询

    字体大小和元素尺寸均可改变

  • rem+vw

    兼容性不是特别好

23. 伪元素和伪类

  • 伪元素：创建一些不存在于DOM树中的元素，并为其添加样式。

    在元素前/后插入的元素，并没有真正插入到DOM树中。只在外部显示可见，但不会在文档的源代码中找到它们。

  • 伪类：用于已有元素处于某种特定状态时为其添加对应的样式，这个状态是根据用户行为动态变化的。

24. margin叠加的几种情况

margin叠加是指：当两个或者更多的垂直外边距相遇时，它们将形成一个外边距，这个外边距的高度等于两个发生叠加的外边距中高度较大者。

  1. 当一个元素出现在另一个元素上面时，第一个元素的底边外边距与第二个元素的顶边外边距发生叠加。

image-20210706164002581

  1. 当一个元素在另一个元素中时，它们的顶边距也会叠加

    image-20210706164107922

  2. 如果一个元素是空元素（即一个元素没有内容，内边距和边框），这种情况外边距的顶边距和低边距碰在一起也会叠加

    image-20210706164201847

  3. 在上面那种空元素的情况，如果该空元素与另一个元素的外边距碰在一起，也会发生叠加

image-20210706164300810

注意：以上 4 种外边距叠加情况只会发生在普通文档流的垂直方向。行内框、浮动框、绝对定位框之间的外边距不会发生叠加，同样水平方向也不会发生叠加。

avatar
文章
阅读
粉丝