11 盒子模型

最新推荐文章于 2024-10-31 22:16:12 发布

小鱼儿爱喝酒

最新推荐文章于 2024-10-31 22:16:12 发布

阅读量200

点赞数

分类专栏： WEB前端学习文章标签： html5

本文链接：https://blog.csdn.net/dskfksdf/article/details/117572774

版权

WEB前端学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1 网页布局步骤

网页布局过程：

1 准备好相关的网页元素，网页元素基本都是盒子

2 利用CSS设置好盒子样式，然后摆放在相应的位置上

3 往盒子里面装上内容。

盒子模型定义：就是HTML页面中的布局元素看作矩形盒子，也就是承装内容的容器。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。

边框border：就是边框的粗细。

内边距padding：就是content内容与边框的距离

外边距margin：就是边框与边框之间的距离

1.1 边框border

border：border-width\border-style\border-color

border-style 边框样式

none：无边框

hidden：隐藏边框

dotted：点线

dashed：虚线

solid：实线边框

double：双线边框

groove：根据border-color的值画3D凹槽

ridge:根据border-color的值画菱形边框

inset：根据border-color的值画3D凹边

outset：根据border-color的值画3D凸边

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS特性</title>
		<style type="text/css">
			div {
				width:100px;
				height: 50px;
				border-width: 20px;
				border-color: red;
				/* 画3d凹边 */
				border-style: inset;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>

边框的简写

<style type="text/css">
			div {
				width:100px;
				height: 50px;
				/* border-width: 20px;
				border-color: red;
				/* 画3d凹边 */
				/* border-style: inset; */ 
				/* 边框属性的简写，没有先后顺序之分 */
				border:20px red dotted;
			}
		</style>

边框的上下左右边框

<style type="text/css">
			div {
				width:100px;
				height: 50px;
				/* border-width: 20px;
				border-color: red;
				/* 画3d凹边 */
				/* border-style: inset; */ 
				/* 边框属性的简写，没有先后顺序之分 */
				/* border:20px red dotted; */
				/* 边框的上下左右边框都可以调节 */
				border-top: red 20px dotted;
				border-bottom: blue 20px inset;
				border-left: pink 20px dashed;
				border-right: aqua 20px solid;
			}
		</style>

边框粗细合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>边框设置</title>
		<style type="text/css">
			table {
				width: 300px;
				height: 30px;
			}
			table,tr,td,th {
				border: red 1px solid;
				/* 表示相邻边框粗细合并 */
				border-collapse: collapse;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table align="center">
			<tr>
				<th>名称</th>
				<th>热度</th>
				<th>排名</th>
			</tr>
			<tr>
				<td>神雕侠侣</td>
				<td>189</td>
				<td>1</td>
			</tr>
			<tr>
				<td>三国演义</td>
				<td>188</td>
				<td>2</td>
			</tr>
			<tr>
				<td>射雕英雄传</td>
				<td>180</td>
				<td>3</td>
			</tr>
		</table>
	</body>
</html>

内边距：padding-left 左内边距； padding-right 右内边距； padding-top 上边距； padding-bottom 下边距，padding会影响盒子的大小。

值的个数	表达意思
padding:5px	1个值，代表上下左右都有5像素的内边距
padding: 5px 10px;	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px;	3个值，代表上内边距5像素，左右内边距10像素下内边距20像素
padding: 5px 10px 20px 30px;	4个值，上5，右10，下20，左30顺时针

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>内边距</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
				padding-left: 30px;
				padding-right: 30px;
			}
		</style>
	</head>
	<body>
		<div id="">
			你好，我是来自M78星云的泰罗奥特曼，专门拯救世界，消灭破坏地球的怪兽
		</div>
	</body>
</html>

导航栏案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>内边距</title>
		<style type="text/css">
			.nav a {
				text-decoration: none;
				color: #4c4c4c;
				font-size: 12px;
				display: inline-block;
				height: 41px;
				/* 上下内边距为0,左右内边距为20px */
				padding: 0 20px;
			}
			.nav a:hover {
				color:red;
				background-color: #EDEEF0;
			}
			.nav {
				height: 41px;
				/* 上边框为橙色,下边框为白色 */
				border-top: 3px #FF8500 solid;
				border-bottom: 1px #edeef0 solid;
				background-color: #fcfcfc;
				line-height: 41px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="#">新浪微博</a>
			<a href="#">搜狐</a>
			<a href="#">新闻网</a>
			<a href="#">手机新浪网</a>
		</div>
	</body>
</html>

外边距：其他属性类似padding

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>外边距</title>
		<style type="text/css">
			.bottom {
				margin-top: 20px;
			}
			.bottom,.top {
				background-color: #FF0000;
				height: 50px;
				width: 100px;
			}
		</style>
	</head>
	<body>
		<div id="" class="top"></div>
		<div id="" class="bottom"></div>
	</body>

2 外边距典型应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：

1 盒子必须指定了宽度。

2 盒子左右的外边距都设置为auto。

常见的写法：

margin-left：auto； margin-right：auto；

margin：0 auto；

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>外边距</title>
		<style type="text/css">
			div {
				width: 200px;
				height: 200px;
				margin: 0 auto;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>

可以实现div的居中

解决嵌套块的父元素塌陷问题：

1 可以为父元素定义上边框；

2 可以为父元素定义上内边距

3 可以为父元素添加overflow：hidden

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>外边距</title>
		<style type="text/css">
			#par {
				width: 400px;
				height: 400px;
				background-color: #FF0000;
				margin-top: 50px;
				/* 边框不显示transparent */
				/* border: 1px #FF0000 transparent; */
				overflow: hidden;
			}
			#son {
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="par">
			<div id="son">
				
			</div>
		</div>
	</body>

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局之前，首先应该清楚网页元素的内外边距

* {

padding：0; /*清楚内边距*/

margin: 0; /*清除外边距*、

}

注释：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级和行内块元素就可以。

默认情况下有内外边距，为了让conten靠近左边

<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>外边距</title>
		<style type="text/css">
			/* 通配符选择器* */
		* {
			margin: 0;
			padding: 0;
		}
		</style>
	</head>
	<body>
		<ol>
			<li>你好</li>
			<li>你也好</li>
			<li>大家好才是真的好</li>
		</ol>
	</body>