CSS盒子模型
2015-04-14 23:27
302 查看
CSS盒子模型概述
margin border padding content
内边距
| 属性 | 描述 |
|---|---|
| padding | 所有边距 |
| padding-bottom | 底边距 |
| panding-left | 左边距 |
| panding-right | 右边距 |
| panding-top | 上边距 |
边框
边框样式10种非继承样式,包括none
边框的单边样式
border-top-style
border-left-style
border-right-style
border-bottom-style
边框的宽度 border-width
边框单边的宽度
border-top-width
border-left-width
border-right-width
border-bottom-width
边框颜色 border-color
边框单边的颜色
border-top-color
border-left-color
border-right-color
border-bottom-color
CSS3边框
border-radius 圆角表框border-shadow 边框阴影
border-image 边框图片
外边距
基本和内边距相似外边距合并
相邻的2个盒子将2个边距合并成一个边距 如果边距不同，则遵循边距大的盒子模型应用
下面是一个简单的页面盒子应用DEMOHTML
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盒子模型的应用</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="top"> <div class="top_content"> </div> </div> <div class="body"> <div class="body_img"></div> <div class="content"> <div class="notifi"></div> </div> </div> <div class="foot"> <div class="foot_content"></div> <div class="foot_nav"></div> </div> </body> </html>
CSS:
*{
margin: 0px;
padding: 0px;
}
.top{
width: 100%;
height: 50px;
background-color: black;
}
.top_content{
width: 75%;
height: 50px;
margin: 0px auto;
background: darkgrey;
}
.body{
width: 75%;
height: 1500px;
margin: 20px auto;
background: darkgray;
}
.body_img{
width: 100%;
height: 400px;
background-color: darkorange;
}
.content{
width: 100%;
height: 1100px;
background-color: blueviolet;
}
.notifi{
width: 100%;
height: 100px;
background-color: darkgray;
}
.foot{
width: 75%;
height: 400px;
background-color: indigo;
margin: 0px auto;
}
.foot_content{
width: 100%;
height: 350px;
background-color: darkseagreen;
}
.foot_nav {
width: 100%;
height: 50px;
background-color: slategray;
}Github下载地址:https://github.com/surrenderios/CSSBoxApply
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 