花于陌上开个人站

第三章 页面布局 v1.0 ​

第一部分 页面布局基础 ​

一、显示模式 ​

1.三种显示模式 ​

a.块级元素 ​

特点：独占一行；宽度默认是父级的100%；加宽高属性生效

b.行内块元素 ​

特点：一行可以共存多个行内元素；尺寸默认由内容撑开；加宽高属性生效

c.行内元素 ​

特点：一行可以共存多个行内元素；尺寸默认由内容撑开；加宽高属性不生效

2.转换显示模式 ​

可以使用display属性进行显示模式的转换

block：块级元素

inline-block：行内块元素

inline：行内元素

flex：flex布局

none：隐藏(不显示)

二、盒子模型 ​

用于布局网页，摆放盒子和内容

1.组成部分 ​

  1. 内容区域：width&height
  2. 内边距：padding(出现在内容与盒子边缘之间)
  3. 外框线：border
  4. 外边距：margin(出现在盒子边缘之外)

盒子模型

2.边框线 ​

标准格式：border:边框线粗细 线条样式 颜色 (不区分顺序)

单方向边框线：border-方位名词[top/right/bottom/left]:边框线粗细 线条样式 颜色

solid：实线

dashed：虚线

dotted：点线

3.内边距与外边距 ​

a.内边距 ​

内边距标准格式：padding:数值+单位/数值+单位列表

示例对应关系
padding:10px全部方向
padding:10px 20px上下 左右
padding:10px 20px 40px上 左右 下
padding:10px 20px 40px 80px上 右 下 左

记忆方式：从上开始顺时针旋转一周，若当前方向没有数值，则取值和对面一样

单方向内边距：padding-方位名词[top/right/bottom/left]:数字+单位

b.外边距 ​

外边距同内边距基本一致，只是需要将padding改为margin

特殊：属性值还可以使用auto使盒子在页面垂直居中

相关问题：

  1. 垂直排列的兄弟元素，margin会发送合并，中间的margin的较大值生效
  2. 父子标签中，子级中添加外边距会导致父级一起向下移动，可以在父级中加overflow:hidden解决

4.尺寸计算 ​

计算方式：盒子尺寸=内容区域尺寸+内边距尺寸+外框线尺寸

解决方式：

  1. 手动计算，减掉border/padding的尺寸
  2. 内减模式：添加box-sizing:border-box，内边距尺寸与外框线尺寸计算在内容区域内

行内元素内外边距问题：行内元素垂直方向上无法修改边距，可以通过line-height(行高)属性进行修改

5.溢出元素的内容显示方式 ​

标准写法：overflow:属性值

hidden：溢出隐藏

scroll：溢出滚动(无论是否溢出都会显示滚动条)

auto：溢出滚动(溢出才会显示滚动条)

6.相关样式 ​

a.圆角 ​

标准写法：border-radius:数字+单位/百分比(列表)

示例对应关系
border-radius:10px全部方向
border-radius:10px 20px左上右下 右上左下
border-radius:10px 20px 40px左上 右上左下 右下
border-radius:10px 20px 40px 80px左上 右上 右下 左下

常见应用：

  • 正圆形状：正方形盒子，圆角属性设置为宽高的一般/50%
  • 胶囊形状：长方形盒子，圆角属性设置为盒子高度的一半/50%
b.阴影 ​

标准写法：box-shadow:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

说明：X轴偏移量和Y轴偏移量必须书写，默认是外阴影，内阴影添加inset属性

第二部分 Flex布局 ​

一、标准流 ​

标准流也叫文档流，指的是标签在页面中默认的排布规则(显示模式)

二、浮动 ​

1.特点 ​

  1. 顶对齐，且可以使块级元素具有行内块的特点
  2. 具备行内块显示模式的特点
  3. 浮动后的盒子会脱离标准流控制(脱标)

2.浮动属性 ​

标准写法：float:属性值

浮动属性值：left：左对齐；right：右对齐

3.清除浮动 ​

  1. 额外标签法：在父标签内容最后添加一个块级元素，设置CSS属性：clear:both
  2. 单伪元素法：在父标签内容之后加一个块级伪元素，设置CSS属性：clear:both
css
.father::after {
  content: "";
  display: block;
  clear: both;
}
  1. (推荐)双伪元素法：在父标签内容前后各加一个块级伪元素，并设置CSS属性
css
.father::before,
.father::after {
  content: "";
  display: block; 
}
.father::after {
  clear: both;
}
  1. overflow：为父元素添加CSS属性：overflow:hidden

三、Flex布局 ​

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。 Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

1.组成 ​

  1. 弹性容器： 添加display:flex属性的父级元素，用于容纳弹性盒子
  2. 弹性盒子：弹性容器中的盒子，会沿着主轴方向排列
  3. 主轴：默认在水平方向、
  4. 侧轴/交叉轴：默认在垂直方向

2.主轴对齐方式 ​

标准写法：justify-content:属性值

flex-start：默认值，弹性盒子从起点开始依次排列

flex-end：弹性盒子从终点开始依次排列

center：弹性盒子沿主轴居中排列

space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

3.侧轴对其方式 ​

修改容器内所有弹性盒子的侧轴对其方式(给弹性容器设置)：align-items:属性值

单独控制某个弹性盒子的侧轴对其方式(给弹性盒子设置)： align-self:属性值

stretch：弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)

center：弹性盒子沿侧轴居中排列

flex-start：弹性盒子从起点开始依次排列

flex-end：弹性盒子从终点开始依次排列

4.修改主轴方向 ​

标准写法：flex-direction:属性值

row：水平方向，从左向右(默认)

column：垂直方向，从上向下

row-reverse：水平方向，从右向左

column-reverse：垂直方向，从下向上

5.弹性伸缩比 ​

用于控制弹性盒子的主轴方向的尺寸，默认情况下主轴方向尺寸靠内容撑开；侧轴默认拉伸

标准写法：flex:数字，用于控制弹性盒子的主轴方向的尺寸，大小为：剩余尺寸×(数字/数字总和)

6.弹性盒子换行 ​

在flex布局中，所有弹性盒子可以自动挤压或拉伸，默认情况下所有盒子在一行显示

标准写法：flex-wrap:wrap(换行显示)，默认：flex-wrap:nowrap(不换行)

7.行对齐方式 ​

标准写法：align-content:属性值

flex-start：默认值，弹性盒子从起点开始依次排列

flex-end：弹性盒子从终点开始依次排列

center：弹性盒子沿主轴居中排列

space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间

space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧

space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

第三部分 绝对定位与相对定位 ​

一、绝对定位 ​

1.作用 ​

设置绝对定位，元素会相对页面位置进行偏移

2.使用 ​

设置属性：position:absolute

二、相对定位 ​

1.作用 ​

设置相对定位，元素会相对本元素原始位置进行偏移

2.使用 ​

设置属性：position:relative

三、相关属性 ​

1.偏移量 ​

top/right/left/bottom：单位为像素值或百分比，默认auto

2.显示优先级 ​

z-index：显示元素在浏览器上的层叠优先级，数值越大越靠近浏览者(浮于顶层)