盒子模型布局稳定性
大部分情况下可以混用,哪个方便用哪个。
可以根据稳定性来分,建议:按照优先使用宽度(width)其次使用内边距(padding)再次外边距(margin)。
原因:
1.margin会有外边距合并还有ie6下面margin加倍的bug,所以最后使用。
2.padding会影响盒子大小,需要进行加减计算(麻烦),所以其次使用。
3.width没有问题,所以经常使用宽度剩余法,高度剩余法来做。
一列固定宽度且居中
<style>
.top,
.banner,
.main,
.footer {
width: 900px;
background-color: #eeeeee;
border: 1px dashed #cccccc;
}
.top{
height: 80px;
margin: 0 auto;
}
.banner{
height: 120px;
margin: 5px auto;
}
.main{
height: 500px;
margin: 0 auto;
}
.footer{
height: 100px;
margin: 5px auto 0;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="main">main</div>
<div class="footer">footer</div>
</body>
左右型结构
<style>
.top{
width: 900px;
height: 80px;
background-color: pink;
margin: 0 auto;
}
.banner{
width: 900px;
height: 150px;
background-color: purple;
margin: 0 auto;
}
.main{
width: 900px;
height: 500px;
background-color: skyblue;
margin: 0 auto;
}
.left{
width: 300px;
height: 500px;
background-color: yellow;
float: left;
}
.right{
width: 600px;
height: 500px;
background-color: forestgreen;
float: left;
}
.footer{
width: 900px;
height: 120px;
background-color: black;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="banner"></div>
<div class="main">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer"></div>
</body>
圆角边框(CSS3)
radius半径(距离)语法格式 border-radius: 50%;
<style>
body{
background-color: #cccccc;
}
.radius a{
width: 172px;
height: 172px;
background-color: #ffffff;
display: inline-block;
margin:30px;
border-radius: 50%;
text-align: center;
line-height: 172px;
color: red;
text-decoration: none;
font-weight: 700;
}
.radius a:hover{
background-color: red;
color: #ffffff;
}
</style>
</head>
<body>
<div class="radius">
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
<a href="#">文字内容</a>
</div>
</body>
盒子阴影(CSS3)
语法格式:
box-shadow: 水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影;
box-shadow: 0 15px 30px rgba(0, 0, 0, 4);
h-shadow 必需,水平阴影的位置,允许负值。
v-shadow 必需,垂直阴影的位置,允许负值。
blur 可选,模糊距离。
spread 可选,阴影尺寸。
color 可选,阴影颜色。
inset 可选,将外部阴影(outset)改为内部阴影。
<style>
div{
width: 200px;
height: 200px;
/* box-shadow: 2px 2px 20px 20px rgba(0, 0, 0, 0.4); */
/* transition: all 1s; */
}
div: hover{ /*鼠标经过div时的样子 */
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
</style>