CSS盒子模型

2016-10-22

《css入门经典》第6章

1.每个HTML元素对应于一个显示盒子，但不是所有的元素都显示在屏幕上。

2.HTML元素显示为CSS显示盒子的真正方法称为“可视格式化方式”。可视格式化方式告诉浏览器应该如何在屏幕上显示HTML内容。

3.元素类型：

（1）块元素（block）：以新行开始和结束。

，,
等。

（2）内联元素（inline）：没有独占一行，而是包含于文本流之中。，，,等。

4.display属性

通过设置display属性值可以改变元素的类型

display:none;不显示

display:block;设置为块元素

display:inline;设置为内联元素

5.匿名盒

当标签包含混合内容，比如文本和一些HTML标签时，会产生没有HTML标签的盒子，称为匿名盒。匿名盒的样式设置与其包含盒相同。

eg.

Hello World!

  由图可知：文本Hello为匿名盒。

6.在HTML中，标签的定义为display:none;。所以我们在页面中看不到标签的内容。

7.盒子的显示属性

边距：margin

边框：border

填充：padding

（1）边距margin:即两个盒子之间的间距。边距总是透明的。

注意：重叠边距，即两个垂直方向的盒子，它们在垂直方向的间距使用两个元素间的最大值。边距只在块元素上重叠，并且是在垂直方向重叠，不是水平方向。

（2）边框border：

border属性设置：选择符{ border:大小 样式 颜色; }

border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。

 

Width:

thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

 

Style:

none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

 

 

描述

最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中一条线是否比另一条粗或者两条线是否应该是一样的粗，也没有指出线之间的空间是否应当比线粗。所有这些都有用户代理决定，创作人员对这个决定没有任何影响。（W3School）

（3）填充padding:内容周围的空间。填充总是和内容本身的背景颜色相同。

注意：

（1）表格单元

即不是内联元素也不是块元素，表格单元的显示值为display:table-cell。table-cell元素不能有边距。

（2）行长em：在CSS中，一行长定义为等于位置大小的量度，是一个正方形，高度和宽度等于字体的高度。