2.4 CSS盒模型_HTML视频教程

- 灬无言 - 阅 2,112

小小课堂网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。

以上就是小小课堂SEO自学网带来的《2.4 CSS盒模型_HTML视频教程》。感谢您的观看。SEO优化培训认准小小课堂!

非特殊说明,本文为小小课堂SEO自学网原创,欢迎转载并保留版权 https://www.xxkt.org/

本站提供SEO培训、咨询、诊断,微信(电话):13722793092 微信公众号:xxktorg

            

一条回应:“2.4 CSS盒模型_HTML视频教程”

  1. 马慧SEO说道:

    小小课堂SEO自学网(https://www.xxkt.org/ ),全网营销SEO概念提出者,提供SEO培训、全站优化诊断、顾问咨询为主的SEO服务。分享SEO实战经验,新站快速排名,单页面排名和三方平台推广等技术。电子书营销、论坛发帖推广、电子邮件营销、新媒体运营等网络营销教程。

发表评论

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

相关文章!