欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

盒模型的组件和注意事项_html/css_WEB-ITnose

程序员文章站 2023-12-30 15:51:16
...
盒模型,包括content(width+height)、padding、border、margin四部分,具体视图如下:

平时使用chrome的开发者模式进行调试的时候,每个盒模型都会像上图一样被列出来,方便我们找出bug所在。(另外,还可以直接在开发者模式里增减修改代码,实时观测页面变动,方便快捷)

content:即上图padding下虚线里的部分,在盒模型里输入的内容会在里面显示。

padding:内边距,会增大盒子面积,赋值从上开始顺时针进行,具体如下--

1.当只有一个值的时候,四周都是一样的内边距;

2.当只有两个值的时候,第一个值控制上下,第二个值控制右左;

3.当有三个值的时候,第一个值控制上,第二个值控制右左,第三个值控制下;

4.当有四个值的时候,按照padding赋值原则进行。

例如padding: 10px 20px 30px 40px;即padding-top :10px;padding-right:20px;padding-bottom:30px;padding-left:40px.

border:是外嵌的,会增大盒子的面积。细分出的属性有很多,例如--

border-width: 2px;

border-style: dashed;

border-color: cyan;

border-top-radius:10px;

.....

经常用的属性可以汇在一起写,即border:宽度 线型 颜色。

线型一般有:solid(实线)、double(双实线)、dashed(虚线)、dotted(点线)。

颜色一般用三种方式表示:直接赋值(color:black);十进制赋值(rgb(12,45,3);十六进制赋值(#2fe800).

注意:使用padding和border时注意相应减少盒子的宽高值(宽/高-padding/border-width*2)

盒子面积s =(border-left-width+padding-left+width+border-right-width+padding-right)*(border-top-width+padding-top+height+padding-bottom+border-bottom-width)

margin:外边距,设定与周围元素的距离。赋值顺序同padding。

注意:同级块属性使用margin会出现上下叠压现象,即两者间距离取决于margin值大者。如果是使用了float或者display属性从而同排显示的话,两者的距离为其margin值之和。

当块属性层级结构为父子级时,当对第一个子级使用margin-top时,效果会转移到父级,即相当于对父级设置了margin-top。

解决方法--

1.为父级添加一个border,但是会增加计算量,拓展性受到一定的限制;

2.为父级添加一个属性,overflow: hidden;

3.不使用margin-top,对父级使用padding-top。

上一篇:

下一篇: