CSS布局

本文最后更新于：2023年2月28日 下午

1. 长度单位

2. 传统盒模型布局

盒模型

设置外边距margin和内边距 padding

1
2
3
4
5
6
/* 设置宽度 */
<margin/padding>: 25px 50px 75px 100px; /* 上、右、下、左 */
<margin/padding>: 25px 50px; /* 上下、右左 */
<margin/padding>: 25px; /* 全部 */
margin: auto; /* 自动分配剩余空间，水平居中 */
margin-left: auto; /* 水平居右 */

设置边框border

1
2
3
4
5
borer: 2px dashed red; /* 设置宽度、样式、颜色 */
border-width: 2px /* 设置宽度 */
border-style: dashed; /* 设置样式 */
border-color: red; /* 设置颜色 */
border-radius: 5px; /* 设置圆角 */

设置盒模型

1
width: 100px; /* width 默认为 content */
1
2
3
4
5
width: 100px; /* width = border + padding + content 设置 box-sizing: border-box 后 */
/* box-sizing属性 */
box-sizing: border-box; /* border + padding + content */
box-sizing: content-box; /* content */
box-sizing: inherit; /* 继承父元素box-sizing属性 */

正常布局流/display

正常布局流 (Normal Flow)

把HTML中的元素以盒子模型的形式按块级元素 (Block-level elements)和行内元素 (Inline elements)展示。

1
2
3
4
5
6
7
/* 
display属性: 改变HTML元素的默认显示类型
HTML元素都有自己的默认display属性: inline/block
*/
display: inline/block; /* 转变元素的块级或行内属性 */
display: none; /* 元素不存在，不占用布局空间，结合js隐藏显示元素 */
display: inline-block; /* 像行内元素一样，但允许在元素上设置宽度和高度 */

定位/position

可以通过定位来让元素脱离正常布局流，拥有其他的定位属性。

1
2
3
4
5
6
7
8
/* 
position属性: 改变HTML元素的默认显示类型，根据显示类型通过top、bottom、left、right属性改变元素定位 
*/
position: static; /* 默认 静态定位，满足正常布局流t,b,l,r无效 */
position: relative; /* 相对定位，相对于正常布局流中位置(static)定位 */
position: fixed; /* 固定定位，相对于视口定位。处于浏览器窗口区域的固定位置，与页面无关，不随页面滚动 */
position: absolute; /* 绝对定位，相对于上级元素(一直向上回溯至非static定位的父元素，直到<html>) */
position: stickey;

溢出/overflow

1
2
3
4
overflow: visible;	/* 默认值。内容不会被修剪，会呈现在元素框之外。 */
overflow: hidden	/* 内容会被修剪，并且其余内容是不可见的。 */
overflow: scroll	/* 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 */
overflow: auto	/* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */

3. 弹性盒子布局

弹性盒子 (flexible box) 布局的基本概念

主轴(main axis)、交叉轴(cross axis)、起始线(start)、终止线(end)

1
2
3
4
5
display: flex; /* 指定为flex布局 */
flex-direction: row|row-reverse|column|column-reverse
/*
row: 主轴为行，交叉轴为列，起始线为左
*/

其它属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
flex-wrap: wrap|nowrap|wrap-reverse; /* 是否允许换行 */ 
flex-flow: row wrap; /* flex-direction + fles-wrap */

/* 
控制可用空间的分布
一个flex子项是由元素自身尺寸(flex-basis/width/box-sizing),外部填充(flex-grow)或收缩(flex-shrink)规则共同决定 
*/
flex: ; /* flex-grow flex-shrink flex-basis */
/* flex-basis优先级高于width,默认auto时取决于width/box-sizing */
flex-basis: auto|100px;
/* 按比例分配可用空间 */
flex-grow: 1;
/* 在默认宽度之和大于容器时收缩 */
flex-shrink: 0.6;

4. 网格布局

参考资料

软件工程
前端 html/css/js

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！