其他分享
首页 > 其他分享> > Web前端-CSS(5)

Web前端-CSS(5)

作者:互联网

盒模型和display属性

盒模型由内容区、内填充区、边框区、外边距组成。HTML元素也可以包含其他元素,这时父元素的内容区将被作为子元素的容器,子元素通常只能出现在内容区。有两种最基本的盒模型:

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日&nbsp;已满已开班</li>
	<li>2011年12月02日&nbsp;爆满已开班</li>
	<li>2012年02月08日&nbsp;已满已开班</li>
</ul>
</div><div style="width:500px;">
<h2>疯狂软件介绍</h2>
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程,以“十年磨一剑”的心态打造全国最强(不是之一)疯狂Java学习体系:包括疯狂Java体系原创图书,疯狂Java学习路线图,这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂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还有如下属性值:

<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模型的盒模型的行为取决于它周围的元素。

<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>
<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日&nbsp;已满已开班</li>
	<li>2011年12月02日&nbsp;爆满已开班</li>
	<li>2012年02月08日&nbsp;已满已开班</li>
</ul>
</div>
<!-- float:left;浮向左边 -->
<div style="float:left;width:500px;">
<h2>疯狂软件介绍</h2>
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程,以“十年磨一剑”的心态打造全国最强(不是之一)疯狂Java学习体系:包括疯狂Java体系原创图书,疯狂Java学习路线图,这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂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元素的左、右是否允许出现浮动元素,支持以下属性值:

<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元素不够容纳内容时的显示方式。

三个属性都支持以下属性值:

<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控制滚动方式

设置溢出内容的滚动方式。支持如下属性值:

多栏布局

前面介绍通过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>
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程,以“十年磨一剑”的心态打造全国最强(不是之一)疯狂Java学习体系:包括疯狂Java体系原创图书,疯狂Java学习路线图,这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想,立志以务实的技术来改变中国的软件教育。经过八年沉淀,疯狂Java强势回归。疯狂Java创始人李刚,携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div>
</body>
</html>

使用column-width指定栏宽度

<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>
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程,以“十年磨一剑”的心态打造全国最强(不是之一)疯狂Java学习体系:包括疯狂Java体系原创图书,疯狂Java学习路线图,这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂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>
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java品牌专注高级软件编程,以“十年磨一剑”的心态打造全国最强(不是之一)疯狂Java学习体系:包括疯狂Java体系原创图书,疯狂Java学习路线图,这些深厚的知识沉淀已被大量高校、培训机构奉为经典。<br/> 
&nbsp;&nbsp;&nbsp;&nbsp;疯狂Java怀抱“软件强国”的理想,立志以务实的技术来改变中国的软件教育。经过八年沉淀,疯狂Java强势回归。疯狂Java创始人李刚,携疯狂Java精英讲师团队肖文吉、黄勇等老师将带给广大学习者“非一般”的疯狂。
</div>
</div>
</body>
</html>

使用column-span设置跨栏

有时候需要对元素中大部分内容进行分栏,但又希望控制其中某一部分内容(比如标题)不进行分栏,此时可通过column-span属性进行控制。支持如下两个属性值:

使用弹性盒布局

标签:Web,Java,前端,元素,疯狂,HTML,nbsp,div,CSS
来源: https://www.cnblogs.com/zzdshidashuaige/p/14805312.html