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