CSS文档流布局以及盒子模型_CSS学习

资料来源：网络整理时间：2023/3/4 1:05:56 共计：3610 浏览

页面布局 layout

文档流（normal flow）网页是一个多层结构，一层叠着一层。通过CSS可以分别为每一层设置样式，而我们作为用户之只看到最上面这层在这些层中，最底下的一层被称为文档流，文档流是网页的基础。我们所创建的元素默认都是在文档流中的。元素在页面中主要有两个状态：1、在文档流中2、不在文档流中（脱离文档流）元素在文档流中的特点：块元素：

块元素在文档流中独占一行，块元素在页面中独占一行
默认宽度是父元素的全部（会把父元素撑满）
默认高度被内容撑开（子元素）

行元素：

行内元素不会独占页面一行，只占自身大小；
行内元素在页面中水平向右排列，如果一行之中不能容纳的下所有行内元素，则元素会换到第二行继续自左向右排列。
行内元素默认的高度和宽度都是被内容撑开。

盒子模型（box model）

盒子模型（框模型）：CSS将页面中的所有元素都设置为一个矩形的盒子，将所有元素设置为矩形盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。每一个盒子都由以下几个部分组成。

内容区	content
内边距	padding
边框	border
外边框	margin

注意：content、padding、border决定了盒子的大小，而外边距 margin 决定了盒子的位置。

一、内容 content

内容区（content）元素中的所有子元素和文本内容都在内容区中排列，内容区的大小由 width和height 来决定。

width、height属性用以设置内容区的宽度和高度

二、边框 border

边框（border）边框属于盒子边缘，边框里面属于盒子的内部，出了边框都是盒子的外部，要设置边框至少需要三个样式。

边框的颜色 border-width
边框的颜色 border-color
边框的样式 border-style

1、 border-width 有默认值，一般是3个像素（必须写，会使用各个浏览器的默认值）

border-width可以用来指定四个方向的边框宽度

四个值：上、右、下、左（顺时针方向）border-width: 1px 2px 3px 4px;
三个值：上、左右、下 border-width: 1px 2px 3px
两个值：上下、左右 border-width: 1px 2px
一个值：上下左右（四个边） border-width: 1px

除了border-width 还有一组 border-xxx-width，xxx可以是 top、right、left、bottom，用来单独指定某一个边的宽度

2、 border-color 用来指定边框的颜色，同样可以分别指定四个边的边框，规则和 border-width 相同

border-color 可以省略不写，如果省略了就会自动使用 color的默认值

3、 border-style 指定边框的样式，不可以不设置，因为border-style的默认值是 none（没有）

solid 实线
dotted 点状虚线
dashed 虚线
double 双实线

border 简写属性：

border 通过设置该属性可以同时设置边框所有的相关样式，并且没有顺序要求

除了border 之外还有四个 border-xxx

border-top
border-right
border-bottom
border-left

三、内边距 padding

内容区和边框之间的距离是内边距

一个有四个方向的内边距

padding-top
padding-left
padding-bottom
padding-left

内边距的设置会影响盒子的大小

背景颜色会延伸到内边距上，内边距默认是透明的 transparent

一个盒子的可见框大小，由内容区、内边距、边框共同组成，所以在计算盒子大小的时候，需要将这三个加到一起计算。

padding 内边距的简写属性，可以同时指定四个方向的内边距。

四、margin 外边距

外边距不会影响可见框的大小，但是外边距影响的是盒子的位置。影响实际占用网页空间的大小。元素有四个方向的外边距：

margin-top
margin-left
margin-right
margin-bottom

注意：默认情况下设置 margin-right 不会产生任何效果

left 左外边距，设置正值，元素会向右边移动；top 上外边距，设置正值，元素会向下移动

元素在页面中会按照自左向右顺序排列，所以默认情况下如果设置的是左上，移动的是元素自身。

设置其他下和右外边距会移动其他元素，把别的元素挤开。margin-top 和 margin-left挤开别人

margin-bottom 下外边距，设置正值，下边的元素会向下移动，如果是负值元素会向相反的方向移动。

简写属性

margin 直接设置四个边的外边距

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS样式继承和样式权重_CSS学习 | ·下一条：用opacity设置元素背景的透明度_CSS学习