CSS的一些技巧和知识

---

title: CSS的一些技巧和知识
date: 2018-09-14 16:58:07
tags: [CSS]
categories: CSS

---

CCS布局技巧

1. 左右布局

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

<div class="parent clearfix">
    <div class="leftChild"></div>
    <div class="rightChild"></div>
</div>

设置浮动

左右布局常用的方法就是为子元素设置浮动，然后在其父元素上使用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:50%;
  top:0;
}

2. 左中右布局

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

3. 水平居中

内联元素（比如文本和链接）

在块级父容器中让内联元素水平居中，只需设置 text-align: center;

块级元素

让单个块级元素水平居中的方法：先设置块级元素的 width，赋予一个宽度；然后设置块级元素的 margin: 0 auto;

多个块级元素

如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display: inline-block; 或者父级容器的 display: flex;

<main class="inline-block-horizon-center">
    <div>I'm an element</div>
    <div>I'm an element</div>
    <div>I'm an element</div>
</main>
<main class="flex-horizon-center">
    <div>I'm an element</div>
    <div>I'm an element</div>
    <div>I'm an element</div>
</main>


main div {
    max-width: 125px;
}
.inline-block-horizon-center {
    text-align: center;
}
.inline-block-horizon-center div {
    display: inline-block;
    vertical-align: middle/top;
}
.flex-horizon-center {
    display: flex;
    justify-content: center;
}

如果想让多个块级元素垂直堆栈的水平对齐，依然可以通过设置 margin: 0 auto;

main div {
    margin: 0 auto;
}
main div:nth-child(1) {
    width: 200px;
}
main div:nth-child(2) {
    width: 400px;
}
main div:nth-child(3) {
    width: 125px;
}

4. 垂直居中

内联元素

单行

• 方法1：设置内联元素的块级父容器的 height 和 line-height 值相等

• 方法2：对于单行的内联元素，也可以添加等值的 padding-top 和 padding-bottom 实现垂直居中

多行

• 方法1：对于多行的内联元素，也可以添加等值的 padding-top 和 padding-bottom 实现垂直居中

• 方法2：使用 flexbox 实现垂直居中，因为对于父级容器为 display: flex 的元素来说，它的每一个子元素都是垂直居中的

块级元素

已知高度

先让元素 绝对定位 到父容器的中心点，然后设置 负向margin，负值的大小为其自身高度的一半 NOTE: 如果父元素设置了padding，则计算 负向margin 时，负值的大小为：其自身高度的一半再加上父元素的内边距

main {
    position: relative;
}
main div {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
}

未知高度

如果我们不知道块级元素的高度，那么就需要先将元素定位到容器的 中心位置，然后使用 transform 的 translate 属性，将元素的中心和父容器的 中心重合，从而实现垂直居中

main {
    position: relative;
}
main div {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

使用flexbox

高度不定则

div {
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

宽高固定则

div {
    display: flex;
    justify-content: center; 
    align-items: center;  
}

• 更多相关可参考: CSS居中指南
  https://www.w3ctech.com/topic/1515

---

position属性

position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky。

1. position: static

static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。

2. position: relative

relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。

3. position: absolute

absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：

1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。

2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。

4. position: fixed

可以简单说fixed是特殊版的absolute，fixed元素总是相对于浏览器窗体定位的。

5. inherit

继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

6. sticky

在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

• 更多相关可参考网站:
  http://www.cnblogs.com/s1nker/p/4835079.html

---

CSS其他技巧和知识

引用CSS的四种方式

1. 内联style属性
2. style标签
3. 引用外部css文件 link标签
4. @import url(./style.css);

清除float导致浮动的方法

• 在float元素的父级元素上加上clearfix的class，示例见第一部分左右布局，

元素的高度是由什么决定的？

• 元素的高度，由其内部文档流元素的高度总和决定
• 文档流: 文档内元素的流动方向
• 尽量不写高度宽度，用padding和line-height解决，否则可能造成bug
• 字体较小的时候，可用line-height控制内联元素的高度

中文会自动换行而英文不会

word-break: break-all;  使得一串英文会被打断 分开
word-break: break-word;  使得不会打断 分开

用CSS画三角形的方法

.triangle{
    border: 10px solid transparent;
    width: 0px;
    border-left-color: #E6686A;
    border-top-width: 0px;
}

伪元素::before和::after

相当于div

加上这两行的代码才会显示内容
content: "";
display: block;
（如果是position:absolute就不用加，因为绝对定位后元素会默认display:block;）

让导航栏在同一行里均匀分布

给ul加css

ul{
  display:flex;  
  justyfy-content:space-between;
}

去掉li的float:left
去掉ul的clearfix

icon图标素材资源的网站

• http://www.iconfont.cn
  阿里巴巴的矢量图标管理、交流平台。

其他CSS相关的补充

1. 用到display:inline-block 一般要再加vertical-align:top
2. 背景图铺满整个背景 background-size:cover
3. box-sizing: border-box; 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的
4. linear-gradient 渐变色
5. 尽量不写高度宽度 用padding和line-height解决