阅读 225

一些CSS知识点总结

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 种外边距叠加情况只会发生在普通文档流的垂直方向。行内框、浮动框、绝对定位框之间的外边距不会发生叠加,同样水平方向也不会发生叠加。

文章分类
前端
文章标签