2018-05-22 CSS 左右布局、左中右布局以及一些小技巧

1、左右布局

如果有以下html结构，设置左右两栏布局

• 设置浮动：左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用clearfix类清除浮动。示例代码如下：

.clearfix::after{
  content:"";
  display:block;
  clear:both;
}
.leftChild,
.rightChild{
  float:left;
}

• 设置position绝对定位，为父元素设置position:relative; 为子元素设置position:absolute 。示例代码如下：

.parent{
  position:relative;
}
.leftChild{
  position:absolute;
  left:0;
  top:0;
}
.rightChild{
  position:absolute;
  left:200px;
  top:0;
}

2、左中右布局

左中右布局主要方法也是浮动或者绝对定位，不过可以分情况选择其一使用甚至结合使用。

3、特定情况下使用浮动还是绝对定位

• 使用浮动时：不需要计算特别精确的位置，不过不易操控，浮动元素的宽度需要注意，否则会换行展示，适用于导航栏等地方。
• 使用绝对定位：需要计算元素的具体位置，不过更加准确，易于操控。
• 当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，建议使用浮动
• 当特定元素的位置是相对父元素固定，或者内容宽高确定，需要精确定位甚至以后要用js操作变换位置时，建议使用浮动。

4、能解决80%以上的常用两栏、三栏布局方式

• PC端
  IE——float浮动布局
  Chrome等——flex弹性布局
• 移动端：flex弹性布局

5、其他小技巧

• 使用伪元素清除浮动 ，代码展示见下一条。
• 当要达到一个元素hover状态下有边框，正常情况下无边框时，如果直接在hover状态添加边框，该元素会因为多出来的border宽度导致位置有略微改变。技巧：可以在普通情况下就添加透明色的边框，hover时改变颜色即可。比如
  html代码：

  
link1
  
link2
  
link3
  
link4
  
link5
  
link6

css代码

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
nav{
  border: 1px solid red;
  float: right;
}
nav > li{
  float: left;
  list-style: none;
}
nav > li > a{
  text-decoration: none;
  color:inherit;
  display: inline-block;
  margin:5px;
  padding:10px;
  border: 3px solid transparent;
  transition:0.3s;
  
}
nav > li > a:hover{
  border:3px solid blue;
}

效果图：

• 水平线样式设置
  代码示例：

hr{
    height:0;
    border:none;
    border-top:1px solid red;
}

• dl中dd、dt设置左右结构
  html代码

  

    
num
    
1
    
num
    
2
    
num
    
3
    
num
    
4
  

css代码

main > dl{
  width:300px;
  border: 1px solid;
}
main > dl >dt,
main > dl >dd{
  float: left;
  width:30%;
  box-sizing:border-box;
  border:1px solid blue;
}
main > dl >dd{
  width:70%;
}

效果图：

• 一些图标素材可以使用iconfont网站 来查找
• 合理使用伪元素（如::after、::before）
• 块级元素宽度自使用，合理使用max-width属性
• a标签去掉其默认样式时，颜色可设置为继承父元素a{color:inherit;}