盒模型的组件和注意事项_html/css_WEB-ITnose
平时使用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。
推荐阅读
-
关于盒模型的理解_html/css_WEB-ITnose
-
免费使用!20款精致优质的HTML网站模板和小组件下载_html/css_WEB-ITnose
-
10_Android中通过HttpUrlConnection访问网络,Handler和多线程使用,读取网络html代码并显示在界面上,ScrollView组件的使用_html/css_WEB-ITnose
-
面向对象的CSS的作用和注意事项_html/css_WEB-ITnose
-
面向对象的CSS的作用和注意事项_html/css_WEB-ITnose
-
盒模型的问题_html/css_WEB-ITnose
-
CSS盒模型中“内容区域”的问题~高分求教!_html/css_WEB-ITnose
-
想要清晰的明白(一): CSS视觉格式化模型|盒模型|定位方案|BFC_html/css_WEB-ITnose
-
IE6定位盒模型的偏差问题_html/css_WEB-ITnose
-
Webview组件和HTML的介绍_html/css_WEB-ITnose