CSS知识点总结

sober_1128
634 阅读1分钟

1. CSS盒模型

image.png

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距、边框、内边距和实际内容。

  • 标准盒模型：范围包括margin，border，padding，content，并且width和height指的就是内容的宽度和高度。增加内外边距，边框不会影响内容区域的大小，但是会增加元素框的总尺寸。

  • IE盒模型：范围包括margin，border，padding，content，但是width和height指的是 内容content+内边距padding+边框border 的宽度和高度

  • 相关属性：box-sizing: context-box(默认，标准盒子）|border-box（IE盒子）|inherit;

  • display-clip: (背景颜色覆盖）border-box（默认）|context-box;

2. 选择器优先级

  • !important 最高级
  • 内联样式 1000
  • id选择器 100
  • 类选择器 10
  • 标签选择器 1
  • 子选择器(ul<li)
  • 后代选择器(li a)
  • 伪类选择器(a:hover, li:nth-child)
  • 通配符选择器 0

3. 尺寸单位/移动端适配

  • 绝对尺寸单位

    • px：像素
    • pt: 磅，绝对长度单位
    • in: 英寸
    • cm: 厘米
    • mm: 毫米

  • 相对单位

    • %：百分比，父元素相应值的百分比
    • em：1em = 当前元素的字体大小，通常1em = 16px(浏览器默认字体大小)；注：用于指定字体大小时，em单位是指父元素的字体大小；计算使用calc(5px+2em);
    • rem：1rem = 根元素（即html元素）的字体大小计算尺寸，通过它既可以做到只修改根元素就成比例调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
    • vh: View height--视口单位，可视范围高度，1vh = 视口高度的1%
    • vw: View width 可视范围宽度
    • vmin: View min 可视范围的宽度或高度中较小的那个尺寸
    • vmax: View max 可视范围的宽度或高度中较大的那个尺寸
    • ex: 相对于字符“x”的高度，通常为字体高度的一半，若未指定字体尺寸，则相对于浏览器的默认字体尺寸。
    • ch: 相对于数字“0”的宽度。 image.png

4. 伪元素和伪类元素

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。

  • 伪类：本质上是为了弥补常规CSS选择器的不足，向某些选择器添加特殊的效果；伪类：:hover,:active,first-child,nth-child(n)等等
  • 伪元素：本质上创建一个有内容的虚拟容器，不存在在DOM文档中，是虚拟的元素；例如：::after, ::before 等

5.BFC、IFC

IFC布局：

  • 在行内格式化上下文中，boxes一个接一个地水平排列，起点是包含块的顶部
  • 水平方向上的margin border padding在框之间得到保留
  • 在垂直方向上可以以不同的方式对齐：顶部或底部对齐，或者根据文字的基线对齐

BFC布局：

  • 内部的Box会在垂直方向，一个接一个地放置
  • Box垂直方向上的距离由margin决定，同属一个BFC的两个相邻Box的margin会发生重叠
  • BFC的区域不会与float box重叠
  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素
  • 计算BFC的高度时，浮动元素也参与计算

BFC具有普通元素没有的特性：

  • 可以利用BFC解决两个相邻元素的上下 margin 重叠问题

  • 可以利用BFC解决高度塌陷问题

  • 可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）

    更多详细看这篇：BFC详解 触发BFC的方法：

  • body根元素

  • 浮动元素（除了float: none）

  • 定位的元素（absolute、fixed）

  • display ( inline-block、table-cells、flex )

  • overflow ( hidden、auto、scroll )

6.清除浮动的方式

  • 修改父元素的 owerflow 属性
    • 将父元素的 owerflow 属性修改为 owerflow: auto | hidden，浏览器会自动检查浮动区域的高度
  • 父级div定义height
  • 添加一个空div，利用css的 clear : both 清除浮动，让父级div能自动获取到高度

7. 如何实现盒子水平垂直居中

  • 如果子元素是 行内元素，可以在父元素设置 text-align:center; 子元素 line-hight 设置为父元素的高度值
  • 父元素相对定位，子元素绝对定位，且top、left值设置为50%，transform属性的值设置为(-50%,-50%)
  • 父元素相对定位，子元素绝对定位，且left、top、bottom、right的值设置为0，margin 属性的值置为auto
  • flex布局：父元素display属性设置为flex，justify-content 和 align-items 属性值设置为center
  • grid布局：父元素display属性设置为grid，justify-items 和 align-items 属性值设置为center

8. display属性

  • display: none; -- 让标签消失，元素不会被显示
  • display: block; -- 块级元素，素将显示为块级元素，此元素前后会带有换行符
  • display: inline(默认); -- 行内元素，元素会被显示为内联元素，元素前后没有换行符。
  • display: inline-block; -- 行内块元素，既有inline的属性也有block属性。
  • display: inherit; -- 规定应该从父元素继承 display 属性的值。
  • display: flex; -- 弹性布局

display属性的三个属性值 block, inline 和 inline-block 有什么区别？

  • 块元素独占一行，行内元素可以一行显示多个
  • 块元素可以设置宽高，行内元素设置宽高无效，只能靠内容撑开
  • 行内块元素一行可以显示多个，可以设置宽高； inline-block的缺陷 就是HTML中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，但使用 inline-block 会产生了元素间的空隙。

可以看这篇：block，inline和inline-block

9. position定位属性

值描述
static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative不脱离文档流，占据原位置，相对于其正常位置进行定位
absolute脱离文档流，相对于第一个非 static 定位的父元素进行定位
fixed绝对定位，相对于浏览器窗口进行定位
inherit继承父元素 position 属性
sticky在屏幕范围内表现为 relative ,超出时是 fixed 形式

10. display、visibility和opacity的区别

属性空间占据重绘重排的影响子元素继承事件绑定过渡动画
display:none不占据涉及DOM结构，会产生reflow与repaint不会被子元素继承，但父元素不在，子元素也不显示元素在页面不存在，无法进行事件绑定不能
visibility:hidden占据，不可见但存在只引起重绘会被子元素继承，可以设置visibility:visible使子元素显示出来无法触发不能
opacity:0占据只引起重绘会被子元素继承，但不能设置opacity使其显示opacity:0元素绑定的事件可以触发(CSS挟持)可以

11. CSS的动画属性

属性含义
animation（动画）用于设置动画属性，通过@keyframes来定义动画，可通过from..to..或百分比来设置中间过渡状态
transition（过渡）用于设置元素的样式过渡，只有始末两个状态，需要条件来触发，不能重复，除非再次触发。触发条件例如：:hoever、:focus、js等
transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
translate（移动）translate只是transform的一个属性值，即移动。

transition参数 CSS动画

12. 页面导入样式时，link和@import的区别

  • 加载顺序
    • link标签引入的css被同时加载
    • @import引入的css样式在页面加载完后被加载
  • 权重
    • link引入的样式权重大于@import引入的样式
  • 兼容性
    • link标签作用于HTML元素，无兼容问题
    • @import是在CSS2.1提出的，低版本的浏览器不支持
  • DOM操作

    • link支持使用Javascript控制DOM去改变样式；而@import不支持

13.line-height(行高)的作用

line-height属性用于设置行间的距离（行高），文本的行高是由line-height决定的，而不是font-size，行高包括字母的大小(font-size)和字母的上下留白部分。 image.png

  • 如果可能有换行，保证行与行之间距离合适。
  • 保证字体中心水平居中 可以看这篇：图解line-height的使用

14.Vertical-aligin，line-height的区别？

  • line-height一行垂直居中，而vertical-align不管有多少行，都能垂直居中
  • 只有元素属于inline或是inline-block ，vertical-align属性才会起作用。 
  • vertical-align，取值是百分数值时，是相对于此标签继承的line-height值决定的。 
  • line-height，取值是百分数值时，是相对于当前的font-size值决定的。

15.判断元素是否在可视区域

检测元素是否在可视区域，这也是懒加载图片的实现原理。

  • 公式: el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

  • 公式: el.getBoundingClientReact().top <= viewPortHeight

  • 公式: intersectionRatio > 0 && intersectionRatio <= 1

可以看这篇：如何判断元素是否在可视区域ViewPort

16.CSS实现三角形、梯形

  • 三角形--边框实现--宽高给0 
    <div class="main"></div>

    .main{
width: 0px;
height: 0px;
border: 50px solid transparent;
/* border-color: orange pink peru skyblue; */
border-color: transparent transparent peru transparent;
}
  • 等腰梯形--边框实现--给宽高值 
    .main{
width: 50px;    // 宽高值
height: 50px;
border: 50px solid transparent;
/* border-color: orange pink peru skyblue; */
border-color: transparent transparent peru transparent;
}
  • 画扇形 
    .main{
  width: 50px;
  height: 50px;
  background-color: skyblue;
  border-radius: 50px 0 0 0;  /* 左上开始，顺时针方向 */
 }
avatar
文章
阅读
粉丝