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

原创 2016年08月29日 11:15:22

一、元素可见性

使用 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>



具体示例代码地址

版权声明:本文为博主原创文章,未经博主允许不得转载。

css盒子模型

  • 2016年08月22日 15:40
  • 35KB
  • 下载

css盒子模型

  • 2016年02月14日 17:43
  • 230KB
  • 下载

深入理解盒子模型——CSS之BFC详解

首先我们看看w3c对BFC是怎么定义的:   Floats, absolutely positioned elements, block containers (such as inline-blo...

CSS盒子模型结构

  • 2013年06月30日 13:58
  • 14KB
  • 下载

CSS+DIV-盒子模型示例.zip

  • 2013年11月03日 17:17
  • 183KB
  • 下载

4-基本布局+CSS样式属性+盒子模型

***********************回顾一下***************************** ---行级布局---- 1. div是块级元素,独占一行空间,宽度默认沾满父级元素 2...

关于CSS中盒子模型的一些特殊现象

css中关于margin和padding的一些特殊现象。

内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名: 内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属...

HTML&CSS精选笔记_盒子模型

盒子模型 认识盒子模型 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(mar...

CSS盒子模型与背景图片

——她那么美丽,也不及你的笑从背景图到 BOX MODEL盒子模型听过很多次了,刚开始也马马虎虎看过,遗忘曲线不是闹着玩儿的。 今天我试着给一段文字加上背景图,有那种好看的背景图,文字看起来也很美的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 盒子模型(下)(20160820-0020)
举报原因:
原因补充:

(最多只允许输入30个字)