欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS盒子模型(二)

程序员文章站 2022-05-27 09:02:06
...

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>

CSS盒子模型(二)

<!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>

CSS盒子模型(二)

CSS盒子模型(二)

三个计算题

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的盒子里面水平居中,垂直居中。

搜索趣图

CSS盒子模型(二)

<!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>