关闭

CSS 盒子模型(下)(20160820-0020)

标签: visibilitydisplayfloatclear示例
143人阅读 评论(0) 收藏 举报
分类:

一、元素可见性

使用 visibility 属性可以实现元素的可见性,这种样式一般可以配合 JavaScript 来实现效果。样式表

说明 CSS 版本
visible 默认值,元素在页面上可见。 2
hidden 元素不可见,但会占据空间。 2
collapse 元素不可见,隐藏表格的行与列,
如果不是表格,则和 hidden 一样。
2
/* 设置元素隐藏,但占位 */
#first{
	visibility: hidden;
}
/* 给 table 设置 border 方便观察 */
/* 隐藏表格的列和行,但不占位,chrome 和 opera 不支持 */ 
table tr:first-child{
	visibility: collapse;
}
二、元素盒类型

CSS 盒模型中的 display 属性,可以更改元素本身盒类型。元素的盒类型主要有:块级元素(块区);行内元素(内联);行内-块级元素(内联块);隐藏元素。

1、块级元素

指的是能够设置元素尺寸、隔离其它元素功能的元素,比如 <div>、<p>等文档元素。

2、行内元素

指的是不能够设置元素尺寸,它只能自适应内容、无法隔离其它元素,其它元素会紧跟其后,比如 <span>、<b> 等文本元素。

3、行内-块元素

指的是可以设置元素尺寸,但无法隔离其它元素的元素,比如 <img> 。

可以使用 display 属性,改变元素的盒类型,display 属性值:

说明 CSS 版本
block 盒子为块级元素 1
inline 盒子为行内元素 1
inline-block 盒子为行内-块元素 2
none 盒子不可见,不占位 1

/************ 元素盒类型 ************/
/* 将行内元素转成块级元素 */
span{
	/*background: silver;
	width: 100px;
	height: 200px;
	display: block;*/
}

/* 将块级元素转成行内元素 */
div{
	/*background: silver;
	width: 200px;
	height: 100px;
	display: inline;*/
}

/* 将块级元素转为行内-块元素 */
#c{
	/*background-color: blue;
	width: 200px;
	height: 100px;
	display: inline-block;*/
}

#d{
	/*background-color: red;
	width: 200px;
	height: 100px;
	display: inline-block;*/
}

#e{
	/*background-color: green;
	width: 200px;
	height: 100px;
	display: inline-block;*/
}

/* 将原隐藏且不占位 */
#c{
	/*display: none;*/
}
三、元素的浮动

CSS 盒模型有一种叫浮动盒,就是通过 float 属性建立盒子的浮动方向,样式表:

说明 CSS 版本
left 浮动元素靠左 1
right 浮动元素靠右 1
none 禁止浮动 1

/************ 元素的浮动 ************/
#c{
	background-color: blue;
	width: 200px;
	height: 100px;
	float: left;
}

#d{
	background-color: red;
	width: 200px;
	height: 100px;
	float: right;
}

#e{
	background-color: green;
	width: 200px;
	height: 100px;
	float: none;
}
上边的浮动有一个问题:当一个元素盒子被浮动后,下面的元素会自动堆叠处理,导致元素不可见或部分不可见。可以使用 clear 属性来处理。clear :

说明 CSS 版本
none 允许两边均可浮动 1
left 左边界不得浮动 1
right 右边界不得浮动 1
both 两边都不得浮动 1
/* 清除浮动 */
#e{
	background-color: green;
	width: 200px;
	height: 100px;
	clear: both;
}


具体 HMLT 代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title> 盒子模型 </title>
	<link rel="stylesheet" type="text/css" href="box_2.css">
</head>
<body>

	<div id="first"> 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. 这是一个段落,this is a paragraph. </div>

	<br>
	<div id="a">
		<div id="b"> 这是一个段落,this is a paragraph.这是一个段落,this is a paragraph.这是一个段落,this is a paragraph. </div>
	</div>

	<br>

	<table border="1">
		<tr>
			<td>第一行第一列</td><td>第一行第二列</td><td>第一行第三列</td><td>第一行第四列</td>
		</tr>
		<tr>
			<td>第二行第一列</td><td>第二行第二列</td><td>第二行第三列</td><td>第二行第四列</td>
		</tr>
		<tr>
			<td>第三行第一列</td><td>第三行第二列</td><td>第三行第三列</td><td>第三行第四列</td>
		</tr>
	</table>

	<img src="../img/baidu_logo.png">
	<span> 这是一个行内元素 </span>
	<br>

	<div id="c"> 块级元素的第一个 </div>
	<div id="d"> 块级元素的第二个 </div>
	<div id="e"> 块级元素的第三个 </div>

</body>
</html>



具体示例代码地址

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:7904次
    • 积分:490
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论