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
- 优先尝试设置
根据样稿设计页面时，应遵循以下顺序：
graph LR
A[建立 HTML 结构]-->选择布局方式-->设置行内元素-->确定盒子类型-->设置宽高-->设置内外边距
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设备屏幕的高度 举例，根据屏幕尺寸变化，调整
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-
CSS 布局专题的更多相关文章
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- CSS浮动专题!
在css中,浮动问题可能是很多刚入门的小白比较头疼的问题. 1,首先先来介绍一下两种浮动类型:左浮动和右浮动 1) float:left;左浮动,后面的内容会流向对象的右侧 2) float:righ ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局经典—圣杯布局与双飞翼布局
在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- CSS篇之DIV+CSS布局
<div></div> div与其他标签一样,也是一个XHTML所支持的标签. div是XHTML中指定的,远门用于布局设计的容器标记. 简单的CSS布局 头部 内容 页脚 & ...
- CSS 布局口诀
body { font-family: Segoe UI,"Microsoft YaHei", Georgia,Helvetica,Arial,sans-serif,宋体, PMi ...
随机推荐
- C++11的类型转换
//C类型转换 /* C语言:显式和隐式类型转换 隐式类型转化:编译器在编译阶段自动进行,能转就转,不能转就编译失败 显式类型转化:需要用户自己处理. 隐式类型:界定:相关类型,相近类型,意义相似的类 ...
- Java 常见的两个错误 -------1.栈溢出 java.lang.StackOverflowError 2.堆溢出 java.lang.OutOfMemoryError /OOM
1 package com.bytezero.exception; 2 3 /** 4 * 5 * @Description Error 6 * @author Bytezero·zhenglei! ...
- C#拾遗补漏之goto跳转语句
前言 在我们日常工作中常用的C#跳转语句有break.continue.return,但是还有一个C#跳转语句很多同学可能都比较的陌生就是goto,今天大姚带大家一起来认识一下goto语句及其它的优缺 ...
- 最小生成树（二）Prim算法
一.思想 1.1 基本概念 加权无向图的生成树:一棵含有其所有顶点的无环连通子图. 最小生成树(MST):一棵权值最小(树中所有边的权值之和)的生成树. 1.2 算法原理 1.2.1 切分定理 切分定 ...
- 微型跟踪器A产品体验和分析
跟踪器 这些年随着智能硬件的快速发展,各种新型的智能硬件层出不穷.在一个不起眼的赛道上,跟踪器的赛道一直比较沉寂,在这个一年几千万美金的市场上,玩家是有点少,产品更新不是很快.最近由于项目需要 ...
- 关于api的表优化及代码优化小结
提示:近期有空整理下mysql设计注意点吧 文章目录 一.表设计方面 二.代码设计方面 总结 一.表设计方面 建表要求三范式 5个必须字段is_del,create_time(CURRENT_TIME ...
- 优雅的处理挂载window上的函数可能不存在的情况
背景 在做一个Web JS SDK(A)时,内部会用到另一个Web JS SDK(B)的方法.(文中后续用A/B代替两者) B通常会提供Script和NPM包两种使用方式 使用npm pkg的缺点 增 ...
- 虚幻引擎UE4如何实现打包后播放片头？其实超简单！
虚幻引擎作为一款全球性的3D实时开发工具,不仅在游戏行业,其在建筑.影视.医疗等行业也被广泛使用.作为开发人员,有时开发的UE虚幻引擎项目比较大,开始运行项目时需要等待较长的时间,还有些公司要求添加片 ...
- 开源推荐｜简洁且强大的开源堡垒机OneTerm
在运维的日常工作中,登陆服务器操作不可避免,为了更安全的管控服务器,但凡有点规模的公司都会上线堡垒机系统,堡垒机能够做到事前授权.事中监控.事后审计,同时也可以满足等保合规要求.提到堡垒机,大伙第一时 ...
- .Net实现Html保存到照片
本文将使用PuppeteerSharp组件.实现Html代码片段生成Jpg照片 PuppeteerSharp项目地址:https://github.com/hardkoded/puppeteer-sh ...