HTML5教程
Web前端-CSS(5)
本文主要是介绍Web前端-CSS(5)，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
盒模型和display属性
盒模型由内容区、内填充区、边框区、外边距组成。HTML元素也可以包含其他元素，这时父元素的内容区将被作为子元素的容器，子元素通常只能出现在内容区。有两种最基本的盒模型：
- block类型：这种盒模型的元素默认占据一行，允许通过CSS设置宽度、高度。例如div、p元素。
- inline类型：这种盒模型的元素不会占据一行（默认允许在一行放置多个元素），即使通过CSS设置宽度、高度也不会起作用。例如span、a元素。
div和span的区别：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 盒模型的基本类型 </title>
<style type="text/css">
div,span{
width: 300px;
height: 40px;
border: 1px solid black;
}
</style>
</head>
<body>
<div>div元素一</div>
<div>div元素二</div>
<span>span元素一</span>
<span>span元素二</span>
</body>
</html>
设置了div和span元素的高度和宽度，但是span是inline盒模型，因此高度、宽度对它无效。
CSS为display属性提供了block、inline两个属性值，用于改变HTML元素默认的盒模型。例如将上面的改为如下形式：
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 盒模型的基本类型 </title>
<style type="text/css">
div,span{
width: 300px;
height: 40px;
border: 1px solid black;
}
/* 将div元素改为inline盒模型 */
body>div{
display:inline;
}
/* 将span元素改为block盒模型 */
body>span{
display:block;
}
</style>
</head>
<body>
<div>div元素一</div>
<div>div元素二</div>
<span>span元素一</span>
<span>span元素二</span>
</body>
</html>
none值和visibility属性
display属性可指定为none值，用于设置目标对象隐藏，一旦该对象隐藏，其占用的页面空间也会释放。与此类似的还有visibility属性，该属性也可用于设置目标对象是否显示，但隐藏后元素占用的页面空间会保留。visibility属性的两个常用值为visible和hidden，分别用于控制目标对象的显示的隐藏。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 隐藏元素 </title>
<style type="text/css">
/* 设置div元素的宽度、高度、背景色和边框 */
div{
width:300px;
height:40px;
background-color:#ddd;
border:2px solid black;
}
</style>
</head>
<body>
<input type="button" value="隐藏"
onclick="document.getElementById('test1').style.display='none';"/>
<input type="button" value="显示"
onclick="document.getElementById('test1').style.display='';"/>
<div id = "test1">
使用display控制对象的显示和隐藏
</div>
<input type="button" value="隐藏"
onclick="document.getElementById('test2').style.visibility ='hidden'"/>
<input type="button" value="显示"
onclick="document.getElementById('test2').style.visibility ='visible'"/>
<div id = "test2">
使用visibility控制对象的显示和隐藏
</div>
<hr/>
</body>
</html>
inline-block类型的盒模型
是inline和block的集合体，这种类型的盒模型的元素既不会占据一行，同时也支持width、height指定宽度及高度。
默认情况下，多个inline-block类型的盒模型的元素将会采用底端对齐的方式，底部会位于同一条水平线上，也可以让其在顶端对齐，为它们增加vertical-aligon:top即可。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 多栏布局 </title>
<style type="text/css">
div#container {
width: 960px;
}
div>div {
border: 1px solid #aaf;
display: inline-block;
/* 设置HTML元素的width属性包括边框 */
box-sizing: border-box;
vertical-align: top;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div style="width:220px">
<h2>疯狂软件开班信息</h2>
<ul>
<li>2011年11月10日 已满已开班</li>
<li>2011年12月02日 爆满已开班</li>
<li>2012年02月08日 已满已开班</li>
</ul>
</div><div style="width:500px;">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div><div style="width:240px">
<h2>公司动态</h2>
<ul>
<li>《疯狂Java讲义》(第3版)上市</li>
<li>泰豪电网软件公司来校召开现场招聘会</li>
<li>疯狂学子赴武汉光谷软件园入职</li>
<li>新华南方来校现场招聘</li>
</ul>
</div>
</div>
</body>
</html>
如上，如果设置div元素采用inline-block盒模型显示，那么页面中的3个div元素都不会独立占一行。也可通过width、height指定宽度、高度，从而实现多栏布局。
除此之外，使用inline-block盒模型也可以非常方便地实现水平菜单：
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 导航菜单 </title>
<style type="text/css">
body>div{
text-align: center;
}
div>div{
/* 设置为inline-block盒模型，保证一行显示 */
display: inline-block;
border: 1px solid black;
}
a {
text-decoration:none;
/* 设置为block盒模型，允许设置高度、宽度 */
display: block;
width: 120px;
padding: 10px;
/* 设置默认背景色 */
background-color: #eee;
}
a:hover {
/* 设置鼠标悬停时的背景色 */
background-color: #aaa;
font-weight: bold;
}
</style>
</head>
<body>
<div>
<div><a href="http://www.crazyit.org">疯狂Java联盟</a></div><div>
<a href="http://www.fkjava.org">疯狂软件教育</a></div><div>
<a href="http://www.fkjava.org/companyInfo.html">关于我们</a></div><div>
<a href="http://www.crazyit.org">疯狂成员</a></div>
</div>
</body>
</html>
inline-table类型的盒模型
默认情况下，table元素属于block类型的盒模型，也就是说，该元素默认会占据一行：它的左边不允许出现其他内容右边也是，该元素也可以通过width、height设置宽度高度。
CSS为table元素提供了一个inline-table类型的盒模型，允许表格通过width、height设置宽度高度，允许左右出现其他内容。
为了控制表格与前后内容垂直对齐，可以添加vertical-align属性实现，设置该属性为top；设置为bottom是底端对齐。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> inline-table盒模型 </title>
<style type="text/css">
td {
border: 1px solid black;
}
table{
width: 360px;
border-collapse: collapse;
/* 设置表格显示为inline-table盒模型 */
display: inline-table;
/* 设置顶端对齐 */
vertical-align: top;
}
</style>
</head>
<body>
前面内容
<table style="">
<tr><td>疯狂Java讲义</td><td>疯狂Ajax讲义</td></tr>
<tr><td>疯狂XML讲义</td><td>疯狂Android讲义</td></tr>
</table>
后面内容
</body>
</html>
页面设置以inline-table盒模型显示表格，所以表格前后都可显示内容。
使用table类型的盒模型实现表格
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元素显示为表格行组。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 表格相关的盒模型 </title>
<style type="text/css">
div>div {
display: table-row;
padding: 10px;
}
div>div>div{
display: table-cell;
border: 1px solid black;
}
</style>
</head>
<body>
<div style="display:table;width:400px;">
<div style="display:table-caption;">疯狂Java体系图书</div>
<div>
<div>疯狂Java讲义</div>
<div>疯狂Android讲义</div>
</div>
<div>
<div>疯狂Ajax讲义</div>
<div>疯狂XML讲义</div>
</div>
<div>
</body>
</html>
在上面页面中，虽然都是div元素，但由于这些元素的display属性设置为表格相关的盒模型，因此各div元素将会组成一个表格。
list-item类型的盒模型
可以将目标元素转换为类似于ul的列表元素，也可以同时在元素前面添加列表标志。如下将多个div元素的display设置list-item。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> list-item </title>
<style type="text/css">
/* 设置div以list-item的盒模型显示 */
div{
display: list-item;
list-style-type: square;
margin-left: 20px;
}
</style>
</head>
<body>
<div>疯狂Java讲义</div>
<div>疯狂Android讲义</div>
<div>轻量级Java EE企业应用实战</div>
</body>
</html>
如上设置了3个div元素以list-item盒模型显示并设置这些元素的前面添加实心方块。
如果为不同元素添加不同的列表符号，并使用不同的margin-left，就可以通过list-item盒模型实现多级列表的效果：
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 多级列表 </title>
<style type="text/css">
body>div{
display: list-item;
list-style-type: disc ;
margin-left: 20px;
}
div>div{
display: list-item;
list-style-type: square;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="div1">
疯狂Java体系图书
<div>疯狂Java讲义</div>
<div>疯狂Android讲义</div>
<div>轻量级Java EE企业应用实战</div>
</div>
<div id="div2">
疯狂Java相关
<div>疯狂Java联盟</div>
<div>疯狂软件教育</div>
<div>疯狂Java实训营</div>
</div>
</body>
</html>
run-in类型的盒模型
run-in模型的盒模型的行为取决于它周围的元素。
- 如果run-in类型的元素包含一个block类型的元素，那么该run-in类型的元素自动变成block类型。
- 如果run-in类型的元素相邻兄弟是block类型的元素，那么该run-in类型的元素变成in-line行为，且被自动插入作为其兄弟元素的第一个元素。
- 在其他情况下，run-in类型的元素被当成block类型。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> run-in </title>
<style type="text/css">
p, span{
padding:6px;
}
</style>
</head>
<body>
<span style="display: run-in;border:1px solid black;">display: run-in</span>
<p style="border:2px solid red;">display:block</p>
<span style="display: run-in;border:1px solid black;">display: run-in</span>
<p style="border:2px solid red;display:inline">display:inline</p>
</body>
</html>
对盒添加阴影
使用box-shadow属性为盒模型添加阴影，该属性可用于为整个盒模型添加阴影。
它是一个复合属性，语法格式如下：
box-shadow:hOffset vOffset blurLength spread color inset;
hOffset：控制阴影在水平方向的偏移。
vOffset：控制阴影在垂直方向的偏移。
blurLength：控制阴影的模糊程度。
spread：控制阴影的缩放程度。
color：控制阴影颜色。
inset：用于将外部阴影改为内部阴影。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-shadow属性 </title>
<style type="text/css">
div {
width: 300px;
height: 50px;
border: 1px solid black;
margin: 30px;
}
</style>
</head>
<body>
<div style="box-shadow: -10px -8px 6px #444;">
box-shadow: -10px -8px 6px #444;（左上阴影）</div>
<div style="box-shadow: 10px -8px 6px #444;">
box-shadow: -10px 8px 6px #444;（右上阴影）</div>
<div style="box-shadow: -10px 8px 6px #444;">
box-shadow: -10px 8px 6px #444;（左下阴影）</div>
<div style="box-shadow: 10px 8px 6px #444;">
box-shadow: 10px 8px 6px #444;（右下阴影）</div>
<div style="box-shadow: 10px 8px #444;">
box-shadow: box-shadow: 10px 8px #444;（右下阴影，不指定模糊程度）</div>
<div style="box-shadow: 10px 8px 20px #444;">
box-shadow: 10px 8px 20px #444;（右下阴影、增大模糊程度）</div>
<div style="box-shadow: 10px 8px 10px -10px red;">
box-shadow: 10px 8px 10px -10px red;（右下阴影、缩小阴影区域）</div>
<div style="box-shadow: 10px 8px 20px 15px red;">
box-shadow: 10px 8px 20px 15px red;（右下阴影、放大阴影区域）</div>
</body>
</html>
对表格及单元格添加阴影
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> box-shadow属性 </title>
<style type="text/css">
table {
width: 500px;
border-spacing: 10px;
box-shadow: 10px 10px 6px #444;
}
td {
box-shadow: 6px 6px 4px #444;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>疯狂Java讲义</td>
<td>疯狂Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>疯狂Android讲义</td>
</tr>
</table>
</html>
布局相关属性
- float：控制目标HTML元素是否浮动以及如何浮动。当通过该属性设置某个元素浮动后，该元素将被当作block类型的盒模型处理。浮动HTML元素将会漂浮紧紧跟随它的前一个元素，直到遇到边框、内填充、外边距或block类型的盒模型元素为止。支持left、right两个属性值控制向左右浮动。
- clear：用于清除HTML元素的向左向右浮动特性。
- clip：控制对HTML元素进行裁剪。属性值可指定为auto（不裁剪）或rect（）：定义一个矩形，显示矩形内的区域。
- overflow：设置当html元素不都容纳内容时的显示方式。
- overflow-x：只控制水平方向的显示方式。
- overflow-y：只控制垂直方向的显示方式。
- overflow-style：设置HTML元素不够容纳时的滚动方式。
- display：是指目标对象是否显示及如何显示。
- visibility：设置目标对象是否显示。
float的功能
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> float属性 </title>
<style type="text/css">
div {
border:1px solid black;
width: 300px;
height: 80px;
padding: 5px;
}
</style>
</head>
<body>
<div style="float:left;">
float:left; 浮向左边
</div>
<div style="float:left;">
float:left; 浮向左边
</div>
<hr/>
<div style="float:right;">
float:right; 浮向右边
</div>
<div style="float:right;">
float:right; 浮向右边
</div>
</body>
</html>
通过float属性实现多栏布局
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 多栏布局 </title>
<style type="text/css">
div#container {
width: 960px;
}
div>div {
border: 1px solid #aaf;
/* 设置HTML元素的width属性包括边框 */
box-sizing: border-box;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<!-- float:left;浮向左边 -->
<div style="float:left;width:220px">
<h2>疯狂软件开班信息</h2>
<ul>
<li>2011年11月10日 已满已开班</li>
<li>2011年12月02日 爆满已开班</li>
<li>2012年02月08日 已满已开班</li>
</ul>
</div>
<!-- float:left;浮向左边 -->
<div style="float:left;width:500px;">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div>
<!-- float:left;浮向左边 -->
<div style="float:left;width:240px">
<h2>公司动态</h2>
<ul>
<li>《疯狂Java讲义》(第3版)上市</li>
<li>泰豪电网软件公司来校召开现场招聘会</li>
<li>疯狂学子赴武汉光谷软件园入职</li>
<li>新华南方来校现场招聘</li>
</ul>
</div>
</div>
</body>
</html>
使用clear属性实现换行
clear属性用于清除HTML元素的浮动，设置HTML元素的左、右是否允许出现浮动元素，支持以下属性值：
- none：默认值。HTML元素左右都支持浮动特性。
- left：清除HTML左边的浮动特征，意味着该元素向左浮动时会自动换行。
- right：清除HTML右边的浮动特征，意味着该元素向右浮动时会自动换行。
- both：清除HTML两边的浮动特征，意味着该元素两边浮动时会自动换行。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> clear属性 </title>
<style type="text/css">
div>div{
width: 220px;
padding: 5px;
margin:2px;
float:left;
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<div>疯狂Java联盟</div>
<div>疯狂软件教育</div>
<div style="clear:both;">关于我们(设置了clear:both;)</div>
<div>疯狂成员</div>
</div>
</body>
</html>
上面4个div都设置了float：left属性，这会让他们都浮向左边，如果宽度足够，他们会并排成一排。但由于第三个子div设置了clear：both，这意味着关闭了该元素两边的浮动，所以当该元素向左浮动时会自动换行。
使用overflow设置滚动条
CSS提供了overflow、overflow-x、overflow-y三个属性来控制HTML元素不够容纳内容时的显示方式。
三个属性都支持以下属性值：
- visible：指定HTML元素既不剪切内容也不添加滚动条，是默认值。
- auto：指定HTML元素不够容纳内容时将自动添加滚动条，允许用户拖动滚动条查看内容。
- hidden：指定HTML元素自动裁剪那些不够空间显示的内容。
- scroll：指定HTML元素总是显示滚动条。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> overflow属性 </title>
<style type="text/css">
div {
width: 300px;
height: 70px;
border: 1px solid black;
white-space: nowrap;
margin: 15px;
}
</style>
</head>
<body>
<div>
<h3>不设置overflow属性</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow:hidden;">
<h3>overflow:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow:auto;">
<h3>overflow:auto;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-x:hidden">
<h3>overflow-x:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
<div style="overflow-y:hidden">
<h3>overflow-y:hidden;</h3>
测试文字测试文字测试文字测试文字测试文字测试文字
</div>
</body>
</html>
使用overflow-style控制滚动方式
设置溢出内容的滚动方式。支持如下属性值：
- auto：让浏览器自主选择滚动方式。
- scrollbar：为HTML元素添加滚动条。
- panner：为HTML元素选择合适的关键内容显示。
- move：允许用户移动元素中的内容。
- marquee：HTML元素中的内容自动滚动播放。
多栏布局
前面介绍通过float属性或通过display：inline-box来实现多栏布局，但通过这两种方式实现的多栏布局底部无法对齐，此时可以用多栏布局，增加column-count属性即可。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 分栏布局 </title>
<style type="text/css">
div#content {
column-count: 2;
-moz-column-count: 2;
}
</style>
</head>
<body>
<div id="content">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div>
</body>
</html>
使用column-width指定栏宽度
- columns：复合属性，可同时指定栏目宽度、栏目数两个属性值。
- column-width：指定一个长度值，用于指定每个栏目的宽度。
- column-count：指定一个整数值，用于指定栏目数。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 分栏布局 </title>
<style type="text/css">
div#container{
width: 1100px;
border: 1px solid black;
}
div#content {
/* 设置栏目数， 以及各栏目的宽度*/
columns: 240px 3;
-moz-columns: 240px 3;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div>
</div>
</body>
</html>
使用column-gap和column-rule控制分栏间隔
如果希望指定各栏目之间的间距以及各栏目中间的分隔条，则可通过这两个属性指定。
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 分栏布局 </title>
<style type="text/css">
div#container{
margin:auto;
width: 840px;
border: 1px solid black;
}
div#content {
/* 设置栏目数， 以及各栏目的宽度*/
columns: 240px 3;
-moz-columns: 240px 3;
/* 设置栏目之间的间距*/
column-gap: 50px;
-moz-column-gap: 50px;
/* 设置栏目之间的分隔条*/
column-rule: 10px inset #aaa;
-moz-column-rule: 10px inset #aaa;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<h2>疯狂软件介绍</h2>
疯狂Java品牌专注高级软件编程，以“十年磨一剑”的心态打造全国最强（不是之一）疯狂Java学习体系：包括疯狂Java体系原创图书，疯狂Java学习路线图，这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/>
疯狂Java怀抱“软件强国”的理想，立志以务实的技术来改变中国的软件教育。经过八年沉淀，疯狂Java强势回归。疯狂Java创始人李刚，携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div>
</div>
</body>
</html>
使用column-span设置跨栏
有时候需要对元素中大部分内容进行分栏，但又希望控制其中某一部分内容（比如标题）不进行分栏，此时可通过column-span属性进行控制。支持如下两个属性值:
- 1：默认值，设置该元素直跨一列。
- all：跨所有列。
使用弹性盒布局
这篇关于Web前端-CSS(5)的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Vite多环境配置学习：新手入门教程11-24
-
实现OSS直传，前端怎么实现？-icode9专业技术文章分享11-23
-
在 HTML 中怎么实现当鼠标光标悬停在按钮上时显示提示文案？-icode9专业技术文章分享11-22
-
html 自带属性有哪些？-icode9专业技术文章分享11-22
-
Sass教程：新手入门及初级技巧11-21
-
Sass学习：初学者必备的简单教程11-21
-
Elmentplus入门：新手必看指南11-21
-
Sass入门：初学者的简单教程11-21
-
前端页面设计教程：新手入门指南11-21
-
Elmentplus教程：初学者必备指南11-21
-
SASS教程：从入门到实践的简单指南11-21
-
前端页面设计项目实战：新手入门教程11-21
-
Elmentplus项目实战：从入门到简单应用11-21
-
Sass项目实战：新手入门教程11-21
-
ElementPlus资料入门教程：轻松上手组件库11-21
栏目导航
