园龄：粉丝：关注：

🔖CSS 前端

2024-04-03 21:59阅读: 47评论: 0推荐: 0

CSS 布局专题

0x01 浮动布局

（1）常见网页布局

顶部商标栏（Logo）：展示网站的标志、名称以及具有代表性的图片
导航栏（Navigation）：展示网站大概的分类
左侧边栏（Left-side Bar）：展示网站详细的分类
内容栏（Content）：展示网站的主要内容
右侧边栏（Right-side Bar）：展示在网站中比较热门的内容

（2）浮动布局概述

流式布局
- 块级元素的默认布局称为流式布局
- 默认块级元素的宽度会填充整个页面，自上而下依次排列
浮动布局
- 不同于流式布局，浮动布局允许将块级元素并列排列
- 设置块级元素的 float 属性，即可将该块级元素浮动起来

举例：

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      div {
        width: 33%;
        height: 200px;
        float: left;
      }
      #b1 { background: red; }
      #b2 { background: green; }
      #b3 { background: blue; }
    </style>
  </head>
  <body>
    <div id="b1"></div>
    <div id="b2"></div>
    <div id="b3"></div>
  </body>
</html>

（3）使用浮动布局实现常见网页布局

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #logo {
        background: red;
        height: 100px;
      }
      #nav {
        background: green;
        height: 100px;
      }
      #leftside {
        background: blue;
        float: left;
        width: 20%;
        height: 500px;
      }
      #content {
        background: yellow;
        float: left;
        width: 60%;
        height: 500px;
      }
      #rightside {
        background: blue;
        float: left;
        width: 20%;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div id="logo"></div>
    <div id="nav"></div>
    <div id="leftside"></div>
    <div id="content"></div>
    <div id="rightside"></div>
  </body>
</html>

0x02 定位布局

（1）概述

定位方法用于实现复杂的布局
CSS 的定位方法通过 position 属性进行设置
定位方法包括：static、relative、absolute、fixed、sticky

（2）static

static 是静态定位
是 position 的默认值及默认布局方式
从上到下、从左到右排列元素

 div {
    position: static;
}

（3）relative

relative 是相对定位
在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移
起始位置为此元素原先在文档流的位置
偏移后的元素，其所占的空间还保留在原位，其他元素不会挤占它原本的空间

 div {
    position: relative;
    top: 10px;
    left: 20px;
}

（4）absolute

absolute 是绝对定位
在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移
- 与 relative 的区别在于，absolute 会相对于包含它的元素进行偏移
- 如果附近某个元素设置了 transform 或 perspective 属性，那么这些元素就是 absolute 的包含元素
- 通常使用 relative 定位来设置包含元素
会将元素移出正常的文档流
使用绝对定位的元素，它原本的空间会被其他元素挤占，但是会覆盖在挤占它的元素的上方
- 后定义的 absolute 元素会覆盖在先定义 absolute 的元素的上方
一般用于实现弹出层、叠加不规则的位置等布局形式

 div {
    position: absolute;
    top: 10px;
    left: 20px;
}

（5）fixed

fixed 是固定定位
在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移
- 与 absolute 的区别在于，fixed 的包含元素是当前浏览器窗口
- 可以通过以下设置使元素宽度占满包含容器
```
 div {
    position: fixed;
    left: 0;
    right: 0;
}
```
- 也可以通过以下设置使元素的高度占满包含容器
```
 div {
    position: fixed;
    top: 0;
    bottom: 0;
}
```
无论页面如何滚动，fixed 元素会固定在页面的同一个位置
一般用于固定浮窗、导航条等布局

（6）sticky

sticky 是粘性定位
相当于 relative 和 fixed 的结合体
可以让元素在距离浏览器窗口一定位置时，将其变成固定在该位置
在确认元素的默认位置后，通过 top、left、right、bottom 属性来设置位置的偏移

 div {
    position: sticky;
    top: 0;
}

（7）z-index

z-index 是设置 Z 轴方向的偏移（堆叠）
默认值为 0，可以设置为负数

值越大，其元素越在更上层（优先级更高）

 #b1 {
    position: absolute;
    z-index: 10;
}
#b2 {
    position: absolute;
}

当两个元素以及其各自的包含元素都设置了 z-index 时，则这两个元素的堆叠顺序取决于包含元素的 z-index 值

0x03 Display

（1）概述

display 属性是设置元素的显示方式，会影响元素内部与外部的环境表现
当采用了 flex 布局或 grid 布局时，其中的子元素无法改成其他元素模式
显示方式包括：inline、block、flex、grid、none、contents

（2）inline

inline 是行内元素（又称内联元素）
常见行内元素包括 a、strong、span 等
本质上尽可能占最少的空间
行内元素之间没有换行，除非超出浏览器窗口宽度
行内元素的宽高、内外边距无法修改
外部环境表现为行内元素，内部环境表现为其他类型元素：
- inline-block：内部环境表现为块级元素
  - 行内元素的宽高、内外边距可以修改
- inline-flex 或 inline flex：内部环境表现为弹性盒元素
- inline-grid：内部环境表现为网格盒元素

（3）block

block 是块级元素
常见块级元素包括 div、h1~h6、p 等
每个块级元素都从新的一行开始，并且其后的元素也另起一行
块级元素的宽高、行高、内外边距都可以修改
块级元素的宽度默认为父容器的 $100$

（4）flex

flex 是弹性盒元素
当 flex 在块级元素中时，其外部环境表现为块级元素，内部环境表现为弹性盒元素
详细介绍在第 5 节中

（5）grid

grid 是网格盒元素
当 grid 在块级元素中时，其外部环境表现为块级元素，内部环境表现为网格盒元素
详细介绍在第 6 节中

（6）none

none 可以使元素“消失”，即不占用文档流
与 visibility: hidden; 的区别在于，visibility 的方式让元素不显示，但是仍然占用文档流

（7）contents

与 none 区别在于，contents 不会隐藏其中的子元素

0x04 盒子模型

（1）概述

所有的 HTML 元素都可以看作盒子
CSS 的盒模型本质上是一个盒子，封装周围的 HTML 元素
盒子模型包括：外边距 margin、边框 border、内边距 padding 和实际内容 content
每个盒子都有各自的大小和位置，并且影响其他盒子的大小和位置

（2）盒子类型

box-sizing 属性是盒子类型，用于修改盒子模型中计算宽高的方法
content-box 值是默认值，元素的宽度 = 盒子模型中 content 的宽度，元素会膨胀
border-box 值，元素的宽度 = 盒子模型中 content 的宽度 + 内边距 padding + 边框 border，元素不会膨胀

（3）其他

为保证盒子模型的稳定性，设置的优先级为：width>padding>margin
- 优先尝试设置 width，无法设置则尝试设置 padding、margin
根据样稿设计页面时，应遵循以下顺序：

0x05 Flex

https://www.bilibili.com/video/BV1BJ41197XE

（1）概述

Flex 布局是一维布局方式，按行或按列排列（行模式 / 列模式）
解决了元素对齐、分布和响应式的问题
通过对外层容器设置 display: flex; 即可开启 Flex 布局，默认按行排列

（2）行模式

行模式下，水平方向称为主轴，垂直方向称为交叉轴
改变主轴方向上的布局，可以使用 justify-content 属性，取值包括 flex-start、center、flex-end、space-around、space-between、space-evenly 等
改变交叉轴方向上的布局，可以使用 align-items 属性，取值包括 flex-start、center、flex-end

（3）列模式

通过设置 flex-direction: column; 改变 Flex 布局方式为列模式
列模式下，水平方向称为交叉轴，垂直方向称为主轴
- 其他设置项与行模式类似

（4）其他

非固定尺寸的子元素，可以通过设置 flex 属性，调整该子元素在空间中的占比

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .column {
        margin: 5px;
        padding: 20px;
        text-align: center;
        border: 3px solid black;
        border-radius: 5px;
        background-color: #1e8;
        color: white;
        font-size: larger;
      }
      .column:nth-child(2) {
        flex: 2;
      }
      #container {
        display: flex;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="column">Column 1</div>
      <div class="column">Column 2</div>
      <div class="column">Column 3</div>
    </div>
  </body>
</html>

使用 flex-basis 设置伸缩基准值
使用 flex-grow 设置扩展比率
使用 flex-shrink 设置缩小比率

0x06 Grid

（1）概述

Grid 布局是将容器划分成行列，产生单元格，并指定盒子所在的单元格
相比 Flex 的一维布局，Grid 可以看作是二维布局，更加灵活、强大
Grid 由水平线和垂直线构成
- 水平线之间称为行轨道
- 垂直线之间称为列轨道

（2）格栅

以按列布局为例

准备页面

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .column {
        margin: 5px;
        padding: 20px;
        text-align: center;
        border: 3px solid black;
        border-radius: 5px;
        background-color: #1e8;
        color: white;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div class="column">Column 1</div>
      <div class="column">Column 2</div>
      <div class="column">Column 3</div>
      <div class="column">Column 4</div>
      <div class="column">Column 5</div>
      <div class="column">Column 6</div>
    </div>
  </body>
</html>

开启 Grid 布局
```
 #container {
  display: grid;
}
```
设置按列布局，并指定每列的宽度
- 可以是固定宽度：px 等单位
```
 #container {
  display: grid;
  grid-template-columns: 150px 300px 150px;
}
```
- 也可以是浮动宽度：fr 单位
```
 #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
```
- 当需要重复设置大量相同宽度时，可以使用 repeat(次数, 宽度)
```
 #container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
```
  - 可以设置次数为 auto-fill，此时会根据父元素的宽度变化，自动调整列数
  - 可以对宽度使用 minmax(minWidth, maxWidth) 方法，此时会根据浏览器窗口的宽度变化，在指定范围中调整宽度

设置列间距

 #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 50px;
}

设置行间距

 #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 50px;
  row-gap: 50px;
}

统一设置间距

 #container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 50px;
}

（3）区域

准备页面

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .block {
        margin: 5px;
        padding: 20px;
        text-align: center;
        border: 3px solid black;
        border-radius: 5px;
        color: white;
        font-size: larger;
      }
      header {
        background-color: red;
      }
      aside {
        background-color: green;
      }
      main {
        background-color: blue;
      }
      footer {
        background-color: orange;
      }
      #container {
        display: grid;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <header class="block">header</header>
      <aside class="block">sidebar</aside>
      <main class="block">content</main>
      <footer class="block">footer</footer>
    </div>
  </body>
</html>

设置各个单元格（区域）的内容

 #container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

为每个块命名

 header {
  background-color: red;
  grid-area: header;
}
aside {
  background-color: green;
  grid-area: sidebar;
}
main {
  background-color: blue;
  grid-area: content;
}
footer {
  background-color: orange;
  grid-area: footer;
}

（4）对齐

Grid 的对齐方式与 Flex 布局类似，有水平方向上的行轴，有垂直方向上的块轴
在垂直方向上对齐子元素，可以使用 align-items 属性，取值包括 start、center、end 等
在水平方向上对齐子元素，可以使用 justify-items 属性，取值包括 start、center、end、space-between 等
当行轨道和列轨道的尺寸小于使用 Grid 布局的容器时，可以设置与轨道对齐
- 水平方向上，使用 align-content 属性
- 垂直方向上，使用 justify-content 属性

0x07 响应式布局

响应式布局特点：确保页面在任何终端都能达到合适的显示效果
响应式布局设计单位：% 或 rem
响应式布局主要依靠媒体查询
媒体查询又称媒介查询，用于为不同尺寸的屏幕设定不同的 CSS 样式
媒体查询常用参数

属性名称说明

width 浏览器可视宽度

height 浏览器可视高度

device-width 设备屏幕的宽度

device-height 设备屏幕的高度

属性名称	说明
`width`	浏览器可视宽度
`height`	浏览器可视高度
`device-width`	设备屏幕的宽度
`device-height`	设备屏幕的高度

举例，根据屏幕尺寸变化，调整 div 背景颜色

 div {
  width: 50rem;
  height: 50rem;
}
@media screen and (min-device-width: 1px) and (max-device-width: 400px) {
  div {
    background-color: red;
  }
}
@media screen and (min-device-width: 401px) and (max-device-width: 800px) {
  div {
    background-color: green;
  }
}

-End-

上一篇SEO — 搜索引擎优化

下一篇Less

本文作者：SRIGT

本文链接：https://www.cnblogs.com/SRIGT/p/18113607

posted @ 2024-04-03 21:59 SRIGT 阅读(47) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

SRIGT

CSS 布局专题

0x01 浮动布局

（1）常见网页布局

（2）浮动布局概述

（3）使用浮动布局实现常见网页布局

0x02 定位布局

（1）概述

（2）static

（3）relative

（4）absolute

（5）fixed

（6）sticky

（7）z-index

0x03 Display

（1）概述

（2）inline

（3）block

（4）flex

（5）grid

（6）none

（7）contents

0x04 盒子模型

（1）概述

（2）盒子类型

（3）其他

0x05 Flex

（1）概述

（2）行模式

（3）列模式

（4）其他

0x06 Grid

（1）概述

（2）格栅

（3）区域

（4）对齐

0x07 响应式布局

随笔分类

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style>
	div {
	width: 33%;
	height: 200px;
	float: left;
	}
	#b1 { background: red; }
	#b2 { background: green; }
	#b3 { background: blue; }
	</style>
	</head>
	<body>
	<div id="b1"></div>
	<div id="b2"></div>
	<div id="b3"></div>
	</body>
	</html>

	#b1 {
	position: absolute;
	z-index: 10;
	}
	#b2 {
	position: absolute;
	}

	#container {
	display: grid;
	grid-template-columns: 150px 300px 150px;
	}

	#container {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	}

	#container {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	}

	#container {
	display: grid;
	grid-template-areas:
	"header header header"
	"sidebar content content"
	"footer footer footer";
	}

	header {
	background-color: red;
	grid-area: header;
	}
	aside {
	background-color: green;
	grid-area: sidebar;
	}
	main {
	background-color: blue;
	grid-area: content;
	}
	footer {
	background-color: orange;
	grid-area: footer;
	}

	div {
	width: 50rem;
	height: 50rem;
	}
	@media screen and (min-device-width: 1px) and (max-device-width: 400px) {
	div {
	background-color: red;
	}
	}
	@media screen and (min-device-width: 401px) and (max-device-width: 800px) {
	div {
	background-color: green;
	}
	}