CSS盒子模型（二）

最新推荐文章于 2022-01-08 08:42:09 发布

_wjl_

最新推荐文章于 2022-01-08 08:42:09 发布

阅读量734

点赞数

分类专栏： web前端

web前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。

width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。

大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和

盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

注意：

1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。
2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
3.如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度，则padding不会影响本盒子大小。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>盒子的计算尺寸</title>
	<style>
	div {
		width: 100px;
		height: 100px;
		background-color: gray;
		border: 5px solid red;  /* 4个边框*/
		padding: 10px;
		margin: 20px;

		/* 空间尺寸 width + border + padding + margin  170*/
	}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算盒子尺寸</title>
	<style>
	div {
		width: 59px;
		height: 33px;
		border: 1px solid #c1c1c1;
		margin: 200px;
		font-size: 16px;
		color: #666;
		line-height: 33px; /*  垂直居中 */
		/* text-align: center; 水平居中 */
		border-radius: 3px 0 0 3px;
		padding-left: 15px;
	}
	</style>
</head>
<body>
	<div>新闻</div>
</body>
</html>

在这里插入图片描述

三个计算题

1. .demo{width:200px;height:200px;border:1px solid red; padding:20px;}， 盒子最终占有的空间是多大？
2. 一个盒子需要占用的空间是 400像素， 但是盒子又有 padding:25px, border: 1px solid red; 问，我们需要改动盒子宽度为多少？
3. 如何让一个200 * 200像素的盒子， 在一个400 * 400的盒子里面水平居中，垂直居中。

搜索趣图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>搜索趣图</title>
	<style>
	* {   /* 清空默认的内外边距 几乎是我们写css 必须要写的 */
		margin: 0;
		padding: 0;
	}
	.searchPic {
		width: 238px;
		height: 294px;
		border: 1px solid #D9E0EE;
		border-top: 3px solid #FF8400; 
		margin: 20px;
	}
	h3 {
		height: 35px;
		border-bottom: 1px solid #D9E0EE;
		font-weight: normal;
		font-size: 16px;
		padding-left: 12px;
		line-height: 35px;
	}
	.searchPic img {
		margin: 7px 0 0 8px;
	}
	ul {
		list-style: none; /* 取消列表自带的小点 默认的列表样式*/
	}

	.searchPic ul li a {
		font-size: 12px;
		color: #666;
		text-decoration: none; /* 取消下划线 */
	}
	.searchPic ul {
		margin-left: 8px;
	}
	.searchPic ul li {
		padding-left: 10px;
		height: 26px;
		line-height: 26px;
		background: url(../images/square.png) no-repeat left center;
	}
	.searchPic ul li a:hover {  /* 鼠标经过变色 */
		text-decoration: underline;  /* 添加下划线 */
		color: #ff8400;
	}
	</style>
</head>
<body>
	<div class="searchPic">
	   <h3>搜索趣图</h3>
	   <img src="../images/happy.gif" height="160" width="218" alt="" >
	   <ul>
	   	<li><a href="#">经济提速</a></li>
	   	<li><a href="#">科大讯飞</a></li>
	   	<li><a href="#">人造海基</a></li>
	   </ul>
	</div>
</body>
</html>

_wjl_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS盒子模型（二）

content宽度和高度使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比%，实际工作中最常用的是像素值。大多数浏览器，如Firefox、IE6及以上版本都采用了W3C规范，符合CSS规范的盒子模型的总宽度和总高度的计算原则是：盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边...
复制链接

扫一扫