2.4 CSS盒模型_HTML视频教程

- 灬无言 - 阅 1,681

小小课堂网HTML视频教程零基础入门首选。

下方为HTML视频教程,如视频不能正常播放,请安装flash或更换浏览器。请记得在视频右下角选择“超清”,然后点击“全屏”,效果更加。

2.4.1 盒模型简介

CSS盒模型组成:元素内容、内边距、边框和外边距。

从内到外依次是 元素内容、内边距、边框、外边距,如图所示:

border的宽度不计入height和width

padding的背景颜色和元素内容的是一样。都是background控制的,不用单独设置。

2.4.2 内边距

内边距属性如下:

  • 上内边距:padding-top
  • 右内边距:padding-right
  • 下内边距:padding-bottom
  • 左内边距:padding-left
  • 简写属性:padding 顺序 上右下左

例:

padding:40px 30px 20px 10px;

2.4.3 边框

元素的边框是围绕元素内容和内边距的一条或多条线。

规定元素边框的样式、宽度和颜色。

边框分类:上下左右边框 top bottom left right  故属性较多,但易理解。忌机械记忆。

CSS盒模型

边框常用样式值如下表:

CSS盒模型

2.4.4 外边距

外边距属性如下:

  • 上外边距:margin-top
  • 右外边距:margin -right
  • 下外边距:margin -bottom
  • 左外边距:margin -left
  • 简写属性:margin顺序 上右下左

例:

margin:40px 30px 20px 10px;

2.4.5 外边距合并

外边距合并:当两个垂直外边距相遇时,它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。不是简单叠加。

例:

#div1{

margin-bottom:20px;

}

#div2{

margin-top:10px;

}

这个例子中div1和div2上下相邻,那么它们之间的外边距就是20px,而非30px。

图文不够清楚?请观看小小课堂网HTML视频教程

扫描二维码关注“小小课堂网”

第一时间获取最新教程

二维码

6

本文转载 " https://www.xxkt.org/1568 "

原文地址 " 小小课堂网原创教程。未经许可,禁止转载。否则,将追究法律责任! "

相关文章!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

error: Content is protected !!