盒子模型
盒子模型时具有内容(content)(盒子里面装的东西)、内边距(padding)(盒子里面内容到盒子边缘的距离)、边框(border)(盒子本身)、外边距(margin)(盒子周围的其他元素到盒子边框的距离。)属性的HTML元素。
盒子的属性
-
外边界
-
属性名称 解释 margin-top 上外边距 margin-right 右外边距 margin-bottom 下外边距 margin-left 左外边距 margin 上、右、下、左 margin 上右、下左 margin 上、左右、下 margin 居中 margin-top:1px; margin-right:2px; margin-bottom:3px; margin-left:4px; margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 1px 400px 3px; margin: 0 auto
2.边框
属性名称 | 解释 |
---|---|
border-width | 边框宽度 |
border-style | 边框风格 |
border-color | 边框颜色 |
border | 宽度、风格、颜色 |
border-top:5px dashed red; 上边框
border-right: 7px dotted blue; 右边框
border-bottom: 10px groove #808080; 底边框
border-left: 20px solid green; 左边框
注释:用的上表中第四个格式
double 双线
solid实线
dashed虚线
dotted圆点
groove凹槽
3.内边界
属性名称 | 解释 |
---|---|
padding-top | 上内边距 |
padding-right | 右内边距 |
padding-bottom | 下内边距 |
padding-left | 左内边距 |
padding | 上右下左 |
padding | 上下、左右 |
border-radius: 30px; 将盒子的四个角设置为园角度的
padding-top: 10x 2px 4px 5px;
padding-right: 1px 5px;
注释:
1.浮动可以让块元素呈现行元素的特诊,且高度保持不变。(float)
2.占位宽度:width+padding(左右)+border(左右)+margin(左右)
3.占位高度:width+padding(左右)+border(左右)+margin(左右)
4.box-shadow:偏移 格式; box-shadow:10px,10px,10px x轴,y轴,虚化值
5.over flow:scroll 滚动条 横竖都有
:auto 哪里溢出,哪里就有滚动条
:visible 溢出显示
:hidden 隐藏溢出
盒子模型初步练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>block</title>
<style type="text/css">
.body1{
margin: 0px;
}
.div_top{
width: 900px;
height: 150px;
background-color: deepskyblue;
margin: 0 auto;
}
.div_main{
width: 900px;
height: 700px;
background-color: aquamarine;
margin: 0 auto;
}
.div_left{
width: 200px;
height: 100%;
background-color:pink;
float:left
}
.div_center{
width:500px;
height: 100%;
background-color: #ccc;
float:left
}
.div-right{
width: 200px;
height: 100%;
float:left
background-color: lightyellow;
}
</style>
</head>
<body class="body1">
<div class="div_top"></div>
<div class="div_main">
<div class="div_left"></div>
<div class="div_center"></div>
<div class="div-right"></div>
</div>
</body>
</html>
效果图: