当前位置:   article > 正文

CSS盒子模型[盒子模型分为哪几部分?/ 内容区/内边距/边框/边框样式/外边距/]_css盒子模型由哪几部分组成盒子的宽度是由哪些内容组成

css盒子模型由哪几部分组成盒子的宽度是由哪些内容组成

盒子模型解释

元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式

``
在这里插入图片描述

盒子模型分为哪几部分?

一个盒子模型分成几部分:
	- 内容区(content)
	- 内边距(padding)
	- 边框(border)
	- 外边距(margin)
  • 1
  • 2
  • 3
  • 4
  • 5

内容区

内容区:盒子中放置内容的区域,也就是元素中的文本内容,子元素都是存在于内容区中的。

如果没有元素设置内边距和边框,则设置内容大小偶人和盒子大小一致
  • 1
  • 2
  • 3
通过width 和height 两个属性可以设置内容的大小
  • 1
width 和height属性值适合用于块元素
  • 1

内边距

内边距:元素内容区与边框以内的空间
  • 1
默认情况下width和height不包含padding的大小
            
  • 1
  • 2
使用padding属性来设置元素的内边距
举例:
	-padding:10px 20px 30px 40px;
	这样会设置元素的  上,右,下,上   四个方向的内边距。(按照顺时针方向)
	
	padding:10px 20px 30px;
	分别指定   上,左右,下  四个方向的内边距
	
	padding:10px 20px;
	分别指定    上下,左右    四个方向的内边距
	
	padding:10px ;
	分别指定   上左下右   四个方向的内边距
	同时在CSS中还提供padding-top  padding-right  padding-left  padding-bottom
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

边框

可以在元素周围创建边框,边框是元素可见的最外部
  • 1
可以使用border属性来设置盒子的边框:
-border:1px red solid;
上边的样式分别指定了边框的  宽度 ,颜色,样式
  • 1
  • 2
  • 3
也可以使用border-top/left/right/bottom分别指定   上右下左   四个方向的边框

和padding一样,默认width 和height 并包括边框的宽度
  • 1
  • 2
  • 3

边框样式

边框样式可以设置多种样式:
-none(没有边框)
-dotted(点线)
-dashed(虚线)
-solid(实线)
-double(双线)
-groove(槽线)
-ridge(脊线)
-inset(凹线)
-outset(凸线)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

外边距

外边距是原素边框与周围元素相距的空间
  • 1
使用margin属性可以设置外边距
  • 1
用法和padding 类似,同样也提供了四个方向的
margin-top/right/bottom/left
  • 1
  • 2
当将左右外边距设置为auto时,浏览器会将左右外边距设置为相等,所以这行代码   margin:0 auto 可以使元素居中 
  • 1
margin   在一个声明中设置所有外边距属性。
margin-top    设置元素的上外边距。
margin-bottom  设置元素的下外边距。
margin-left    设置元素的左外边距。
margin-right   设置元素的右外边距。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/630946
推荐阅读
相关标签
  

闽ICP备14008679号