web0217_02

最新推荐文章于 2022-05-12 11:21:03 发布

monuo5659

最新推荐文章于 2022-05-12 11:21:03 发布

阅读量122

点赞数

分类专栏： CSS HTML

本文链接：https://blog.csdn.net/monuo5659/article/details/104362851

版权

HTML 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

CSS

5 篇文章 0 订阅

订阅专栏

1、盒子模型。

边框border
内边距padding
外边距margin

问题一：盒子模型由哪四部分组成？

问题二：内边距的作用以及对盒子的影响？

问题三：padding设置不同的数值代表什么意思？

问题四：说出盒子块级居中的两个条件？

问题五：外边距合并的解决方法？

1.1网页布局的本质

1、首先利用CSS设置好盒子大小，然后摆放好盒子的位置。

2、把网页元素比如图片，文字等放入盒子内部。

1.2 边框border

border-color：边框的颜色 border-width：边框的宽度 border-style：边框的形式

border：合并写 1px solid red；

一个不错的表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.t1
			{
				font-family: "trebuchet ms",Arial, Helvetica, sans-serif;
				width: 60%;
				border-collapse: collapse;
			}
			.t1 tr th
			{
				color:white;
				background-color: #A7C942;
				text-align: center;
			}
			.t1 tr td
			{
				text-align: center;
				border:1px solid #A7C942;
			}
			.t1 .green
			{
				background-color: #EAF2D3;
			}
		</style>
	</head>
	<body>
		<table class="t1">
			<tr>
				<th>Company</th>
				<th>Contact</th>
				<th>Country</th>
			</tr>
			<tr>
				<td>Apple</td>
				<td>Steven Jobs</td>
				<td>USA</td>
			</tr>
			<tr class="green">
				<td>Baidu</td>
				<td>Li YanHong</td>
				<td>China</td>
			</tr>
			<tr>
				<td>Google</td>
				<td>Larry Page</td>
				<td>USA</td>
			</tr>
			<tr class="green">
				<td>Lenove</td>
				<td>Liu ChuanZhi</td>
				<td>USA</td>
			</tr>
			<tr>
				<td>Huawei</td>
				<td>Ren ZhengFei</td>
				<td>China</td>
			</tr>
		</table>
	</body>
</html>

border-collapse: collapse; 这个是很重要的，就是合并相邻边框。

1.3内边距里 padding

定义:内边距离是指，盒子内部的内容距离边框的距离。

padding-left：内容距离左边内容的距离 padding-right：内容距离右边的距离

padding-top、padding-bottom

简写：padding：20px；上下左右20px

padding：10px 20px；上下10px，左右20px；

padding：10px 20px 30px；上10px，左右20px，下30px；

padding：10px 20px 30px 40px，顺时针。上右下左边。

盒子大小=content+padding+border；

特殊情况：如果盒子没有给定宽度width，则padding-left或者padding-right不会撑开盒子。

如果盒子没有给定height，则padding-top和padding-bottom也不会撑开盒子。

2、重点中的重点，如何让盒子居中显示？

1、margin-left：auto、margin-right：auto

2、margin：auto

3、margin：0 auto；

左右的边距设置为auto则盒子就可以居中显示了！！但是盒子必须要有宽度哦

NOTES：

text-align：center 让文字、行内元素、行内块元素居中对其
margin： 盒子居中对其

margin：10px auto；是指上下为10px而左右为居中对齐！

2.1插入图片和背景图片的区别

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<style>
		.c1,.c2
		{
			width: 540px;
			height: 340px;
			border:1px solid orange;
			padding:80px;
			margin:20px auto;
		}
		.c2
		{
			background-image: url(images/longyi2.jpg);
			background-repeat: no-repeat;
			background-position: 10px 10px;
		}
	</style>
	<title></title>
</head>
<body>
	<div class="c1">
		<img src="images/longyi2.jpg">
	</div>
	<div class="c2">	
	</div>
</body>
</html>

插入图片可以通过padding来设置位置，而背景图片只能通过background-position：来设置位置。

通常来说用得比较多的是插入图片，而背景图片相对来说用得比较少。

2.2 清除元素的默认边距。（非常重要的一段话）用*（通配符来清）

*
{
    border：0；
    padding：0；
}

行内元素尽量只设置左右内外边距，不要设置上下内外边距（设置没用设置干嘛？？？？）

monuo5659

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web0217_02

1、盒子模型。边框border 内边距padding 外边距margin问题一：盒子模型由哪四部分组成？问题二：内边距的作用以及对盒子的影响？问题三：padding设置不同的数值代表什么意思？问题四：说出盒子块级居中的两个条件？问题五：外边距合并的解决方法？1.1网页布局的本质1、首先利用CSS设置好盒子大小，然后摆放好盒子的位置。2、把网页元素比如图片，文字...
复制链接

扫一扫