左右布局
1.通过元素的浮动实现
代码
<style>
#box{
width: 600px;
border: 1px solid black;
padding:10px;
}
#box:after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
#son1{
float: left;
width: 40%;
border: 1px solid red;
}
#son2{
float: right;
width: 40%;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box">
<div id="son1">我是1</div>
<div id="son2">我是2</div>
</div>
</body>
效果
float
通过让元素脱离文档流来实现左右布局。
但此时要注意子元素脱离文档流以后，父元素里面由于没有东西而不能被撑开（父元素塌陷）
父元素塌陷解决方法：clearfix
#box:after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
2. 通过inline-block实现（不推荐）
代码
<style>
#box{
width: 600px;
border: 1px solid black;
}
#son1,
#son2{
display: inline-block;
width:45%;
}
#son1{
border: 1px solid red;
}
#son2{
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box">
<div id="son1">我是1</div>
<div id="son2">我是2</div>
</div>
</body>
效果
inline-block
左中右布局
原理与左右布局相同，就是多加了一个块元素。
通过调整块元素的宽度来使三个块元素能够分布在父元素中并列。
代码
<head>
<style>
#box{
width: 600px;
border: 1px solid black;
padding: 10px;
}
#box:after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
#son1,#son2,#son3{
width:30%
}
#son1{
float: left;
border: 1px solid red;
}
#son2{
float: left;
border: 1px solid blue;
}
#son3{
float: left;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="box">
<div id="son1">我是1</div>
<div id="son2">我是2</div>
<div id="son3">我是3</div>
</div>
</body>
效果
左中右布局
水平居中
1.行内元素的水平居中
将行内元素的父元素的text-align设为center
text-align: center;
2.块元素的水平居中
1. 给块元素设定一个宽度，然后将它的左右margin设为auto
div{
width: 600px;
margin: 0 auto;
}
2.inline-block
将块元素转换成行内元素，然后给块元素的父元素加上 text-align: center
div.father{
text-align: center;
}
div.son{
display: inline-block;
}
垂直居中
1.table-cell
代码
<head>
<style>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
background:red;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="box box1">
<span>垂直居中</span>
</div>
</body>
效果
垂直居中
2.display:flex
代码
{
display: flex;
justify-content:center;
align-items:Center;
}
效果同上
一些小技巧
1.画一个三角形
div{
border:1px solid red;
width: 10px;
height: 10px;
border-top-color:black:
boder-left-color: blue;
boder-right-color: green;
}
然后调整 边框的width，看看怎么调出一个三角形来
当 width=0 的时候 可以出来
把 height 也调成 0 吧
然后把其上左右 的 颜色 设为 透明 transparent 。
你可能还会用到 border-top-width:0 来得到一个倒立的直角三角形。
2. inline-block带来的bug
设置了display：inline-block元素下面一定会多出一小块空袭（类似于padding-bottom）如何消除这个bug呢。可以设置完display以后，加一句vertical-align：top
{
display：inline-block；
vertical-align：top;
}
把这两句话当成一个组合来用。
3.position: relative 带来的bug
如果用了 position：relative 会导致块元素缩水。即本来元素宽度是横跨整个页面，relative后宽度会变短
要改修复这个情况：（其实要调试一下才能理解）
首先 你不能直接给这个块元素 width：100% 会出bug，导致块元素宽度超过父元素宽度
所以可以用在块元素与他的父元素之间再加一个div
这样块元素的100%就不是相对于body 而是相对于新加的那个div。
网友评论