最后亿遍CSS常用考点总结-一一网

这是我参与更文挑战的第19天，活动详情查看：更文挑战

css3新增属性

这里简单说几个常用的

动画：@keyframes
2D&3D ：translate()、rotate()
过渡等：transition

css中哪些属性会继承？

其实大多数css的属性都可以继承，这里简单说几个常用的

字体属性font
- font-size
- font-weight
- font-family
文本属性
- text-align
- color
- text-indent 文本缩进
- line-height
其他
- opacity
- visibility
- cursor

重排与重绘（回流、reflow）

概念

重绘：侧重点在“绘”，绘画它的颜色，大小等把她渲染到浏览器上展现出来
重排：侧重点在“排”，对元素进行排版。需要把元素渲染到什么位置，渲染的宽度是多少

如何触发

重绘：颜色、背景色等改变时
重排：几何属性改变时，比如宽高、位置

如何优化

重绘不一定触发重排，但是重排一定会触发重绘
根据它的触发机制可以看到，需要避免高频的去操作dom，所以使用类来批量修改样式，而不是利用style单个更改

添加dom元素时，创建完成之后一并添加到父元素中，而不要创建一个就添加一个

垂直居中的方案

方案很多，介绍几种通用的

<div class="box">
    <div class="child-box"></div>
</div>
复制代码

子元素宽高已知

.box {
    width: 100%;
    height: 100%;
    background: aqua;
    position: relative;
}
.child-box {
    width: 200px;
    height: 200px;
    background: bisque;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
复制代码

子元素宽高未知

.box {
    width: 100%;
    height: 200px;
    background: aqua;
    vertical-align: middle;
    text-align: center;
    line-height: 200px;
}
.child-box {
    background: bisque;
    display: inline;

}
复制代码

万能写法

flex布局对于上面两种情况都适用，也是最简单的写法

   .box {
        width: 100%;
        height: 200px;
        background: aqua;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .child-box {
        background: bisque;
        /* display: inline; */
      }
复制代码

标准与怪异盒子

盒模型

目前浏览器对于盒模型分为两种：标准盒模型(w3标准)和怪异盒模型(IE标准)。其中标准盒模型为使用主流，而这主要区别于width属性代表什么

不同点

标准：总宽度 = margin + padding + border + content，content 就是设置width大小
怪异：总宽度 = margin + width，所以content = width - border - padding

如何设置

盒模型根据box-sizing属性来设置，

div{
    border-sizing: border-box;/* 表示怪异盒模型 */
    border-sizing: content-box;/* 表示标准盒模型 */
}
复制代码

选择器权重

选择器	案例	权重值
!important	!important	最高
内联样式	style=”..”	1000
id	#id	100
class，属性	.class 、[type=’button’]、:hover	10
标签	p、:first-letter	1

各种单位

rem：根标签 html的font-size属性
em：父元素的宽度
px:固定像素
%：父元素百分比
vh，vw：窗口百分比
rpx:小程序，会自适应

BFC

Block formatting context 块级格式上下文，容器内部的布局不影响容器外面

布局规则

同一个BFC里面相邻元素会合并margin(margin重叠问题)
脱离文档流的元素也会参与计算bfc盒子的高度(高度塌陷问题)
盒子内部的浮动元素不会于其他元素发生重叠(两栏布局)

如何实现？

html根元素本身就是一个bfc盒子
float不为none
overflow不为visible
positation为绝对定位 absolute、fixed
display为弹性盒子flex、inline-flex；行内块元素inline-block;网格元素gird、inline-gird;等等

margin重叠

外边距折叠发生在同一个BFC的两个相邻块级元素之间，边距取决于最大的。只发生在垂直方向上

场景

同级相邻元素外边距重叠
父子元素外边距叠加
本身没有没有内容填充时，设置margin-top和margin-bottom

如何解决

设置paddin或者border把两个相邻元素隔开
float
position：absolute
bfc盒子

文档流

常规流；对于块元素，会自上而下垂直排列。通过margin来控制间距，在盒子内部，子元素的左外边缘会紧挨着父元素的左边缘；对于内联元素，会在盒子内部水平排列

脱离文档流

float浮动
绝对定位absolute
固定定位fixed

高度塌陷

原因

父元素依靠子元素来撑开，当子元素脱离文档流时，无法撑开父元素，造成父元素的高度塌陷

解决方案

由于bfc中脱离文档流的元素也会参与父元素高度的计算，所以可以将父元素设置成BFC盒子
对于float浮动造成的塌陷，可以用清除浮动的方法来解决

如何清除浮动

浮动定位与清除浮动时只会作用于同一个BFC内的元素，不会影响其他的元素布局，主要使用clear:both来实现效果

<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="clearfix"></div>
</div>
复制代码

在最后一个子元素后面继续添加一个空元素

.container {
  border: 1px solid red;
}

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix {
  clear: both;
}
复制代码

在父元素中添加伪类after来清除

.item {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #f60;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}
复制代码

父元素实现一个BFC盒子

flex布局

水平为主轴，垂直为交叉轴
父元素称为容器，子元素称为项目

容器的属性

flex-direction ：项目的排列方式，水平？垂直？，调整主轴的方向
flex-wrap ：一行放不下时，是否换行
flex-flow： flex-direction flex-wrap两种属性的简写
just-content ：主轴对齐方式
align-items ：交叉轴对齐方式
align-content ：多根轴线时的对齐方式

项目的属性

order：项目的排列顺序
flex-grow：存在剩余空间时的放大比例
flex-sharink：空间不足时的缩小比例
flex-basics：项目在主轴上的初始大小，会覆盖width属性
flex：flex-grow、 flex-shrink、flex-basis的简写
align-self：单独设置项目本身的对齐方式

添加字体文件

下载字体文件
注册字体文件

@font-face {
    font-family: 'myFont';
    src: url('./font/myFont.otf');
}
复制代码

使用字体文件

.font-box {
    font-family: 'myFont';
}
复制代码

圣杯&双飞翼布局

上下左右固定，中间内容随着页面伸缩

<style>
    html,
    body {
        height: 100%;
    }
    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    header,
    footer {
        height: 50px;
        background: darkcyan;
    }
    .main {
        display: flex;
        flex: 1;
    }
    .left-sidebar,
    .right-sidebar {
        width: 100px;
        background: darkgoldenrod;
    }
    .content {
        flex: 1;
        background: pink;
    }
</style>
复制代码

<div class="wrapper">
    <header></header>
    <div class="main">
        <div class="left-sidebar"></div>
        <div class="content"></div>
        <div class="right-sidebar"></div>
    </div>
    <footer></footer>
</div>
复制代码

两栏布局

左侧固定，内容随着页面伸缩

<div class="wrapper">
    <div class="left-sidebar"></div>
    <div class="content"></div>
</div>
复制代码

.wrapper {
    display: flex;
    height: 100%;
}
.left-sidebar {
    width: 100px;
    background-color: darkcyan;
}
.content {
    flex: 1;
    background-color: pink;
}
复制代码