经过这几天的学习,已经基本掌握制作静态网站的方法。在学习过程中也出现了许多问题,总结如下:
浮动带来的影响
float的属性:left, right, 默认是none;
-
如果父元素没有设置宽度,而子元素全部浮动,那么父元素高度将会变为0
-
前面的元素浮动之后,会给后面的元素带来影响
此时我们需要清除浮动带来的影响,以让后续元素可以正常执行
清除方法
- 隔墙法
<div class="clear"></div> .clear{clear:left/right/both}
- 给父元素一个高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.fu1{
height: 500px;
/*background-color: ;*/
}
.c1{
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.c2{
width: 200px;
height: 400px;
float: left;
background-color: #888;
}
.fu2{
height: 150px;
background-color: #222;
}
</style>
</head>
<body>
<div class='fu1'>
<div class='c1'>
</div>
<div class='c2'>
</div>
</div>
<div class='fu2'>
</div>
</body>
</html>
- 伪元素法
.clearfix:after{
/*在box1盒子后面添加内容*/
content:'.';
/*设置为块,结合clear:both去想*/
display: block;
/*隐藏这个块,但是还占位置*/
visibility: hidden;
/*去掉高度,不占位置,取消冗余,*/
height:0;
/*最后清除浮动的影响*/
clear:both;
}
- overfiow:hidden;
垂直水平居中
水平居中
- 方法一:在父容器上定义固定宽度,margin值设成auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld</title>
</head>
<style type="text/css">
.div1{
background-color: blue;
width: 200px;
margin: auto;
}
.div2{
background-color: orangered;
}
</style>
<body>
<div class="div1">
<div class="div2">
你好啊!!!!!!!!!
</div>
</div>
</body>
</html>
- 方法2:在子元素中将display设置为inline-block,父元素text-algin设置为center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld</title>
</head>
<style type="text/css">
.div1{
background-color: blue;
text-align: center;
}
.div2{
display: inline-block;
background-color: orangered;
}
</style>
<body>
<div class="div1">
<div class="div2">
你好啊!!!!!!!!!
</div>
</div>
</body>
</html>
垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>helloworld</title>
</head>
<style type="text/css">
.div1{
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.div2{
/*display: inline-block;*/
background-color: orangered;
}
</style>
<body>
<div class="div1">
<div class="div2">
你好啊!!!!!!!!!
</div>
</div>
</body>
</html>
文本居中
- height + line-height:两者配合使用,垂直方向居中
- text-align:父级的text-align,水平方向居中
注意:text-align:center ;只是将子元素里的内联元素居中
如果不是内联元素就要用到 margin: 0 auto;
<style>
.word{
width: 100px;
height: 30px;
background: #E5E5E5;
text-align: center;
line-height: 30px;
font-size: 14px;
}
</style>
<div class="word">
<p>lorem</p>
</div>
这个词在div中妥妥居中