理解 CSS｜青训营笔记行内和块级元素块级元素的特点块级元素独占一行，多个块级元素自动换行可设置高度、宽度、外边距

行内和块级元素

块级元素的特点

块级元素独占一行，多个块级元素自动换行
可设置高度、宽度、外边距和内边距
宽度默认是容器（父级元素）的100%，高度默认为0
行内元素可放入块级元素和其他行内元素

行内元素的特点

一行可以显示多个，相邻行内元素在一行上
无法设置宽度和高度，并且垂直方向的外边距和内边距失效
默认的宽度和高度皆根据内容的大小决定
行内元素只能容纳文本或其他行内元素

盒模型和选择器

标准盒模型

设定方式：box-sizing: content-box

真实宽度 = width + padding * 2 + border * 2 + margin * 2

真实高度 = height + padding * 2 + border * 2 + margin * 2

替代盒模型

设定方式：box-sizing: border-box

真实宽度 = width + margin * 2

真实高度 = height + margin * 2

CSS选择器类型

列表	示例
标签选择器	h1 { }
通配选择器	* { }
类选择器	.box { }
ID选择器	#unique { }
属性选择器	a[title] { }
伪类选择器	p:first-child { }
伪元素选择器	p::first-line { }
后代选择器	article p
子代选择器	article > p

CSS选择器的权重计算

类型	权重
!important	无穷大
内联样式	1000
ID选择器	0100
类选择器、伪类选择器、属性选择器	0010
标签选择器、伪元素选择器	0001
通配选择器、后代选择器、子代选择器	0000
继承	无权重

元素溢出与隐藏

display：none/block（隐藏后不占据内容）
visibility：hidden/visible（隐藏后仍占据内容）
overflow 可选值

-visible 元素正常溢出到父元素

-hidden 元素溢出内容将会被裁剪

-scroll 元素内部生成X和Y两个方向的滚动条

-auto 根据元素是否溢出自动生成滚动条
opacity：0/1（设置元素的透明度，仍占据内容）

实践：文本溢出显示省略号

/* 单行文本 */
p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: norwap;
}
/* 多行文本 */
p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

Position 布局

developer.mozilla.org/zh-CN/docs/…

Flex & Grid 布局

developer.mozilla.org/zh-CN/docs/…

实践：圣杯布局（两边宽度固定，中间宽度自适应）

我们首先设计DOM结构，该布局有三个父容器（顶部、中部和底部），中部则又分为三个子容器（左中右）。

<div class="page">
        <div class="top"></div>
        <div class="middle">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <div class="bottom"></div>
</div>

在圣杯布局中，最值的关注的是中间部分的布局。我们预先设计好页面的顶部和底部，作为固定的样式。

* {
    margin: 0;
    padding: 0;
}

.page {
    height: 100vh;
}

.top {
    height: 60px;
    background-color: #FF9A54;
}

.bottom {
    height: 60px;
    background-color: #FF9A54;
}

Flex布局实现：父容器设为flex，分别对其内部的左右两侧样式设置固定的宽度，中间样式的flex-grow则为1。

注意：middle样式中需使用calc计算中间部分的高度，减去顶部和底部的高度以达到撑满页面的效果。

.middle {
    height: calc(100% - 120px);
    display: flex;
}

.left {
    width: 220px;
    height: 100%;
    background-color: #6690FF
}

.center {
    flex-grow: 1;
    height: 100%;
    background-color: #95EF68
}

.right {
    width: 220px;
    height: 100%;
    background-color: #57F4FD
}

Grid布局实现：父容器设为grid，同时设定grid-template-columns属性，左右宽度为220px，中间宽度为1fr。

.middle {
    height: calc(100% - 120px);
    display: grid;
    grid-template-columns: 220px 1fr 220px;
}

.left {
    height: 100%;
    background-color: #6690FF
}

.center {
    height: 100%;
    background-color: #95EF68
}

.right {
    height: 100%;
    background-color: #57F4FD
}

水平垂直居中方法

DOM结构设计如下：其中的box2就是我们要垂直居中的对象。

<div class="box1">
    <div class="box2"></div>
</div>

利用Flex布局实现垂直居中；其中box1为父元素，box2为子元素。

.box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    background-color: #57F4FD;
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #6690FF;
}

利用Position布局（子绝父相）实现垂直居中；其中box1为父元素，box2为子元素。

.box1 {
    width: 150px;
    height: 150px;
    background-color: #57F4FD;
    position: relative;
}

.box2 {
    width: 50px;
    height: 50px;
    background-color: #6690FF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS 属性书写规范

布局属性：display｜position｜float｜clear｜visibility｜overflow
自身属性：width｜height｜margin｜padding｜border｜background
文本属性：color｜font｜text-align｜vertical-align｜white-space｜break-word
其他属性：content｜cursor｜border-radius｜box-shadow｜text-shadow

常见布局问题

元素的空白缝隙

图片元素底部存在空白缝隙

原因：图片元素默认基线对齐

解决办法：设置该元素vertical-align属性值为top｜middle｜bottom其中之一

行内/行内块元素空白间隙

原因：元素之间受空格字符影响

解决办法：设置父元素font-size属性值为0；或者设定行内元素的margin-left为-4px

float高度塌陷

原因：子元素在设置float属性后脱离文档流，出现父元素（未设置高度）产生高度塌陷的问题

解决办法：利用双伪元素清除浮动

<style>
.clearfix:after, .clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}
.container {
    border: 10px solid orange;
}
.box {
    float: left;
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>
<div class="container clearfix">
    <div class="box"></div>
</div>

解决办法：父元素触发BFC块级格式化上下文

<style>
.container {
    overflow: hidden;
    border: 10px solid orange;
}
.box {
    float: left;
    width: 200px;
    height: 200px;
    background-color: green;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

margin外边距折叠

兄弟元素折叠后的外边距情况：

如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是正值，则取两者中值较大的
如果相邻的外边距都是负值，则取两者中绝对值较大的

解决办法：触发元素成为BFC块级格式化上下文

<style>
.container {
    overflow: hidden;
}
.box {
    width: 200px;
    height: 200px;
    background-color: green;
    margin: 20px;
}
</style>
<div class="container">
    <div class="box"></div>
</div>
<div class="box"></div>

margin过度约束

说明：一个元素在其父元素中，水平布局必须要满足以下的等式：父元素内容区的宽度 =

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

用法如下：利用上述特点使一个元素在其父元素水平居中

<style>
.container {
    border: 10px solid orange;
}
.box {
    width: 200px;
    height: 200px;
    background-color: green;
    margin: 0 auto;
}
</style>
<div class="container">
    <div class="box"></div>
</div>

元素脱离文档流

元素脱离文档流后不再占据空间，而是以一种浮动的形式存在。

设置浮动布局：float：（left / right）
设置绝对/固定布局：position：（absolute / fixed）

BFC块级上下文

BFC块级上下文作为一个独立容器，不会影响外部元素的布局。

BFC块级上下文的触发条件如下：

position：absolute｜fixed｜sticky
float：除 none 以外的值
overflow：除 visible 以外的值
display：table-cell｜inline-block｜flex｜gird
根元素：<html>