前端知识体系-CSS - HelloWorld开发者社区

盒模型

前端知识体系-CSS

页面是由许多盒模型组成的，每个元素都可以视为一个盒模型

BOX = margin + border + padding + content

种类：
W3C标准盒模型 | IE盒模型
box-sizing:
content-box | border-box

唯一区别：
标准盒模型:
width = content
IE盒模型：
width = content + border + padding

其他：
使用IE盒模型时，确定宽高后放大padding/border的值会压缩content的大小

CSS优先级

!important优先级最高

权重：
1000：内联样式
100： id选择器
10：类选择器 | 伪类 | 属性选择器
1：标签选择器 | 伪元素

伪类&伪元素

如何区分：
是否创建了新元素？伪元素：伪类

伪元素：
创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式

CSS3官方定义翻译：
伪元素可以创建一些文档语言无法创建的虚拟元素。
比如：文档语言没有一种机制可以描述元素内容的第一个字母或第一行，但伪元素可以做到(::first-letter、::first-line)。
同时，伪元素还可以创建源文档不存在的内容。
比如使用 ::before 或 ::after。

伪类：
弥补了CSS选择器的不足，用来更方便地获取信息

1.格式化DOM树以外的信息。
比如： a标签的:link、:visited 等。这些信息不存在于DOM树中。
2.不能被常规CSS选择器获取到的信息。
比如：要获取第一个子元素，我们无法用常规的CSS选择器获取，但可以通过 :first-child 来获取到。

浏览器呈现页面的流程

读取所有html代码并解析，生成： dom tree
读取样式并解析，生成： style rules
dom tree + style rules = render tree
浏览器根据render tree 绘制页面

实现水平垂直居中

已知宽高
1.
margin:auto
需要已知宽高，否则父子会重叠

.parent {
    position:relative;
}
.child {
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;

}
2.
负margin

.child {
    width:100px;
    height: 100px;
    position: absolute;
    left:50%;
    top:50%;
    //左右margin设置为宽高的一半负值
    margin-left:-50px;
    margin-top:-50px;
}

3.
table-cell

.parent {
    width:300px;
    height:300px;
    display: tavle-cell;
    vertical-align: center;
    text-align: center;
}
.child {
    display:inline-block;
    width:50%;
    height:50%;
}

未知宽高
1.
CSS3新增transform属性

.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

2.
flex布局

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

特殊情景解决方案

行内元素垂直居中

//水平居中
text-align:center;
//垂直居中
//行高等于包含块的height
line-height: 50px

position

规定元素定位类型

默认值： static，继承性：无

可能值：
absolute:
绝对定位元素, 脱离文档流
相对于非static定位的第一个父元素定位

relative：
相对定位元素, 遵循文档流
相对于其正常位置进行定位

static：
没有定位, 遵循文档流
元素出现于正常的文档流中
top, right, bottom, left 等属性失效

fixed：
绝对定位元素, 脱离文档流
相对于浏览器窗口定位

inherit：
从父元素继承position属性值

注意的点：

relative进行top,left等操作后，元素视觉上的位置发生了变化，但是仍然占的是之前的文档流
绝对定位元素 absolute, fixed都会脱离文档流

回流与重绘

如何区分：
文档流是否发生了变化？回流：重绘

回流：
部分元素的规模尺寸布局发生了变化，需要重建render tree

重绘：
只影响元素的外观、风格
不引起布局的改变，更新部分属性即可

回流必重绘，重绘不一定回流

display:none&visibility:hidden

如何区分：
是否占据文档流？ visibility:hidden : display:none

display:none：
彻底消失
将会隐藏它以及所有的后代元素
所占文档流消失，浏览器不会解析该元素
页面：回流+重绘

visibility:hidden：
视觉上的隐藏，可以理解为透明度为0
仍然占据文档流，浏览器仍然会解析该元素
页面：重绘

都具有继承性, 但是
父元素设置visibility:hidden, 子元素重新设置visibility: visible, 又会重新显示
父元素设置display:none, 子元素设置显示也不会生效

纯CSS画常规几何图形

圆:
通过设置圆角边框属性border-radius 实现

div {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50px;
}

前端知识体系-CSS

椭圆
设置border-radius

div {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}

前端知识体系-CSS

三角形
设置border-top/left/right/bottom 与transparent透明颜色结合完成

div {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

前端知识体系-CSS

参考：CSS画几何图形

px em rem 区别

px:
绝对长度单位(争议)
像素，是相对于显示器屏幕分辨率而言的
1px就是指一个显示像素

em：
相对长度单位
相对的是其父级的字体大小，即倍数。

例：
如果一个设置了font-size:1.2em的元素在另一个设置了font-size:1.2em的元素里，而这个元素又在另一个设置了font-size:1.2em的元素里，那么最后计算的结果是1.2X1.2X1.2=1.728em

rem：
相对长度单位
始终相对于根元素<html>

集相对大小和绝对大小的优点于一身，
通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

双飞翼布局、圣杯布局

概念：
圣杯布局与双飞翼布局针对的都是
三列左右栏固定中间栏边框自适应的网页布局

要求：
三列布局，中间宽度自适应，两边定宽；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；

实现：

1.
构建html

    <body>
        <div class="container">
            <div class="main"> main </div>
            <div class="left"> left </div>
            <div class="right"> right </div>
        </div>

    </body>

2.
设置基本样式

    .main, .left, .right {
        min-height: 130px;
    }
    .main {
        background: blue;
    }
    .left {
        background: green;
        width: 200px;
    }
    .right {
        background: red;
        width: 300px;

    }

效果图：

前端知识体系-CSS
3.
设置container的padding

    .container {
        padding: 0 300px 0 200px;
    }

前端知识体系-CSS
4.
三个子元素全部设置左浮动

    .main, .left, .right {
        min-height: 130px;
        float: left;
    }

前端知识体系-CSS

5.
将主题main元素设置为100%宽度

    .main {
        background: blue;
        width: 100%;

前端知识体系-CSS

6.
设置左右负margin

    .left {
        background: green;
        width: 200px;
        margin-left: -100%;
    }
    .right {
        background: red;
        width: 300px;
        margin-left: -300px;

    }

前端知识体系-CSS

7.
调整left和right的位置

    .left, .main, .right {
        position: relative
    }
    .left {
       left:-200px;
    }
    .right {
        right: -300px;
    }

前端知识体系-CSS
flex 实现

    <style>
        .container{
            display: flex;
            min-height: 130px;
        }     
        .main{
            flex-grow: 1;
            background-color: blue;
        }
        .left{
            order: -1;
            flex-basis: 200px;
            background-color: green;
        }
        .right{
            flex-basis: 300px;
            background-color: red;
        }

    </style>

    <body>
        <div class="container">
            <div class="main"> center </div>
            <div class="left"> left </div>
            <div class="right"> right </div>
        </div>

    </body>