盒模型的组件和注意事项

盒模型,包括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。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,913评论 1 91
  • 1、盒子中的区域 一个盒子中主要的属性有5个:width、height、padding、border、margin...
    biglemon阅读 311评论 0 1
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 981评论 0 0
  • 整理不是收纳,整理是修行。 整理从物品开始,从内心结束。 整理看起来由外而内,实则由内而外。 踏踏实实整理,稳稳当...
    段小喵与整理阅读 75评论 0 0
  • 晚山青,两行烟柳娉婷。草迷离,花红叶翠,南风笑依长坪。傍春归,流连香砌,湘妃去、竹涧滴翎。杜宇嘤嘤,娇莺婉转...
    鼹鼠白阅读 51评论 0 0