目录
盒子模型
总讲
页面中的所有元素都可以看成一个盒子,占据着一定的页面空间。网页页面上的区域、图片、导航、列表、段落等都可以是盒子。
一个盒子的实际宽度、高度:content+padding+border+margin。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box{
width:200px;
height:350px;
border:1px solid;
padding:20px;
margin:10px;
}
</style>
</head>
<body>
<div id="box">
123456
</div>
</body>
</html>
实现效果
样式属性概述
border属性
border-width(px):thin、medium、thick
border-color:blue、green、yellow......
border-style:dashed、dotted、solid、double
padding和margin属性
一般用px和%表示
内边距:padding、padding-top、padding-right、padding-bottom、padding-left。
外边距:margin、margin-top、margin-right、margin-bottom、margin-left。
给属性赋值时需注意:
以margin为例
margin:1px;→margin:1px 1px 1px 1px;
margin:1px 3px;→margin:1px 3px 1px 3px;
margin:1px 2px 3px;→margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;(这里上下边距均为1px,但是不能缩写)
margin属性赋值顺序为:上 右 下 左
对浏览器默认的设置清零:
* {
margin: 0;
padding: 0;
}
overflow属性
当内容溢出盒子框时,overflow属性取值。
overflow:hidden→超出部分不可见
overflow:scroll→显示滚动条
overflow:auto→如果有超出部分,显示滚动条
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
border:2px solid;
padding:20px;
margin:10px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="boxoverflow">boxoverflow boxoverflow</div>
</body>
</html>
实现效果
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div
{
width:100px;
height:100px;
border:2px solid;
padding:20px;
margin:10px;
overflow:scroll;
}
</style>
</head>
<body>
<div id="boxoverflow">boxoverflow boxoverflow</div>
</body>
</html>
实现效果
边框中插入图片
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#imgcss{
text-align: center;
font-size: 0; /*使图间没有空隙*/
}
#imgcss img{
height: 200px;
width: 200px;
margin: left 5px;
border: 1px solid rgb(143, 158, 11);
padding: 5px;
}
</style>
</head>
<body>
<div id="imgcss">
<img src = "boluo.png" />
<img src = "boluo.png" />
</div>
</body>
</html>
实现效果