分享CSS干货笔记

总结并分享一些CSS当中常见,但是对于大家来说可能不太清晰的概念,当我们熟记于心的时候,在CSS开发上相信也会更加得心应手。

心里只有一件事,那就是学习

一、盒模型

盒模型:

  • 标准盒模型(content-box):占用宽度 = 内容宽度(content)+ padding+border+margin
  • IE盒模型(border-box):占用宽度 = 内容宽度(content+border+padding)+ margin

一言以蔽之,content-box的宽高是规定内容的宽高,border-box的宽高规定了content+border+padding三者和的宽高


二、CSS优先级

!important > 行内样式 >id > 类(class,伪类,属性选择器) > 标签元素 > 通配符 > 继承 > 默认


三、元素居中

3.1 margin 0 auto

要求目标元素宽度固定,并且与父元素左右margin有空余。

.child {
    width: 200px;
    border: 1px solid gray;
    margin: 0 auto;
}

3.2 absoulte + tarnsform

绝对定位,然后利用tarnsform移动目标元素宽高的50%(上下居中)

.child{
    width: 200px;    //此处可以不设置,默认为父元素的一半
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
}

3.3 absolute + margin

与3.2同理,但必须设置width

.child{
    position: absolute;
    left: 50%;
    width: 100px; // 此处必须设置
    margin-left: -50px; // 设为元素自身宽度的一半,必须根据元素自身宽高明确左移动距离
}

3.4 flex

.child{
    display: flex;
    justify-content: center;
    align-items: center;
}

3.5 text-align: center

适用于行内元素居中

3.6 vertical-align: middle

  • 使行内盒模型与行内元素容器垂直对齐,例如文本与图片
  • 垂直对齐表格单元内容
  • 如果父元素未设置高度,则与行内最高高度对齐,表现为本行与父元素垂直居中

3.7 line-height

垂直居中,适用于单行文本、行内元素、行内块级元素

.child{
    line-height: 30px;
    height: 30px;
}
  • 如果一个标签没有定义高度,那么其高度将由line-height决定,例如,当div没有设置height属性时,设置line-height:0,那么div的高度就为0

3.8 IOS10上居中失效

在开发的时候遇到的一个兼容性问题

.ios-center{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

如上即可解决绝对定位不居中的问题

Reference: 《可食用的「css布局干货」,纯Html示例,可调试 | 水平、垂直、多列


四、定位属性position

position:

  • absolute:绝对定位,定点位于最近postion值为绝对或相对值的父元素的左上角
  • relative:相对定位,定点原点为自身所在位置
  • fixed:固定
  • static:默认值
  • inherit:继承
  • sticky:元素根据正常文档流进行定位,可以被认为是相对定位和固定定位的混合。当元素在屏幕或滚动元素显示区域时,表现为relative,就要滚出显示器屏幕的时候,表现为fixed。可用来做吸顶特效

五、浮动

元素加了浮动属性后,会脱离文档流,提升半层层级,向指定方向移动,直到遇到父元素的边界或另一个浮动元素后停止。

层级:如果元素看作一层,那么下半层就是背景元素,上半层就是内容

  1. 浮动元素之间是漂浮着,并不会形成一个流。浮动元素总会保证自己的顶部与上一个标准文档流的底部对齐
  2. 利用position的absolute,会让元素以inline-block形式显示,此时可以设置长宽

元素浮动会影响兄弟元素的位置,父级元素高度塌陷

解决的方法:

  • 父级元素定义固定高度
  • 最后一个浮动元素之后,增加<div style="clear:both;"></div>
  • 包含浮动元素的父元素设置overflow: hidden

六、页面渲染过程

一个网页接收到服务器返回的数据后,浏览器大致进行的操作步骤:

  1. 构建DOM
  2. 构建CSSOM
  3. DOMCSSOM结合,构建渲染树
  4. 回流(layout布局)
  5. 重绘
  6. display

一张图来解释


七、margin的高度塌陷问题(外边距折叠)

涉及到BFC(Block Formatting Context,块级格式化上下文)知识,简单来说就是一个独立的块级渲染区域,与外界不相干

BFC的布局约束规则:

  • 内部的Box会在垂直方向,一个接一个地放置。

  • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Boxmargin会发生重叠。

  • 每个盒子(块盒与行盒)的margin box的左边,与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。即BFC中子元素不会超出他的包含块。

  • BFC的区域不会与float box重叠。

  • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。

  • 计算BFC的高度时,浮动元素也参与计算。

折叠边距计算规则:

  1. 两者边距为正值或负值,则取绝对值大那个
  2. 两者边距一正一负,则取两者之和

margin的左右是不受影响,外边距重叠主要是由于重叠的两个元素处于同一个BFC下。通过某些属性使元素生成新的BFC上下文即可解决。

BFC触发方式:

  • 根元素,即HTML标签
  • 浮动元素:float值为leftright
  • overflow值不为visible,为 autoscrollhidden
  • display值为inline-blocktable-celltable-captiontableinline-tableflexinline-flexgridinline-grid
  • 定位元素:position值为 absolutefixed

注意:
display: table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell,是这个匿名的table-cell生成了BFC


八、行内元素与块级元素

块级元素,独占一行,宽、高、外边距、内边距可控

行内元素,共享一行,宽、高和marginpaddingtop/bottom均不可控


九、img标签的底部边距问题

有时候发现图片的底部有着一条缝的视觉效果,其原因是因为img是一个行级置换元素,图片默认的对齐方式是基线,与字体大小有关

解决办法:

  • display: block;
  • float: left;
  • 定义vertical-align
    img {
      border: 0;
      vertical-align: bottom;
    }
    
  • 父容器的字体大小设置为0
  • 标签设置与图片相同的高度

十、属性值中的百分比

  1. 宽高百分比相对于父级
  2. margin/padding中的百分比相对于自身,但padding值不能为负值
  3. translate的百分比相对于自身

十一、poniter-events

该属性可以用于设置当前元素的点击事件的是否进行处理,具体可参看MDN关于pointer-events的内容

用于点击穿透,比如网页水印,兼容性很好~

点击穿透


十二、z-index

z-index是控制层级的属性(换个词语:堆叠顺序),在网页中除了xy的二维,同时也存在z轴,比如元素叠加重合,优先级问题。元素重合后的从下到上主要由在文档流中顺序、z-index、层叠上下文、层叠水平决定。

z-index仅在定位元素中生效

层叠上下文元素有如下特性:

  • 层叠上下文的层叠水平要比普通元素高;
  • 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
  • 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。
  • 每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
  • 层叠上下文可以阻断元素的混合模式;

层叠顺序的优先级顺序如下:

  1. z-index > 0 (要求z-index属性生效)
  2. z-index: auto 或者 z-index: 0 (z-index: auto 不会创建层叠上下文)
  3. inlineinline-block 行内盒子
  4. float浮动盒子
  5. block块级盒子,非 inline-block,无position 定位(static除外)的子元素
  6. z-index < 0
  7. 层叠上下文元素的 background/border

偶然看到说默认firefox中的z-indexautoIE0,有待验证,一般来讲z-index,常用编码下,z-index越大越靠前

堆叠顺序规则可以简单归纳为:

  • 兄弟元素,文档流后者居上,兄弟元素的子元素相互比较根据堆叠上下文(父级元素)来排序
  • 在相同的堆叠上下文中,按照明显的优先级顺序来,比如设置了z-index,那么值越大,显示距离用户越近
发表评论 / Comment

用心评论~

金玉良言 / Appraise
DYBOY站长已认证
2020-08-10 00:38
针对3.8中的解决方案只对块级元素有效,table、行内啥的会有问题,另外垂直水平居中的实现方法中兼容性强一点首选transform和绝对定位吧!
DYBOY站长已认证
2020-08-04 15:25
浏览器有负责解析、渲染请求内容的渲染引擎,哪些动作会导致浏览器重排:
(1)增加或删除 DOM 节点;
(2)display:none(重排并重绘); visibility:hidden(重绘);
(3)移动页面中的元素;
(4)改变元素尺寸(宽、高、内外边距、边框等);
(5)用户改变窗口大小,滚动页面等;
(6)页面初始渲染;
(7)改变元素内容(文本或图片等)。

作者:vivo互联网技术
链接:https://juejin.im/post/6856964615596769288
DYBOY站长已认证
2020-08-04 11:55
display:table能解决哪些问题?
(1)大小不固定的元素垂直居中
  父元素设置:display:table; 子元素:display:table-cell; vertical-align:middle;
(2)两列自适应布局
(3)等高布局
DYBOY站长已认证
2020-08-04 11:39
.a.b:(无空格)当a和b在同一标签类名中同时出现才选择
.a .b:(有空格)选择a的所有后代b
.a>.b:(>)选择a的子代b
.a, .b:(,)a与b样式相同
.a+.b:(+)选择a紧邻的兄弟b
.a~.b:(~)有共同父元素,选择a后的所有b,ab不必紧邻
DYBOY站长已认证
2020-08-03 12:26
移动端点击出现默认的蓝色背景解决方法,在对应元素或者html上加上:-webkit-tap-highlight-color: transparent;