开发工具与关键技术: DW
作者:陈海涛
撰写时间:2021/5/7
1.所有 HTML 元素可以看作盒子,在 CSS 中,"box model"这一术语是用来设计和布局时使用。CSS 盒模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素
2.盒模型各部分说明:
1.content(内容):盒子的内容,显示文本和图像。
2.padding(内边距):内容区与边框之间的填充部分,内边距是透明的。
3.margin(外边距):盒子与邻元素的间距,外边距是透明的。
4.border(边框):盒子的边框,可以设置边框的宽度、样式、颜色。
3.padding属性
padding 属性接受长度值或百分比值(百分数值是相对于其父元素的 width 算的),但不允许使用负值。
内边距相关属性:padding-top(上内边距) 、 padding-right(右内边距) 、padding-bottom(下内边距) 、padding-left(左内边距)
也可以用简写
padding:10px 10px 10px 10px;(对应上,右,下,左)
padding:10px 20px 30px;(上10px)(右,左20px)(下30px)
padding:10px 20px; (上,下10px) (右,左20px)
padding:10px;(上,右,下,左)
- margin属性
围绕在元素边框的空白区域就是外边距,设置外边距最简单的方法就是使用
margin 属性,这个属性接受任何长度单位,百分数值甚至负值。
外边距相关属性:margin-top(上外边距) 、 margin -right(右外边距)、margin -bottom(下外边距) 、margin -left(左外边距)
简写原理跟padding一样
- border属性
元素的边框就是围绕元素内容和内边距的一条或多条线。我们可以设置元素
边框的样式、宽度和颜色。
简写 border:1px solid red;
(上下左右边框1个px 实线 红色背景)
Ø 边框样式 border-st