HTML盒子模型都包括什么最全攻略来了

1.HTML盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型,指在一个网页文档中,每个元素都被呈现为一个矩形的盒子,描述了元素所占空间的内容。盒模型的组成:content(内容区)+padding(填充区)+border(边框区)+margin(外界区)。

2.盒子模型--边框设置

1)border-width边框的粗细

2)border-style边框的样式,有三个参数:olid实线dashed虚线dotted点状线条

)border-color边框的颜色

举例:我们有一个高宽均为像素的盒子,将这个盒子的边框粗细设置为2像素、实线,颜色为红色(如下图)

4)盒子边框的复合写法:font:边框粗细、边框样式、边框颜色

.盒子模型--内边距的设置

1)padding-left左边距的距离

2)padding-right右边距的距离

)padding-top上边距的距离

4)padding-bottom下边距的距离

5)盒子模型内边距的复合写法:

padding:5px;写一个值代表着上下左右全部是5像素

padding:5px;10px;写两个值代表着上下5像素、左右10像素

padding:5px;10px;5px;写三个值代表着上5像素、左右10像素、右5像素

padding:5px;10px;5px;10px;写四个值代表着上5像素、右10像素、下5像素、左5像素(顺时针)

4.盒子模型--外边距的设置

1)margin-left左边框

2)margin-right右边框

)margin-top上边框

4)margin-bottom下边框

5)复合书写模式与内边距的写法一致

5.清除内外边距的方法:

*{padding:0;margin:0;}

6.清除li标签中的圆点的方法:

list-style:none




转载请注明:http://www.aierlanlan.com/rzgz/7594.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了