css盒模型
所有HTML元素可以看作盒子,在CSS中," box model "这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding)、实际内容(content)。
盒模型允许我们在 其它元素和周围元素 边框之间的空间 放置元素。
下面的图片说明了盒子模型(Box Model):
不同部分的说明:
- Margin(外边距) —— 清除边框外的区域,外边距是透明的
- Border(边框) —— 围绕在内边距和内容外的边框
- Padding(内边距/填充) —— 清除内容周围的区域,内边距是透明的
- Content(内容) —— 盒子的内容,显示文本和图像
注意:
当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度,要知道,完整大小的元素,你还必须添加内边距,边框和边距。
元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
css边框
CSS边框属性允许你指定一个元素边框的样式和颜色。
border-style
border-style属性设置一个元素的四个边框的样式,此属性可以有一到四个值。
实例:
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
border-style:dotted;
- 所有4个边框都是点状
既然border有四边,那么其自然就可以分开设置,分别为:
- border-bottom-style
- border-left-style
- border-right-style
- border-top-style
注意:
其它可以设置4个值的(eg:border、border-color、margin…),都是该规律,后面将不再重复!
值对应的效果:(这里使用浅色更容易看出后面几个的区别,而且得把边框调宽)
还有关于border的一点干货,见:
重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css(font-weight)] / 详解分割线hr标签 / 初见border / 详解auto(第二天)
border-width
border-width属性设置一个元素的四个边框的宽度。
注意:
经菜鸟测试(goole、Firefox):thin=1px、thick=5px、medium=3px
注意:
CSS 没有定义 3 个关键字的具体宽度,所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px,而另一个用户则分别设置为 3px、2px 和 1px。
(菜鸟不清楚其它浏览器是不是这样,望有其它浏览器的读者试试,并留言,菜鸟会积极收录!!!)
默认为什么是3px?
详情见:
重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css(font-weight)] / 详解分割线hr标签 / 初见border / 详解auto(第二天)
border-color
border-color属性设置一个元素的四个边框颜色。
注意:
请始终把 border-style 属性声明到 border-color 属性之前,元素必须在您改变其颜色之前获得边框。
一般border-style、border-width、border-color 前后关系错误,也没什么问题,但还是按照标准比较好,最先写border-style,后面两个随意!
color取值见:
详解文本格式(Text)[第二天]
注意:
这里transparent,并不是默认边框颜色为transparent,默认边框颜色是黑色!(这里写一个默认,菜鸟也不明白为什么)
transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
border
缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别(按顺序):border-width、border-style 和 border-color。
注意:
上述属性值缺少一个没有关系,但千万不要缺boeder-style,不然就默认为none(没有边框),设置其他的也没有意义!