CSS（5）布局初步

1.CSS布局思路及核心知识点

布局思路：

思考网页的信息语义和结构。根据这些信息把一个网页分成不同的内容块，以及每块内容的目的，然后再根据这些内容的目的用不

同的语义元素建立相应的HTML结构。

核心知识点：

盒模型（流动布局）

浮动（浮动布局）

定位（层布局）

----------------------------------------------------------------------------------------------------------------------------------------------------------

2.盒模型概念

从日常生活中出发，在我们的HTML中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性来控制它的显示外

观。具体来说，有如下一些属性：

width: 宽度

height：高度

border：边框

padding：内边距 补白

margin：外边距 边界

background：背景

----------------------------------------------------------------------------------------------------------------------------------------------------------

(1).什么是盒模型？

CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背

景图片），这就是盒模型。

快速体验：

我们可以利用一些空间来查看盒模型的具体表现：

浏览器的开发者工具（F12）

Dreamweaver软件

----------------------------------------------------------------------------------------------------------------------------------------------------------

(2).盒模型中的属性的基本用法

a.width和height

它们表示元素的宽度和高度。不是指整个盒子所占据的空间。

在设置的时候，通常使用px来进行，如果要实现响应式，则可以使用百分比。

----------------------------------------------------------------------------------------------------------------------------------------------------------

b.border设置

border右三部分构成：

边框的粗细

边框的样式

边框的颜色

三个子属性之间使用空格隔开，顺序没有要求，但尽量按照粗细、样式、颜色的顺序来书写。

当我们写border:5px solid red的时候，意味着四条边都有相同的样式。

如果需要设置不同的边框，怎么办？

可以分开来进行设置：

border-top

border-right

border-bottom

border-left

如图：

----------------------------------------------------------------------------------------------------------------------------------------------------------

c.padding

表示的内边距，或者补白。

所处的区域是指 border和内容之间的那个空间。

如果我们只写一个属性值的时候，意味着四个方向上的内边距都是一样的。

但是在实际开发时，需要设置不同的内边距。怎么办？

可以单独的设置四个方向上的padding值

padding-top:

padding-right:

padding-bottom:

padding-left:

实际上，还有简写的方式，

在设置padding属性值的，可以按照上、右、下、左的顺序来设置四边的padding值。

怎么记这个顺序：

顺时针，从12点开始

TRouBLe，T-top R-right B-bottom L-left

如果padding-top和padding-bottom相同，并且padding-right和padding-left相同的话，我们可以简写：padding: tb rl

还有一种情况：

上下padding不同，左右padding相同

小结：

关于padding的属性值，有四种写法：

只有一个值  上、右、下、左都相同

有两个值：上下是相同的，左右是相同的

有三个值：上下不同，第一个值对应的上，第二个值表示的左右，它们是相同的，第三个值表示下，（这个容易搞错）

有四个值：分别对应于上、右、下、左。

它们都是空格隔开

----------------------------------------------------------------------------------------------------------------------------------------------------------

d.margin

用来设置外边距的。

看似对当前的盒子没什么大的影响，实际上不是的。

我们在计算当前盒子在整个页面中所占空间的时候，是必须要考虑margin 的。

和padding的使用差不多。

margin的写法也有如下几种：

一个值

两个值

三个值

四个值

当然，和padding一样，也可以单独的设置四个方向上的margin值

margin-top

margin-right

margin-bottom

margin-left

关于margin还有一个技巧，可以实现水平居中效果。

----------------------------------------------------------------------------------------------------------------------------------------------------------

e.background

设置盒子的背景。

包括如下两种：

背景颜色

背景图片

背景图片的使用：

----------------------------------------------------------------------------------------------------------------------------------------------------------

小结：