CSS一些小技巧

2018-06-13 本文已影响8人江湖竖子

搭建网页过程中，掌握一些CSS的小技巧，能够快速提高开发的效率，花了些许时间，学习整理了一些CSS布局技巧。

1.左右布局

左右布局，是最长用到的布局之一，内联元素默认根据文档流的方式，就是左右布局。采用内联元素进行左右布局，是最常见的左右布局方式。

但有时候，既需要块级元素的一些特性，又想要左右布局方式，实现的方式有很多，各种方式有有点也有缺点，这里只介绍一种最安全稳妥的方式，float:left或float:right,脱离文档流的方式，下面介绍这种方式。

例子：

<div class="clearfix">
    <div class="float-left">我想左右布局</div>
    <div class="float-left">我也想左右布局</div>
</div>

.clearfix:after{
  content:'';
  display:block;
  clear:both;
}
.float-left{
  float:left;
}

左右布局，只要给要进行左右布局的块级元素，添加float:left;元素就可以脱离文档流，进行左右布局。但是由于脱离文档流后，产生了父级无法包裹住浮动后的元素的问题。解决的方式是，在父级的伪元素::after中添加三个样式。

content:' '
display:block;
clear:both;

切记，三个样式是在父级的伪元素::after中添加，需要布局的元素只需要一个float浮动。

2.左中右布局

左中右布局，可以分为很多种。常见的有三等分、中间自适应左右固定宽度。

三等分

浮动布局+百分比
inline-block+百分比
父元素 display:table + 子元素 display:table-cell
display:flex；
bootstrap栅格系统

三等分的布局方式范式有很多，不局限与上面的几种方式。

中间自适应左右固定宽度

中间自适应，左右固定的方式，这是网页设计中，最常见的布局方式，有很多种实现方方式。下面一一介绍。

绝对定位布局
绝对定位布局，用到的是position脱离文档流的方式。在父级添加相对定位，给左右两栏设置宽度并添加绝对定位，分别定位于左右，中间栏则给一个左右margin值，margin值得大小为左右栏的宽度大小。
普通浮动布局
浮动布局，则是用之前讲过的float属性，给左栏的样式添加float:left,给右栏的样式添加float:right，中间栏的样式添加左右margin值，margin值为左右栏的宽度大小。
圣杯布局
圣杯布局，是Kevin Cornell在2006年提出的一个布局模型概念，圣杯布局的主要要求是：1.三列布局，中间宽度自适应，两边定宽。2.中间栏要在浏览器中优先展示渲染（即中间栏的div放在左右栏的前面）。布局的方式详见代码展示。
双飞翼布局
双飞翼布局和圣杯布局方案有一半是相同的，在左中右三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
flex布局
了解flex
了解flex效果
Flexible Box 缩写为flex，意思为”弹性布局”，能够给盒子模型很大的灵活性。
任何一个容器都可以指定为 flex 布局，所以flex 布局将成为未来布局的首选方式。

以上五个布局方式代码，可查看五个布局方式代码
以上五个布局方式效果，可查看五个布局方式代码效果

3.水平居中

水平居中的布局方式，也是前端开发中最常见的的方式，大概可以分为内联元素水平居中和块级元素水平居中。

水平居中公用的HTML

<div class="dad">
  <span class="son">内联元素水平居中</span>
</div>

1.内联元素水平居中
把内联元素包裹在块级元素中，在块级元素中添加，text-align:center样式即可实现水平居中。

.dad{
  text-align:center;
}

.
2.块级元素水平居中
块级元素实现水平居中的方式有很多的解决方式

margin:auto; 最常见的块级元素水平居中解决方式，前提是得设置宽度值width。

.son{
  width:50%;
  margin:auto;
}

display:inline-block;把块级元素设置为块级内联元素，则在父级元素添加text-align:cente,和内联元素的一致。

.dad{
display:inline-block;
}

display:flex;设置弹性布局，在父级添加display:flex及justify-content:center，子元素则可以水平居中。

.dad{
display:flex;
justify-content:center
}

float:left与position;
给要居中的元素添加float:left，使其脱离文档流。然后通过position进行居中定位。

这个方式，适用于父元素和子元素的宽度都确定的情况。
使用时，父元素position:relative，子元素position:absolute,然后通过left定位。

.dad{
width:800px;
position:relative;
}
.son{
width:400px;
position:absolute;
top:0;
left:200px;
}

4. 垂直居中

垂直居中公用的HTML

<div class="dad">
  <span class="son">内联元素垂直居中</span>
</div>

1.内联元素垂直居中

.son{
  height:200px;
  line-height:200px;
}

2.块级元素垂直居中

margin-top,这个方式是已经确定了父级和子级高度的情况下使用，对于高度不确定的，不适合。

.dad{
 height:300px;
}
.son{
height:200px;
margin-top:50px;
}

绝对定位垂直水平居中方式,前提是已经确定了宽度和高度。

dad{
  position:relative;
}
.son{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}

绝对定位垂直水平居中方式,未知宽度和高度。

.dad{
  position:relative;
}
.son{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform来实现 */
}

flex布局实现垂直水平居中,需要设置父级高度。

.dad{
    display: flex;
    justify-content:center;
    align-items: center;
    height: 300px;
}

5. 其他CSS小技巧

border绘制三角形

HTML

<div class="triangle"></div>

CSS

.triangle{
border:100px solid transparent;
width:0px;
height:0px;
border-left-color:green;
}

用max-width来防止图片撑破容器
针对大小未知的内容，为了防止内容过大而撑破容器，可以通过设置图片的max-width:100%来处理；