一、盒模式知识点介绍
1、盒子中主要的属性就5个:width、height、padding、border、margin。
padding:内边距
margin:外边距
盒模型的示意图:
2、padding
①说出下面盒子真实占有宽高
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding: 40px 50px 60px; // 上右下左(顺时针方向)
padding-bottom: 30px;
/border: 8px solid #000000;/
border: 8px solid #000;
}
RGB R:red G:green B:blue
200+82+502=316
200+8*2+40+30=286
②给出盒模型图,请写出相关盒模型参数:
width:123px;
height:123px;
padding:20px 40px
border: 1px solid red;
3、去除多余padding
有一些标签,默认是带有padding,比如ul标签:
所以做网站时候便于精确计算,把这些默认的padding都去掉
*{
margin: 0;
padding: 0;
}
*效率不高,可以使用并集选择器,罗列出所有标签,这个标签不用背,直接拷贝过来即可。
ul,ol{
margin: 0;
padding: 0;
}
4、border
border就是边框。边框有三个要素:粗细、线型、颜色。
实线:solid 点:dotted 虚线: dashed
颜色如果不写,默认是黑色。另外两个属性不写,显示不出来边框。
border是一个大综合属性:border:1px solid red;
border属性能够被拆开,有两大种拆开的方式:
1) 按3要素:border-width、border-style、border-color
2) 按方向:border-top、border-right、border-bottom、border-left
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid red;
border-top: 3px dashed green;
border-right: 7px dotted blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、盒模式相关尝试(涉及CSS浮动定位)
记得在img文件夹下放置代码对应所需要的图片
<html>
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: rgb(0, 102, 102);
}
ul {
border: 2px solid red;
width: 726px;
/*去掉ul中小圆点*/
list-style-type: none;
/*上下20px,auto实现左右自动居中*/
margin: 20px auto;
}
img {
width: 200px;
height: 200px;
}
li {
float: left;
border: 1px solid red;
padding: 10px;
margin: 10px;
background-color: rgb(204, 204, 204);
}
p {
/*文字水平居中*/
text-align: center;
}
.clearFloat {
clear: both;
}
</style>
</head>
<body>
<ul>
<li>
<img src="img/01.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/02.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/03.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/04.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/05.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/06.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/06.jpg"/>
<p>Java学习教程</p>
</li>
<li>
<img src="img/06.jpg"/>
<p>Java学习教程</p>
</li>
<div class="clearFloat"></div>
</ul>
</body>
</html>
代码运行结果: