盒子模型
作用：实现网页布局，在网页中画盒子
组成：
边框 border
内边距 padding
外边距 margin
1.边框
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta lang="en">
<style type="text/css">
.test{
width: 300px;
height: 300px;
border-color: red;
border-width: 2px;
border-style: solid;
/*border-style: dotted; 点线*/
/*border-style: dashed;/*虚线*/*/
/*border: 2px red solid;*/
border-left: 2px red solid;
border-right: 2px red solid;
border-top: 2px red solid;
border-left-color: blue;
border-left-style: dotted;
}
</style>
</head>
<body>
<div class="test">
文字
</div>
</body>
</html>
联写方式
border 例子：border: 2px red solid;
必须要设置border-style
没有顺序设置
2.Lable控件
<label for="user">用户名：</label>
<input type="text" name="" id="user">
//点击lable后直接移动焦点到输入框中
3.内边距
设置内容之间的距离
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta lang="en">
<style type="text/css">
.box{
width: 300px;
height: 200px;
border: solid 1px red;
/*padding: 100px;*/
padding-left: 100px;
padding-right: 100px;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class="box">内容</div>
</body>
</html>
联写
padding: 10px; /*表示上 右 下 左 各10px*/
/*padding联写 上下为10px 左右为20px*/
/*padding: 10px 20px;*/
/*padding: 10px 20px 30px; 上面为10 左右为20 下面为30*/
/*padding: 10px 20px 30px 40px; 上面10 右面 20 下面30 左面40*/
4.外边距
盒子与盒子之间的距离，会移动盒子
属性联写与内边距一样
外边距不会影响盒子大小
特点：
垂直外边距合并，只有垂直方向才有，以最大的外边距为准。
垂直外边距塌陷。
解决方法：
1.给父元素设置边框
2.给父元素设置overflow:hidden;
由于overflow:hidden触发了元素的bfc （格式化上下文），使元素独立出来
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta lang="en">
<style type="text/css">
.one{
width: 300px;
height: 300px;
background-color: blue;
/*border: 2px red solid;*/
overflow: hidden;
}
.two{
width: 50px;
height: 50px;
background-color: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="one">
<div class="two"></div>
</div>
</body>
</html>
网友评论