盒子模型

都是作用在内部content区域

块级盒子会在垂直方向上堆叠

行内盒子会在水平排列，它的高度会受所包含行内盒子决定，修改行盒子大小唯一办法就是修改行高

BFC

BFC称为格式化上下文，它的作用就是划分出一块区域，在这个区域中的操作不会影响盒子外的内容

触发BFC

html根元素
overflow除了visible以外的值
position的值为absolute或fixed
float值为none以外的值
display 为 inline-block | table-cell | table-caption | flex | inline-flex

思考：外边距塌陷3种情况父子，兄弟，三明治

清除浮动

BFC
伪元素

.main::after {
	display: block;
    content: '';
    height: 0;
    visibility: hidden;
    clear: both;
}

定位

绝对定位

定位依据：绝对定位元素的包含块是距离它最近的定位祖先，也就是display属性设置为static以外任意值的祖先元素

box-sizing / 包含块

直译理解包含块，它表示的就是包含元素的父块元素的内容区，包含块直接影响的是子元素大小参照

要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。

会改变我们计算盒子大小的方式，默认情况下为content-box，width的宽度为内容区的宽度

当一旦更改为border-box时，width的宽度为可见区的宽度

应用：可保持宽高比的容器

.wrapper
	width 100%
    height 0
    position relative
    padding-bottom 75%
.content 
	position absolute
    top 0
    right 0
    bottom 0
    left 0

垂直居中

flex

.main  
	display flex
    justify-content center
    align-items center

传统垂直居中

元素高度和盒子高度相等，并且text-align：center 或者是margin: 0 auto

table

ul
	display table
    width 100%
	li
    	display table-cell
        vertical-align middle
        text-align center

background

属性都是作用在可见区域

背景image

用作背景图片的图片都是不影响页面内容，它的存在对网页没有本质上的影响

背景图片会作用于作用与元素内容和内边距

线性渐变

background-image: linear-gradient(to bottom, white 0%, red 100%)

背景位置

background-position:当值为具体值的时候，表示的是距离图片的左上角的距离

而当是百分比的时候，表示的是距离图片的百分比和距离父元素百分比的点重合

透明

opacity是将整个元素变得透明，并且一旦设置透明度以后，无法再让其子元素变得不透明

响应式布局

@media only screen and (min-width: 35em) {}设置节点的方式，对于宽度的变化做出响应

视口

首先，我们要知道视口的概念，所谓的视口就是我们浏览器所展示的矩形区域，而对视口的操作都是基于CSS像素的

其次，我们要清楚所谓的CSS像素和我们设备上的像素是不相等的，由于设备的不同，可能真实物理像素和元素像素的比是不同的

默认视口和理想视口

默认视口是，页面不经缩放的原始大小

理想视口是，默认视口经过缩放后，与设备尺寸接近的视口

可见视口和布局视口

可见视口仍然是可见区域

布局视口是整个布局，可以理解为是完整的页面

视口配置

<meta name="viewport" content="width=device-width, initial-scale=1">

配置的意思就是对于视口我们有如下的配置，那就是视口的宽度以设备的理想尺寸为基础，并且设置缩放比为1，避免在ios系统上出现一些奇怪的缩放行为

对于禁止缩放的配置，我们可以这样配置

<meta name="viewport" content="initial-scale=1.0", maximum-scale=1.0, minimum-scale=1.0 uesr-scalable=no">

视口相关单位

vw：5vm=视口宽度1%的5倍

em：表示的是相对长度单位，当所在元素没有设置字体大小时，默认为16px

rem：表示的是相对根元素的字体大小，只与根元素有关

琐碎内容

文字＋背景图片解决方案

.link-with-icon {
	padding-right: 2em;
    background-image: url...;
    background-repeat: no-repeat;
    background-position: right 1em top 50%;
    表示的是距离右边缘1em，距离边缘50%的位置
    }

flex的弊端

flex会随着内容的加载而重新计算尺寸，加载时会有闪动，体验不好

line-height 和 vertical-align的关系

vertical-align只作用于行内块元素或行元素

属性：

top 把元素与行中最高元素的顶端对齐
middle 把元素放在父元素的中部
bottom 把元素的低端与父元素字体底端对齐

CSS细节汇总