前端开发基础入门篇——CSS布局
1. CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容)：盒子的内容，显示文本和图像。
我们可以设置内容区域的宽度和高度。完整大小的元素，你还必须添加内边距，边框和边距。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
2. 盒子布局属性
CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
其中border-style 值:
1）none: 默认无边框
2）dotted: 定义一个点线边框
3）dashed: 定义一个虚线边框
4）solid: 定义实线边框
5）double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
6）groove: 定义3D沟槽边框。效果取决于边框的颜色值
7）ridge: 定义3D脊边框。效果取决于边框的颜色值
8）inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
9）outset: 定义一个3D突出边框。 效果取决于边框的颜色值
单独设置边框各边：border-left、border-right、border-top、border-bottom。
CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。
| 属性 | 说明 |
|---|---|
| outline | 简写属性。在一个声明中设置所有的轮廓属性 |
| outline-color | 设置轮廓的颜色 |
| outline-style | 设置轮廓的样式 |
| outline-width | 设置轮廓的宽度 |
CSS margin(外边距)
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
属性取值可以为：
1）auto：这样设置浏览器边距，结果会依赖于浏览器。
2）length：定义一个固定的margin（使用像素，pt，em等）。
3）%：定义一个使用百分比的边距。
CSS padding（填充）
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
CSS 尺寸 (Dimension)
| 属性 | 描述 |
|---|---|
| height | 设置元素的高度。 |
| line-height | 设置行高。 |
| max-height | 设置元素的最大高度。 |
| max-width | 设置元素的最大宽度。 |
| min-height | 设置元素的最小高度。 |
| min-width | 设置元素的最小宽度。 |
| width | 设置元素的宽度。 |
CSS Display(显示)
块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：和相邻的内联元素在同一行; 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom (margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
CSS Position(定位)
1）display:block -- 显示为块级元素
2）display:inline -- 显示为内联元素
3）display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
position 属性的五个值：static、relative、fixed、absolute、sticky
1）static定位：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
2）fixed 定位：元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。
3）relative 定位：相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。
4）absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位的元 素可以和其他元素重叠。
5）sticky 定位：sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动。
CSS Overflow
overflow 属性用于控制内容溢出元素框时显示的方式。可以控制内容溢出元素框时在对应的元素区间内添加滚动条。Overflow可以的取值:
| 取值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
CSS Float(浮动)
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。浮动的取值：left、right、none、inherit。
以元素的水平方向浮动为例，元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。
- 点赞
- 收藏
- 关注作者
评论（0）