CSS布局技巧

最近学习了CSS的一些知识，下面总结一下我学到的CSS布局技巧

1.左右布局

(1). 浮动
左右布局也叫横向布局，常用的方法是：
在所有子元素上添加浮动float:left;或float:right;
在父元素上添加上类名 clearfix
例如做一个导航栏时，
HTML如下

<div class="wrap clearfix">
    <div class="left"><a href="#">关于</a></div>
    <div class="middle"><a href="#">技能</a></div>
    <div class="right"><a href="#">作品</a></div>
</div>

css样式如下：

div.wrap {
    margin: 0;
    padding: 0;
    margin-top: 3px;
}
div.wrap>div {
    float: left;
    margin: 0 17px;
}

clearfix类的css样式如下：

.clearfix::after {
  content:'';
  clear:both;
  display:both;
}

最终效果：

image.png

(2) 绝对定位position : absolute;
在所有子元素上添加绝对定位position : absolute;
在父元素上添加上相对定位或绝对定位position : relative;或position : absolute;
同样是上面的例子
css样式如下：

div.wrap {
        position: relative;
}
div.wrap>div {
    position: absolute;
}
div.wrap>.left {
        left:0;
        top:0;
}
div.wrap>.right{
        right:0;
        top:0;
}

2.左中右布局

左中右布局可以根据情况使用左右布局中浮动和绝对定位两种方法，另外一种是BFC三栏布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-right: 20px;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: right;
        margin-left: 20px;
        background-color: blue;
    }   
    .main {
        height: 200px;
        overflow: hidden;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

3.水平居中

(1). 对于行内元素, 可以给行内元素的父元素设置 text-align:center,即可实现行内元素水平居中

span.parent {
        text-align:center;
}

(2). 对于定宽块级元素, 对该块级元素设置 margin:0 auto，前提是居中的块级元素宽度必须固定（定宽）

div{
        width:100px;
        margin:0 auto;
}

(3). 对于不定宽块级元素, 将该块级元素设置行内块级元素（display: inline-block;），在对该元素的父级元素设置text-align:center；

div{
        display: inline-block;
        text-align:center;
}

(4). 对于浮动元素, 可以设置父元素宽度设置为fit-content（CSS3）,并且配合margin:0 auto;

.parent{
        width:fit-content;
        margin:0 auto;
}

(5). 使用绝对定位，以及transform属性（CSS3）, 子元素设置如下:

.parent {
        position: relative;
}
.son{
        position:absolute;
        left:50%;
        transform:translate(-50%,0);
}

4.垂直居中

(1). 对于单行文本, 则可设置 line-height 等于父元素高度
(2). 使用绝对定位，以及transform属性（CSS3）, 设置父元素相对定位(position:relative), 子元素如下css样式:

.parent {
        position: relative;
}
.son{
        position:absolute;
        top:50%;
        transform: translate(-50%,-50%);
}

(3). 对于不定宽块级元素, 将该块级元素设置行内块级元素（display: inline-block;），利用伪元素和vertical-align: middle，样式如下：

.parent::after,
.son{
        display:inline-block;
        vertical-align:middle;
}
.parent::after{
        content:'';
        height:100%;
}

5.其他小技巧

(1). 元素脱离文档流的方法：

position: fixed; 脱离文档流相对于窗口定位
这种方法会使宽度往内缩，宽度需要重新设置
绝对定位：position:absolute;
脱离文档流相对于祖先中第一个relative元素定位

(2). :nth-child() 伪类选择器
nth-child(odd)父元素下的奇数子元素
nth-child(even)父元素下的偶数子元素

(3). 一些小工具

iconfont.cn 这个网站里有各种小图标可以用，搜索后选择合适的图标加入项目，可以自动生成代码
generator 对于一些写起来较为复杂的CSS样式，例如linear-gradient或者box-shadow,可以直接搜索 linear-gradient generator 这个工具会提供图形化界面，操作非常方便，直接生成代码，复制过来就行了
CSS Tricks 这个网站里面有很多大神的CSS作品例子，提供了源代码，可以直接在里面搜索相应的关键词，模仿学习

最后编辑于：2019.02.19 13:39:52