CSS布局
2018-07-30 本文已影响0人
yemansleep
1.左右布局
image.png
1.1 介绍
主要是利用 float CSS属性，让元素从网页的正常流动中移除，left左浮动，right右浮动。
1.2 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 500px;
height: 500px;
border: 1px solid red;
}
#left{
background-color: blue;
height: 250px;
width: 250px;
float: left;
}
#right{
background: yellow;
height: 250px;
width: 250px;
float:right;
}
</style>
</head>
<body>
<div id="bd">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
2 左中右布局
image.png
2.1介绍
主要还是是利用 float CSS属性，left左浮动，right右浮动，center自动适应调整自身宽度。
2.2源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 450px;
height: 100px;
border: 1px solid red;
}
#left{
background-color: blue;
height: 50px;
width: 150px;
float: left;
}
#center{
margin:0 150px;
height: 50px;
background-color: cadetblue;
}
#right{
background: yellow;
height: 50px;
width: 150px;
float:right;
}
</style>
</head>
<body>
<div id="bd">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
</body>
</html>
3. 水平居中
3.1 宽度确定的情况下，可以利用设置margin的左右值为auto来实现。
image.png
3.1.1源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 450px;
height: 100px;
border: 1px solid red;
}
#center{
margin: 0 auto;
height: 50px;
width: 100px;
background-color: cadetblue;
}
</style>
</head>
<body>
<div id="bd">
<div id="center"></div>
</div>
</body>
</html>
3.2 通过设置元素的为inline-block属性，并且在其父系容器中设置text-align的属性为"center"，如没有父系容器可自己添加一个父系容器来实现。
image.png
3.2.1源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 450px;
height: 100px;
border: 1px solid red;
text-align: center
}
#center{
height: 50px;
background-color: cadetblue;
display: inline-block;
}
</style>
</head>
<body>
<div id="bd">
<div id="center">123</div>
</div>
</body>
</html>
3.3 绝对定位实现水平居中，利用绝对定位，父系容器left: 50%，子容器right: 50%。
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 450px;
height: 100px;
border: 1px solid red;
position: absolute;
left: 50%;
}
#center{
height: 50px;
background-color: cadetblue;
position: relative;
right: 50%;
}
</style>
</head>
<body>
<div id="bd">
<div id="center"></div>
</div>
</body>
</html>
4. 垂直居中
4.1 在父系容器高度确认的情况，可以用height=line-height来实现
image.png
4.1.1源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 450px;
height: 100px;
border: 1px solid red;
}
#center{
line-height: 100px;
position: relative;
}
</style>
</head>
<body>
<div id="bd">
<div id="center">123</div>
</div>
</body>
</html>
4.2 可以利用CSS3 中的flexbox 布局
image.png
4.2.1 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
#bd{
width: 450px;
border: 1px solid red;
}
#center{
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div id="bd">
<div id="center">123</div>
</div>
</body>
</html>
5. CSS技巧
5.1 ::before 和 ::after
::before和::after 是用来给元素添加额外内容的,因为只存在于作用元素内容的前后。
例：利用::before和::after ，我们可以很简洁的画出一个太极来。
image.png
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>taiji</title>
<style>
body {
background-color: #abcdef;
}
.taiji {
width: 0px;
height: 600px;
border-left: 300px solid black;
border-right: 300px solid white;
border-radius: 50%;
}
.taiji::before {
content: '';
display: block;
width: 100px;
height: 100px;
border: 100px solid black;
border-radius: 50%;
background-color: white;
margin-left: -150px;
}
.taiji::after {
content: '';
display: block;
width: 100px;
height: 100px;
border: 100px solid white;
border-radius: 50%;
background-color: black;
margin-left: -150px;
}
</style>
</head>
<body>
<div class="taiji">
</div>
</body>
</html>
5.2 :nth-child
选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
例：利用选择器，我们可以很简单的为奇数的元素设置单独的属性
image.png
5.2.1 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style>
p:nth-child(odd){
width: 50px;
background:#ff0000;
}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
