CSS基础三（布局）

１．左右布局
２．左中右布局
３．水平居中
４．垂直居中
５．等其他小技巧

１．左右布局

实现方法一：直接用float

直接使用float会导致，当页面变窄，不够放右边的部分的时候，会流下去。

  <div class="left"></div>
  <div class="right"></div>

.left{
  width: 100px;
  height: 100px;
  background: #000;
  float: left;
}
.right{
  width: 100px;
  height: 100px;
  background: green;
  float: left;　//或者右浮动
}

记得给父元素清除浮动
如果给定父元素的宽度，可以灵活运用width: num%，来实现布局

实现方式二：margin+float

<div class="left">定宽</div>
<div class="right">自适应</div>

.left{
  width: 100px;
  height: 100px;
  background: red;
  float: left;
}

.right{
  margin-left: -100px;
  height: 100px;
  background: yellow;
}

效果图

会发现，两个并不齐，还得调整。

实现方式三：绝对定位

<div class="left"></div>
<div class="right"></div>
.left{
  width: 100px;
  height: 100px;
  background: #000;
  position: absolute;
}
.right{
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  left:100px
}

效果图

实现方式四：inline-block

<div class="left">..</div>
<div class="right">..</div>

/*实际测试，发现50%没法用，会挤下去，不知道为啥*/
.left {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  background-color: grey;
}
.right {
  display: inline-block;
  vertical-align: top;
  width: 50%;
  background-color: pink;
}

修改为48％的效果图：

image.png

２．左中右布局

实现方式一：float

<div class="left">..</div>
<div class="middle">...</div>
<div class="right">..</div>

div{
  float: left;
}
.left{
  width:30%;
  background: #000;
}
.middle{
  width:40%;
  background: grey;
}
.right{
  width: 30%;
  background: red;
}

image.png

实现方式二：float + margin + calc（两侧定宽）

  <div class="wrap clearfix">
    <div class="left">..</div>
    <div class="middle">...</div>
    <div class="right">..</div>
  </div>
.left{
  width:100px;
  background: #000;
  float: left;
}
.middle{
  width: calc(100% - 200px);
  background: grey;
  float:left;
}
.right{
  width: 100px;
  background: red;
  float: right;
}

效果

３．水平居中

行内元素：

行内元素（主要是表现为文字，图片等行内元素），通过在父级元素设置 text-align:center使子级行内元素居中。

定宽块级元素：

为定宽块级元素设置：

margin-left: auto;
margin-right: auto;

不定宽块级元素：

方法一：设置 position:relative 和 left:50%

<div>
     <ul>
        <li><a href="#">我是要</a></li>
        <li><a href="#">居中的</a></li>
        <li><a href="#">ul标签</a></li>
     </ul>
</div>
div{
    display: inline-block;
    position:relative;
    left:50%
}
ul{
    list-style:none;
    margin:0;
    padding:0; 
    position:relative;
    left:-50%;
}
li{
    float:left;
    margin-right:8px;
}

通过给父元素设置 display:inline-block，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

方法二：设置 display:inline 方法：

通过给父元素设置display: inline的方法，然后用行内元素居中的方式

４．垂直居中

方式一，行内元素可以使用line-height；

方式二，定高的块级元素可以使用display:inline-block然后同上，或者用padding来实现；

方式三：使用 position 和 transform

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

效果

５．等其他小技巧

浮动：

浮动会造成父元素塌陷

html
css
效果

解决方法：给浮动元素的父元素，清除浮动；

清除浮动

宽度：

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况

其他：

box-shadow神器