9、盒子模型

最新推荐文章于 2024-04-19 18:55:03 发布

Learn 学一点

最新推荐文章于 2024-04-19 18:55:03 发布

阅读量183

点赞数 1

分类专栏：第三册：HTML+CSS 文章标签： css html html5 css3

本文链接：https://blog.csdn.net/baidu_38285825/article/details/111572034

版权

第三册：HTML+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

2.11 盒子模型

Div+CSS排版优点：执行效率高
1、缩减页面代码，提高页面执行效率
2、带宽要求降低（代码更简洁）
3、更容易被搜索引擎搜索到
学完div+css后思考为什么div+css执行效率高？
什么是盒子？只要是存放内容的标签就是盒子，最大的盒子是HTML。

边界（margin）：盒子的外面叫边界，边界有四个，上下左右
填充（padding）：盒子的里面叫填充，填充有四个，上下左右
边框（border）：盒子的本身有边框，边框有四个，上下左右

a盒子的上填充，b盒子的上边界。

例1：Ctrl+h调出提示 Solid：实线 transparent：透明

<style type="text/css">
body{
		background-color: #99FFFF;
}
#a{
		border-left:none;
		border-right:none;
		border-top:none;
		border-bottom:solid 1px #000000;
		background-color:transparent;/*transparent 透明的*/
		/*margin-right:20px;*/
}
#b{
		border:none;
		background-color:transparent;
		cursor:pointer;/*当光标移到上面时，变成小手的形状*/
		margin-left:20px;
}
</style>
</head>
<body>
		请输入您的信息：<input  name="name" type="text" id="a"/>
		<input  type="button" value="确定>>" id="b"/>
</body>

例2：细线表格及居中
Auto：自动

<style type="text/css">
table,th,td{
		border:#0066FF solid 1px;
		border-collapse:collapse;/*collapse：塌陷*/
}
table{
		width:500px;
		margin-left:auto;
		margin-right:auto;/*对块显示标记，边界的左右自动，就是居中*/
}
tr{
		height:40px;
}
td{
		text-align:center;/*td里面的内容居中*/
}
</style>
</head>
<body>
	<table>
		<tr>
			<th>学号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
		</tr>
		<tr>
			<td>1</td>
			<td>令狐冲</td>
			<td>男</td>
			<td>22</td>
		</tr>
		<tr>
			<td>2</td>
			<td>任盈盈</td>
			<td>女</td>
			<td>18</td>
		</tr>
		<tr>
			<td>3</td>
			<td>任我行</td>
			<td>男</td>
			<td>55</td>
		</tr>
	</table>
</body>

例3：银杏的叶子（repeat：重复）

<style type="text/css">
#content{ 
		font-size:18px;
		background-image:url(./img/bg8.gif);
		background-repeat:repeat-y;/*背景沿着y轴平铺*/
		padding-left:110px;/*左填充是110px*/
}
body{
		background-image:url(./img/bg7.jpg);/*背景图片*/
		background-repeat:no-repeat;/*背景不平铺*/
}
</style>