本文共 6445 字，大约阅读时间需要 21 分钟。
在CSS布局属性中，display属性是一个功能非常丰富的属性，它除了支持inline和block两种基本的盒模型之外，还可以通过指定display为none来隐藏HTML元素，也可以指定inline-block、inline-table、list-item、run-in等盒模型。通过display属性可以对HTML元素进行灵活布局，除了使用display属性控制盒模型之外，CSS3增加了box-shadow属性，允许我们为盒模型元素添加阴影，包括控制阴影的颜色、偏移和模糊度等。
1.盒模型和display属性
HTML元素的盒模型由内容区、内填充、边框、边距、边框和外边距组成。此外，HTML元素还可以包含其他元素，在这种情况下，父元素的内容区将作为子元素的容器（子元素通常只能出现在内容区，不会突破到内填充区），下图显示了父元素和子元素的关系。
HTML组件中呈现一片空白区域的组件都可当成盒模型（box model），比如<div>元素、<span>、<section>等元素。而CSS则提供了display属性来控制盒模型的外观。
1.1 两种最基本的盒类型
就最基本的盒模型组件来说，HTML组件的盒模型可分为两种。
| 类型 | 描述 |
|---|---|
| block | 这种盒模型的组件默认占据一行，允许通过CSS设置宽度、高度。例如<div>、<p>元素。 |
| inline | 这种盒模型的组件不会占据一行（默认允许在一行放置多个组件），即使通过CSS设置宽度、高度也不会起作用。例如<span>、<a>元素。 |
下面代码对比了<div>和<span>两个元素的区别。
盒模型的基本类型 div元素一div元素二span元素一span元素二
上面代码中定义了两个<div>元素和两个<span>元素，页面的CSS代码设置了<div>、<span>元素的高度为40px，宽度为300px。但由于<span>元素默认是inline盒模型，因此设置的高度、宽度对它不起作用。使用浏览器浏览，将看到如下图1所示的效果。
CSS为display属性提供了block、inline两个属性值，用于改变HTML组件默认的盒模型。例如，将上面的CSS样式部分改为如下形式。
盒模型的基本类型 div元素一div元素二span元素一span元素二
效果图：
1.2 none值和visibility属性
display属性可指定为none值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。与此类似的还有visibility属性，该属性也可用于设置目标对象是否显示。与display属性不同，当通过visibility隐藏某个HTML元素后，该元素占用的页面空间依然会被保留。visibility属性的两个常用值为visible和hidden，分别用于控制目标对象的显示和隐藏。
隐藏元素 使用display控制对象的显示和隐藏使用visibility控制对象的显示和隐藏
依次单击页面中的两个隐藏按钮，将看到下方图片的效果。
1.3 inline-block类型的盒模型
CSS还提供了一种inline-block盒模型，通过为display属性设置inline-block即可实现这种盒模型，这种盒模型是inline模型和block模型的综合体：inlineblock盒模型的元素既不会占据一行，同时也支持通过width、height指定宽度及高度。通过使用inline-block盒模型可以非常方便地实现多个<div>元素的并列显示。也就是说，使用inline-block盒模型也可以实现前面介绍的多栏布局。在默认情况下，多个inline-block盒模型的组件将会采用底端对齐的方式，也就是它们的底部将会位于同一条水平线上，这可能不是多栏布局期望的结果。为了让多个inline-block盒模型的组件在顶端对齐，为它们增加vertical-align: top即可。
多栏布局 java
- 2019年2月11日 1
- 2019年2月12日 2
- 2019年2月13日 3
java语言
语法规则和C++相似，但从某种意义上讲，它是由C和C++演变而来，所以C程序设计人员能很容易的掌握java语言的语法。 对C++来说进行了简化和一定的提高，如：使用接口代替了复杂的多重继承以及取消了指针，还通过实现垃圾自动回收机制，大大简化了程序员的资源释放管理工作。java的用法
- 1.第一步
- 2.第二步
- 3.第三步
- 4.第四步
从上面代码可以看出，如果设置<div>元素采用inline-block盒模型显示，接下来无须使用float属性即可让它们显示在同一行，从而实现多栏布局。
效果图：
导航菜单
上面代码设置了4个子<div>元素显示为inline-block盒模型，这样即可保证这4个子<div>元素在同一行内显示。每个子<div>元素内包含一个超链接，这些超链接以block盒模型显示，它们会占满整个父容器，而且CSS为这些超链接设置了背景色，我们会看到整个<div>都会显示它所包含的超链接的背景色。
效果图：
1.4 inline-table类型的盒模型
在默认情况下，<table>元素属于block盒模型，也就是说，该元素默认占据一行：它的左边不允许出现其他内容，它的右边也不允许出现其他内容；该元素也可以通过width、height设置宽度和高度。CSS为<table>元素提供了一个inline-table盒模型，这个盒模型允许表格通过width、height设置宽度和高度，而且允许它的左边、右边出现其他内容。
为了控制表格与前、后内容垂直对齐，可以通过添加vertical-align属性来实现，设置该属性为top，这表明让该表格与前、后内容顶端对齐；设置该属性为bottom，这表明让该表格与前、后内容底端对齐。
inline-table盒模型 前面内容
| java | android |
| html | css |
该页面设置以inline-table盒模型显示表格，这意味着该表格前、后都可显示内容。在浏览器中浏览，将可以看到下方图片所显示的效果。
1.5 使用table类型的盒模型实现表格
CSS3还为display提供了如下属性值。
| 属性值 | 描述 |
|---|---|
| table | 将目标HTML组件显示为表格。 |
| table-caption | 将目标HTML组件显示为表格标题。 |
| table-cell | 将目标HTML组件显示为单元格。 |
| table-column | 将目标HTML组件显示为表格列。 |
| table-column-group | 将目标HTML组件显示为表格列组。 |
| table-header-group | 将目标HTML组件显示为表格头部分。 |
| table-footer-group | 将目标HTML组件显示为表格页脚部分。 |
| table-row | 将目标HTML组件显示为表格行。 |
| table-row-group | 将目标HTML组件显示为表格行组。 |
通过上面这些盒模型，可以使用<div>元素构建表格。
表格相关的盒模型 软件开发javaandroidhtmlcss
虽然都是<div>元素，但由于将这些元素的display属性设置为表格相关的盒模型，因此各<div>元素将会组成一个表格。
效果图：
1.6 list-item类型的盒模型
list-item模型可以将目标组件转换为类似于<ul>的列表元素，也可以同时在元素前面添加列表标志。如下页面将多个<div>元素的display设置为list-item。
list-item javaandroidhtml
上面代码设置了3个<div>元素都以list-item盒模型显示，并设置在这些元素的前面添加实心方块。实际上，如果为不同元素添加不同的列表符号，并使用不同的marginleft，就可以通过list-item盒模型实现多级列表的效果。
多级列表 软件开发javaandroidhtml软件开发javaandroidhtml
上面页面为<body>所包含的<div>指定使用list-item盒模型，并指定使用实心圆心；为<div>所包含的<div>指定使用list-item盒模型，并指定使用实心方块，并为父、子<div.../>元素设置了不同的margin-left属性，这样即可实现多级列表的效果，如下图所示。
1.7 run-in类型的盒模型
run-in盒模型有点类似于inline盒模型，run-in盒模型的组件希望显示在它后面的元素内部；如果run-in盒模型的组件后面紧跟一个block盒模型元素，那么run-in盒模型元素将被放入后面的元素中显示。
run-in display: run-indisplay:block
display: run-indisplay:inline
上面代码中定义了两个display为run-in的<span>元素，其中第一个<span>元素的后面紧跟一个display为block的<div>元素，那么第一个<span>将放入这个<div>中显示。
效果图：
效果图：
2.对盒添加阴影
CSS3增加了box-shadow属性为盒模型添加阴影，该属性可用于为整个盒模型添加阴影。
2.1 使用box-shadow属性
box-shadow属性可以为所有盒模型的元素整体增加阴影。这是一个复合属性。其语法如下：
box-shadow: h-shadow v-shadow blur spread color inset;
注意：box-shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
实例：
box-shadow属性 box-shadow: -10px -8px 6px #444;（左上阴影）box-shadow: -10px 8px 6px #444;（右上阴影）box-shadow: -10px 8px 6px #444;（左下阴影）box-shadow: 10px 8px 6px #444;（右下阴影）box-shadow: box-shadow: 10px 8px #444;（右下阴影，不指定模糊程度）box-shadow: 10px 8px 20px #444;（右下阴影、增大模糊程度）box-shadow: 10px 8px 10px -10px red;（右下阴影、缩小阴影区域）box-shadow: 10px 8px 20px 15px red;（右下阴影、放大阴影区域）
效果图：
box-shadow属性的insert属性值用于控制将阴影显示在元素内部。例如，将上面的代码改为如下代码。
box-shadow属性 box-shadow: -10px -8px 6px #444 inset;（左上阴影）box-shadow: -10px 8px 6px #444 inset;（右上阴影）box-shadow: -10px 8px 6px #444 inset;（左下阴影）box-shadow: 10px 8px 6px #444 inset;（右下阴影）box-shadow: box-shadow: 10px 8px #444 inset;（右下阴影，不指定模糊程度）box-shadow: 10px 8px 20px #444 inset;（右下阴影、增大模糊程度）box-shadow: 10px 8px 10px -10px red inset;（右下阴影、缩小阴影区域）box-shadow: 10px 8px 20px 15px red inset;（右下阴影、放大阴影区域）
效果图：
2.2 对表格及单元格添加阴影
通过box-shadow属性也可以为表格、单元格添加阴影，例如如下面的代码所示。
box-shadow属性
| java | android |
| html | css |
上面的代码使用box-shadow属性为表格、单元格指定了阴影。
效果图：
------------如果大家喜欢的博客，可以点击左上角的关注哦。
转载地址：http://gypti.baihongyu.com/