码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2020-05-01 20:53:15      阅读:87      评论:0      收藏:0      [点我收藏+]

标签:bsp   现在   元素   内容   不同   注意   图片   ott   设置   

(编程新手)

 

每个html元素(标签)可以看作一个盒子。从里到外分别是:内容, 内边距, 边框, 外边距.

 

01内容区

 

最原始的width和height设置的是内容的大小。

 

子元素只会出现在内容区里面。

 

02边框

 

设置边框接触到了三个属性。分别是:border-style,border-width,border-color。

 

为这三个属性设置值的时候,可以设置1-4个不等。

不同值使用空格分隔。

4个值,按照从前到后的顺序分别是上,右,下,左(顺时针)。

3个值,按照从前到后的顺序分别是: 上, 左右, 下。

2个值,按照从前到后的顺序分别是: 上下, 左右。

1个值,表示上下左右。

 

03内边距

 

背景,图片的范围是内容+内边距。

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

 

04外边距

外边距是当前盒子与盒子的距离

margin-top

margin-right

mergin-bottom

margin-left

 

值可以设置负数。

值可以是auto

注意:外边距的设置会影响其他盒子的位置。

比如一个盒子向上移,这个盒子下面的元素也会跟着这个元素向上移动。

 

垂直外边距的重叠。

元素之间相邻外边距取最大值。而不是双方外边距之和。

比如一个盒子下外边距设置为100px,这个盒子下面相邻盒子的上外边距也设置为100px

这两个盒子的边距取最大值,即100px而不是这两个边距的和,即200px。

盒子模型

标签:bsp   现在   元素   内容   不同   注意   图片   ott   设置   

原文地址:https://www.cnblogs.com/JuniorProgramer/p/12814451.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!