盒子模型

Posted 2022-05-16 shihaiying

今天要写的是CSS布局—盒子模型

首先说一下CSS的整体布局：

它包括容器（container），页眉（header），导航条（navbar），页面主要内容（main），菜单（menu），主要内容（content），边条（sidebar），页脚（footer）。

具体图下图所示：

㈠概念与组成

1.页面上区域，图片，导航，列表，段落都可以是盒子。

2.页面中的所有元素都可以看成一个盒子，占据着一定的页面空间。

3.组成：内容（content），高度（height），宽度（width），边框（border），内边距（padding），外边距（margin）

如下图所示：

 

4.一个盒子的实际宽度，高度：content+padding+border+margin

用一个实例在具体看一下，如下图所示：

 

㈡overflow属性

*当内容溢出盒子框的时候，overflow属性取值

⑴hidden：超出部分不可见

⑵scroll：显示滚动条

⑶auto：如有超出部分，显示滚动条（浏览器自动判断） 

 

㈢border属性

⑴border-width：px（像素）,thin（细）,medium（中等）,thick（粗）

⑵border-style：dashed（一个个横线组成）,dotted（点组成）,solid（实线）,double（双实线）

⑶border-color：颜色

⑷border：顺序：width，style，color

用代码显示具体如下;

 

⑸用border属性作出水平分割线

 

 

㈣padding与margin属性

1.对浏览器默认的设置清零，采取全局声明

注意：属性的取值，只有当它取值为零的时候，才可以省略它的单位，其他情况是不可以的。

 

2.取值：px，%（外层盒子的宽度和高度）

 

㈤margin的缩写

margin每个方向分量的值设定是如何省略的呢？

      省略                                                                     拆开后

⑴margin：1px；                                       margin：1px 1px 1px 1px；

⑵margin：1px 2px；                                margin：1px 2px 1px 2px；

⑶margin：1px 2px 3px；                         margin：1px 2px 3px 2px；

⑷margin：1px 2px 1px 3px；                  margin：1px 2px 1px 3px；

详细解释一下;

⑴第一个是四个方向取值相同，外边距四个方向都是一个像素

⑵第二个是简写形式，省略后两个值，表示上与下相等，左与右相等

⑶第三个是第四个值省略，表示左与右相等

⑷第四个注意，这里虽然上下边距都为1px，但是这里不能缩写，如果缩写，位置会发生变化，值的设定就错了

 

*四个方向有顺序为：上右下左，顺时针，如图所示

 

㈥margin的案例

以margin属性为例来进行盒子模型的属性设定

 

 

这个代码用两个div标签规定了两个盒子，起两个名字，定义他们共同的样式，这个样式的名字用div标签来进行定义，div标签作为样式的名字，内部定义了它的内容的高度，宽度，外边距，边框四个属性。

 

★用margin属性来进行盒子的设定的时候注意两点：

⑴div标签做盒子的时候，有一个特点，每一个div标签做出来的盒子，有一个换行的效果，就是它会独占一行。

⑵显示结果的这个上下边距是什么样的？

margin的合并：垂直方向合并，水平方向不合并。合并的结果是哪一个高度更高，合并结果就是哪一个高度。

如下图所示：

 

㈦margin属性设置水平居中

⑴图片，文字水平居中：text-align：center；

⑵div水平居中：margin：0 auto；浏览器自动计算   

其中，0设置的是上侧和下侧的值，可以任意；auto设置的是左侧和右侧的取值，设定为auto

 

 

★案例示意：

⑴首先是HTML部分如下图所示：

 

⑵重点说一下CSS部分

我们用“#”开头来定义这个外层盒子的样式，为了让所有图片都居中，用文字和图片的统一的居中的方式，就是text-align来进行设置，将它设置成center，图片就在这个列表里面水平居中了。图片在添加时会发现默认每两个图片之间有一定的空白的距离，它不是margin属性设定出来的距离，而是这个图像框里面默认的情况下，会有一个文字的浏览器默认设定的空白距离，这个距离如何去掉？如下面第二张图所示。再下面我们要设置的是每幅图片它的样式，用一个嵌套的结构，选择嵌套选器，首先我们要位于这个图像框里面的图片，我们来应用下面的样式，每个图片100×10这样的高度和宽度，然后我们将它的每幅图片的左侧都设定成一个外边距5个像素 ，然后它的边框设定成一个像素的实线浅蓝色。由于图片和边框之间需要一定的空白距离，把padding属性设置一下，四个方向上都是5个像素，这样图像框就做好了。

 

 

 

⑶如何去掉这个空白距离？如图所示：

 

 

   以上就是盒子模型相关知识，希望可以有所帮助。