文档流(normal flow)
网页是一个多层的结构，用户只能看到最顶上一层,最底下的一层称为文档流，文档流是网页的基础
- CSS 可以分别为每一层来设置样式
- 元素默认都是在文档流中进行排列
- 元素主要有两个状态: 在文档流中 / 脱离文档流
- 元素在文档流的特点：
- 块元素：
- 在页面中独占一行(自上向下垂直排列)
- 默认宽度是父元素的全部，默认高度是被内容撑开
- 行内元素：
- 不会独占页面的一行，只占自身的大小(从左向右水平排列，会换行)
- 行内元素的默认宽度和高度都是被内容撑开
- 块元素：
盒模型(box model)
- 一个盒子的大小由以下几个部分组成：
- 内容区(content) + 内边距(padding) + 边框(border) + 外边距(margin)
- 浏览器默认使用标准盒模型
- 标准盒模型(W3C盒模型)中 width 和 height 指的是内容区域 content 的宽高
- box-sizing: content-box;
- 怪异盒模型(IE盒模型)中的 width 和 height 指的是 content + border + padding 的宽高
- box-sizing: border-box;
- 因为 content 已经包含 border 和 padding，所以这两项不会撑开盒子
内容区(content)
- 元素中的所有的子元素和文本内容都在内容区中排列
- 内容区的大小由 width 和 height 两个属性来设置
边框(border)
- 要设置边框，需要至少设置三个样式：
- border-[top | right | bottom | left]简写属性(没有顺序要求):
border: border-width border-style border-color;- 边框的宽度：
border-[top | right | bottom | left]-width- 默认值为 3px
- 值的情况
- 四个值：上 右 下 左
- 三个值：上 左右 下
- 两个值：上下 左右
- 一个值：上下左右
- 边框的颜色：
border-color- 值的情况与 border-width 一样
- 边框的样式：
border-style: none | solid(实) | dotted(点) | dashed(虚) | double(双) - 圆角半径：
border-[top | bottom]-[left | right]-radius- 值情况：
- 两个值：左上/右下 右上/左下
- 三个值：左上 右上/左下 右下
- 四个值：左上 右上 右下 左下
- 值情况：
- 元素的阴影：
box-shadow: 水平偏移量(正值向右,负值向左) 垂直偏移量(正值向下,负值向上) 模糊半径 颜色- 不会影响页面布局
- 轮廓：outline：常用来设置 hover 效果。与 border 一样，但轮廓不会占用空间和影响元素位置大小
内边距(padding)
- padding-[top | right | bottom | left]
- 背景颜色会延伸到内边距上
外边距(margin)
- margin-[top | right | bottom | left]
- 元素在页面中是按照自左向右的顺序排列的，所以默认情况下设置左、上会移动元素自身,而设置下、右会移动其他元素
盒子的布局
水平布局 — width:xxx; margin:0 auto;
- 一个元素在其父元素中，水平布局必须要满足以下的等式，如果相加结果使等式不成立，则称为过度约束，则等式会自动调整
- margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度
- 调整的情况：
- 如果这七个值中没有为 auto的情况，则浏览器会自动调整margin-right值以使等式满足
- 这七个值中有三个值和设置为 auto
- width
- margin-left
- maring-right
- 如果某个值为auto，则会
自动调整为auto的那个值以使等式成立 - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为 auto 的外边距会自动为0
- 如果将三个值都设置为auto，则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
- 当我们
开启了绝对定位后:- 水平方向的布局等式就需要添加 left 和 right 两个值
- 当发生过度约束：
- 如果 9 个值中没有 auto 则自动调整 right 值以使等式满足
- 如果有 auto，则自动调整 auto 的值以使等式满足
- 可设置 auto 的值：margin、width、left、right
- 因为 left 和 right 的值默认是 auto，所以如果不指定 left 和 right 则等式不满足时，会自动调整这两个值
垂直布局
- 默认情况下父元素的高度被内容撑开
- 子元素是在父元素的内容区中排列的，如果子元素大小超过父元素，则子元素会从父元素中溢出
- 使用 overflow 属性来设置父元素如何处理溢出的子元素
- 可选值：
- visible：默认值 子元素会从父元素中溢出，在父元素外部的位置显示
- hidden：溢出内容将会被裁剪不会显示
- scroll：生成两个滚动条，通过滚动条来查看完整的内容
- auto：根据需要生成滚动条
- 还可以单独对 x 和 y 方向的内容做溢出处理
- overflow-x，overflow-y
- 可选值：
- 当我们开启了绝对定位>后:
- 垂直方向布局的等式的也必须要满足
- top + margin-top/bottom + padding-top/bottom + border-top/bottom + height = 包含块的高度
- 用 margin-left,margin-right 的话必须设置 left:0,right:0
垂直外边距的重叠（折叠）
- 相邻的垂直方向外边距会发生重叠现象
- 兄弟元素 — 对开发有利，不需要处理
- 兄弟元素间的相邻垂直外边距，则取两者之间绝对值较大的
- 特殊情况：如果相邻的外边距一正一负，则取两者的和
- 父子元素 — 影响布局，必须处理
- 父子元素间的相邻垂直外边距，子元素的会传递给父元素（上外边距）
行内元素的盒模型
- 行内元素不支持设置宽高
- 行内元素可以设置 padding、margin、border，但是垂直方向都不会影响页面的布局
- display：用来设置元素显示的类型
- inline：将元素设置为行内元素
- block：将元素设置为块元素
- inline-block：将元素设置为行内块元素，即可以设置宽度和高又不会独占一行
- table：将元素设置为一个表格
- none：元素不在页面中显示
- visibility：用来设置元素的显示状态
- visible：默认值，元素在页面中正常显示
- hidden：元素在页面中隐藏不显示，但是依然占据页面的位置
默认样式和重置样式表
默认样式：
- 浏览器为元素设置的样式，这写样式会影响到页面布局，通常情况下要去除
重置样式表
- 专门用来对浏览器的样式进行重置的
- reset.css：直接去除了浏览器的默认样式
- normalize.css：对默认样式进行了统一
像素与视口
像素：
- 屏幕是由一个一个的点构成，这一个个的点就是像素
- 分辨率：1920 x 1080 说的就是屏幕中点的数量
- 在前端开发中像素要分成两种情况讨论：CSS像素 和 物理像素
- 物理像素，上述所说的点就属于物理像素
- CSS 像素，编写网页时，所用像素都是 CSS 像素
- 浏览器在显示网页时，需要将 CSS 像素转换为物理像素然后再呈现
- 一个 css 像素最终由几个物理像素显示，由浏览器决定：
- 默认情况下在 pc 端，一个 css 像素 = 一个物理像素
视口(viewport)
- 视口就是屏幕中用来显示网页的区域
- 默认情况下：css 像素和物理像素的比是 1:1
- 放大两倍的情况：
- 视口宽度：960px（CSS 像素）、1920px（物理像素）
- 此时，css 像素和物理像素的比是 1:2
- 通过改变视口的大小，可以改变 CSS 像素和物理像素的比值
移动端网页
- 在不同的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
- 智能手机的像素点 远远小于 计算机的像素点
- 移动端默认的视口大小是 980px(css 像素)，
- 默认情况下，移动端的像素比就是 980/移动端宽度
- 可以通过 meta 标签来设置视口大小
- 将网页的视口设置为完美视口 (移动端网页必备)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 不同的设备完美视口的大小是不一样的，所以在移动端开发时，就不能再使用 px 来进行布局了
- 使用 vw 来表示的是视口的宽度（viewport width）
- 100vw = 一个视口的宽度
