-
文档流
- 网页是一个多层的结构，一层落着一层
- 通过CSS可以分别为每一层来设置样式
- 作为用户来讲只能看到最顶上一层
- 这些层中，最底下的一层称为文档流，文档流是网页的基础
- 我们所创建的元素默认都是在文档流中进行排列
- 对于我们来说元素主要有两个状态
- 在文档流中
- 不在文档流中（脱离文档流）
-
元素在文档流中有什么特点
- 块元素
- 块元素在页面中独占一行（自上向下）
- 默认宽度是父元素的全部（会将父元素撑满）
- 默认高度是被内容撑开（子元素）
- 行内元素
- 行内元素不会独占页面一行，只占自身的大小
- 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素
- 则元素会换到第二行继续自左向右排列（书写习惯一致）
- 行内元素的默认高度和宽度都是被内容撑开的
- 块元素
-
盒模型
-
内容区 content
- 内容区所有的子元素和文本内容都在内容区中排列
- 大小由width和height两个属性来设置
-
边框 border
- 边框属于盒子边缘，边框里边属于盒子内部，除了边框都是盒子的外部，边框的大小会影响到整个盒子的大小
-
-
盒模型，盒子模型，框模型
- CSS将页面中所有的元素都设置为了一个矩形的盒子
- 将元素设置为矩形的盒子后，对页面的布局就将变成不同的盒子摆放到不同的位置
- 每一个盒子都由一下几个部分组成
-
内容区
-
内边距 padding
-
边框 border
-
外边距 margin
-
-
一共盒子的可见框大小，由内容区 内边距 和边框共同决定
-
所以在计算盒子大小时，需要将这三个区域加到一起计算
-
外边距 margin
- 不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 会影响到盒子实际占用空间
-
元素的水平方向的布局
- 等式必须满足，如果相加使等式不成立 则称为过度约束，等式会自动调整
-
垂直方向的布局
- 子元素是在父元素的内容区排列的
- 如果子元素的大小超过了父元素，则子元素会从父元素中溢出
- 使用overflow来设置父元素如何处理溢出的子元素
- visible 默认值 子元素会从父元素溢出，在父元素外部的位置显示
- hidden 溢出内容将会被剪裁不显示
- scroll 生成两个滚动条，通过滚动条来查看完整的内容
- auto 根据需要生成滚动条
- 子元素是在父元素的内容区排列的
-
垂直外边距的重叠（折叠）
- 相邻的垂直外边距会发生重叠现象
- 兄弟元素
- 兄弟元素的相邻垂直外边距会取两者之间的较大值（两者都是正值）
- 特殊情况
- 如果相邻的外边距一正一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中绝对值较大的
- 兄弟元素之间的外边距重叠，对于开发是有利的，所以我们不需要进行吹
- 父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理
-
行内元素盒模型
- 行内元素不支持宽度和高度
- 行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
- 行内元素可以设置border，垂直方向的border不会影响页面的布局
- 行内元素可以设置margin，垂直方向的margin不会影响布局
-
display 用来设置元素显示的类型
- inline 将元素设置为行内元素
- block 将元素设置为块元素
- inline-block 将元素设置为行内块元素
- 行内块，即可以设置宽度和高度又不会独占一行
- table 将元素设置为一个表格
- none 元素不在页面中显示
-
visibility 用来设置元素的显示状态
- visible 默认值，元素在页面中正常显示
- hidden 元素在页面中隐藏不显示，但是仍然占据页面的位置
-
重置样式表：专门来对浏览器的样式进行重置的
- reset.css 直接去除了浏览器的默认样式
- normalize.css 对默认样式进行了统一
- 默认样式：
- 通常情况，浏览器都会为元素设置一些默认样式
- 默认样式的存在会影响到页面的布局
- 通常情况下编写网页时必须要去除浏览器的默认样式（PC端的页面）
- 默认样式：
-
盒子的样式，盒子可见框的大小由内容区，内边距和边框共同决定
- box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
- 可选值
- content-box 默认值，宽度和高度用来设置内容区的大小
- border-box 宽度和高度用来设置整个盒子可见框的大小
- width和height 指的是内容区和内边框和边框的总大小
-
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
-
box-shadow: 0px 0px 50px rgba(0, 0, 0, .3) ; -
第一个值，水平偏移量 设置阴影的水平位置 正值向右
-
第二个值，垂直偏移量 设置阴影的垂直位置 正值向下
-
第三个值，阴影的模糊半径
-
第四个值，阴影的颜色
-
-
outline
- 用来设置元素的轮廓线，用法和border一模一样
- 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
- 用来设置元素的轮廓线，用法和border一模一样
