前端常用css总结

盒模型

盒模型从外到內分别是 margin border padding content

1.更改盒模型的默认宽高属性

box-sizing: content-box：默认值，标准盒子模型。尺寸计算公式：width = content的宽度，height = content的高度。宽度和高度都不包含内容的边框（border）和内边距（padding）。即蓝线框以内。
box-sizing: border-box;：尺寸计算公式：width = border + padding + content的 width， height = border + padding + content的 height。即黄线框以内。

2.获取宽高方式

dom.style.width/height ：这种方式只能取到dom元素内联样式所设置的宽高，即通过在html的style下设置的宽高，另外在外部css下设置的宽高是不可获取到的。
dom.offsetWidth/offsetHeight：兼容最好的。实际获取的是盒模型(width+border+padding)
拓展：
scrollHeight：获取对象的滚动高度
scrollWidth：获取对象的滚动宽度
scrollLeft：获取窗口左边界和对象在窗口中可见内容的最左端之间的距离
scrollTop：获取窗口上边界和对象在窗口中可见内容的最顶端之间的距离
offsetWidth：对象在窗口中可见区域的宽度（包括边线）（offsetWidth = width + border + padding）
clientWidth：对象在窗口中可见区域的宽度（不包括边线）（clientWidth = width + padding）
offsetLeft：获取对象的外边框和它上层对象的内边框之间的距离（offsetLeft = left + marginLeft）

3.BFC原理

1.定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，它规定了内部的子元素如何布局，并且与这个区域外部毫不相干（即容器里面的子元素不会影响到外面的元素，反之也如此）。BFC原理为解决边距塌陷（重叠）。
作用：

可以闭合浮动（实例3）（计算BFC的高度时，浮动元素的高度也参与计算，可以利用BFC的这个特性来“清浮动”，应该说包含浮动）
防止与浮动元素重叠（实例2）
与其他对象进行隔离：利用BFC包含一个元素，防止这个元素与BFC外的元素发生margin collapse（实例1）

2.有哪些属性会生成bfc？

根元素即<html>
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

3.实例分析

防止垂直 margin 重叠

  <div class="first"></div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  
  .first{
    margin:20px;
    background:lightgreen;
    width:100px;
    height:100px;
  }
  ul{
    /*display:inline-block;*/
    margin:10px;
    background:lightblue;
  }
  li{
    margin:25px;
  }

解决方案：要阻止相邻元素的重叠，只需让ul生成BFC即可（在ul的css属性上加display:inline-block），这样div、ul、li之间便不会发生重叠现象，而li位于同一BFC内所以仍然存在重叠现象。

防止与浮动元素重叠

  <div class="aside"></div>
  <div class="main"></div>
  
  .aside {
    width: 100px;
    height: 150px;
    float: left;
    background: #f66;
  }
 
  .main {
    height: 200px;
    background: #fcc;
  }

解决方案：要阻止main与浮动的aside重叠，可以将main生成BFC（在main的css属性上加overflow: hidden）

清除内部浮动
浮动元素的父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）

  <div class="par">
    <div class="child"></div>
    <div class="child"></div>
  </div>
  
  .par {
    <!--overflow:hidden-->
    border: 5px solid #fcc;
    width: 300px;
  }
  .child {
    border: 5px solid #f66;
    width:100px;
    height: 100px;
    float: left;
  }

解决方案：为达到清除内部浮动，我们可以触发par生成BFC（在par的css属性上加overflow:hidden或display:inline-block），那么par在计算高度时，par内部的浮动元素child也会参与计算。

更多清除内部浮动的方法

clear清除浮动（添加空div法）：在浮动元素下方添加空div，并添加clear:both样式（会增加渲染负担）

<div class="par">
    <div class="child"></div>
    <div class="child"></div>
    <div style="clear:both;"></div>
</div>

给浮动的父级设置高.par {height: 110px;}
给父级同时设置浮动.par {float:left}
万能清除法->after伪类清浮动（现在主流方法，推荐使用）

.par:after{
    content:"";
    clear:both;
    display:block;
}

居中方法

<div class="parent">
  <div class="child">1</div>
</div>

1.table-cell布局

.parent{
  width:100px;
  height:100px;
  display: table-cell;
  vertical-align: middle;//垂直居中
  text-align: center;//水平居中
}

2.针对无法设置宽度的元素（兼容性不好）

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

3.flex布局(兼容性不好)

.parent{
  display: flex;
  justify-content: center;//水平居中
  align-items:center;//垂直居中
}

4.针对行内(inline-)元素

.child{
  width: 100px;
  height: 100px;
  line-height: 100px;//垂直居中（设置内联元素的高度(height)和行高(line-height)相等）
  text-align: center;//水平居中
}

5.针对非行内元素（限水平居中）

.parent{
  width:200px;
}
.child{
  width:100px;//必须设置子元素的宽度
  margin:0 auto;
}

6.margin结合绝对定位（子元素的高宽需知道）

.parent{
   position:relative;   
}
.child{
  position:absolute;
  width:50px;//必须设置宽度
  height:50px;//必须设置高度
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

流式/自适应/响应式/弹性布局

区别： 当屏幕分辨率发生变化时，静态布局的元素位置和大小都不会发生变化，流式布局的元素大小会变化但布局不会变化（百分比布局），自适应布局的元素位置发生变化但大小不会变化（自媒体查询技术），响应式布局的元素位置和大小都会发生变化（结合了流式布局和自适应布局），弹性布局的元素宽高等比例缩放（em/rem）。

详情看这一篇：

www.cnblogs.com/zhuzhenwei9…

几种布局例子：

www.liquidapsive.com/

流式布局（Liquid Layout）

实现方法：

使用%（百分比）定义宽度，高度大都是用px来固定住，根据可视区域 (viewport)和父元素的实时尺寸进行调整。
使用vw/vh来定义宽度/高度
配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

自适应布局（Adaptive Layout）

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

实现方法：

用margin撑开

.left{
    width:100px;
    float:left;
    <!--或者-->
    <!--position:absolute;-->
    <!--left:0;-->
}
.right{
    margin-left:100px;
}

使元素形成bfc

.left{
    float:left;
    width:100px;
}
.right:{
    overflow: hidden;
}

使用flex

.main{
    display:flex
}
.left{
    flex:0 0 100px;
}
.right{
    flex:1;
}

响应式布局（Responsive Layout）

选择加载css

用html标签加载CSS文件
link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
（如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件）
在现有CSS文件中加载
@import url("tinyScreen.css") screen and (max-device-width: 400px)
CSS的@media规则

@media (min-width: 400px) and (max-width: 600px){
.col-sm-6{
  padding: calc((33vw - 100px) / 2) 8px ;
  flex: 0 0 calc(50% - 16px);
  max-width: calc(50% - 16px);
}

弹性布局（em/rem布局）

rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。
flex布局也是弹性布局，详情参考： www.ruanyifeng.com/blog/2015/0…

display相关

block：div等容器类型
inline：img span等行内类型
inline-block：可设置宽度的行内元素，两者间有一点间隙
table：将样式变成table类型（计算量比较大）
flex：伸缩容器，参考弹性布局的flex
grid：网格容器，详情参考：www.css88.com/archives/85…
inherit：继承父级

position相关

1.static(默认)

2.relative（相对定位）

相对它原本在文档流中的位置而进行的偏移
遵循正常的文档流
最外层以body为原点定位

<div class="first"></div>
<div class="second"></div>

.first{
    position:relative;
    top:20px;
    left:20px;
}

.first{
    margin:20px;
    position:relative;
    top:20px;
    left:20px;
}

从图中可以看出，first元素相对于原来的位置有了一个外边距20px，再根据margin后的位置分别向下和向右移动20px的距离，而second元素相对于原来的位置向下40px。

从图中可以看出，因为html和body元素相差大概有9px左右，所以absolute元素比relative元素向上和向左各9px。

3.absolute（绝对定位）

相对它祖类（父类及以上）元素的位置而进行的偏移
祖类的position非static
脱离正常的文档流
且最外层以html为原点定位

<div class="main">
  <div class="first"></div>
  <div class="second"></div>
</div>

.main{
    position:relative;
    padding:10px;
}
.first{
    position: absolute;
    left:100px;
}

从图中可以看出，first对象脱离出文档流，相对于父元素main对象（绿边框）向右移动了100px，并且不受父元素padding的影响，而second对象则因为first对象脱离出文档流后，来到了first原先的位置。

4.fixed

相对于浏览器窗口进行偏移（即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的）
脱离正常的文档流

伪类/伪元素

1.伪类

:actived：将样式添加到被激活的元素（即当鼠标按下时，元素会被添加新样式）
:focus：将样式添加到被选中的元素（即元素被鼠标按下之后，元素一直会被添加新的样式，直到另一个元素被按下）
:hover：当鼠标悬浮到元素上方时，向元素添加样式。
:link：将样式添加到未被访问的链接
:visited：将样式添加到被访问过的链接
:first-child：将样式添加到元素的第一个子元素（多用于ul下的li或者tr下面的td或th）

<ul>
    <li>第一名</li>
    <li>第二名</li>
    <li>第三名</li>
</ul>

ul li:first-child{
    color:blue;
}

2.伪元素

::first-letter：将样式添加到文本的首字母
::first-line：将样式添加到文本的首行
::before/::after：在元素之前或之后插入某些内容（这里的“前后”并不是位置上的前后，而是文档流里的前后），要配合‘content’来使用
例如：这里气泡前面的小三角就是用伪元素做出来的

<div class="demo">
    <img src="../../assets/image/user.png" width="30px">
    <span class="content">你好</span>
</div>

.demo{
  position: relative;
}
.content:before{
  content:'\25c2';//unicode几何图形根据下图列表来参照
  color:#5cb34e; //图形颜色
  font-size: 40px;//图形大小
  position: absolute;
  left:-12px;
  top:-20px;
}
.content{
  position: relative;
  top:-4px;
  left:10px;
  border-radius: 10px;
  background: #5cb34e;
  padding: 10px 20px;
  color:white;
}

这种是文字旁边两条线效果

<div class="other"><span>第三方登录</span></div>

.other {
      position: relative;
      width: 100%;
      text-align: center;

      span::before,
      span::after {
        content: "";
        width: 100px;
        height: 1px;
        background: #cbcbcb;
        position: absolute;
        top: 50%;
      }

      span::before {
        left: 0;
      }

      span::after {
        right: 0;
      }
    }

3.伪元素和伪类的区别

两者的本质区别就是是否抽象创造了新元素

伪类只可以用单冒号,伪元素可以采用双冒号也可以单冒号。
伪类的效果可以通过添加实际的类来实现，存在DOM文档中。伪元素的效果是通过添加实际的元素来实现，不存在在DOM文档中，是虚拟的元素。

<div>
    <p>a</p>
    <p>b</p>
</div>

下面是伪类的使用示例，它和向元素中添加类是等价的

p:first-child {
    color: red;
}

<div>
    <p class="first-child">a</p>
    <p>b c</p>
</div>

p .first-child {
    color: red;
}

下面是伪元素的使用示例，它和向元素中添加实际的元素是等价的

p::first-letter {
    color: red;
}

<div>
    <p><span>a</span></p>
    <p>b c</p>
</div>

p span{
    color:red;
}

伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。

p:first-child:hover {
    color: red;
}

伪类只能设置样式不能设置内容，伪元素可以设置content属性。

用css画形状

<div class="shape"></div>

1.画三角形

.shape{
    width: 0px;
    height: 0px;
    border-width: 50px;
    border-style: solid;
    border-color: transparent transparent blue;
}

.shape{
    width: 0;
    height: 0;
    border-top: 100px solid #EC0465;
    border-right: 100px solid transparent;
}

2.画心形

实际上是由一个正方形和两个半圆形组成

.shape{
    width: 100px;
    height: 100px;
    background: #f61344;
    position: relative;
    transform: rotate(45deg);
}
.shape::before,
.shape::after {
    content: "";
    background: #f61344;
    position: absolute;
}
.shape::before {
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
    left: -49px;
    top: 0;
}
.shape::after {
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
    top: -49px;
    left: 0;
}

css3

transform 转换

1. 定义

对元素进行移动、缩放、旋转、或拉伸

2. 转化方法

translate()：移动，同理有translateX、translateY
transform: translate(50px,100px) 元素向右移动 50px，向下移动 100px
rotate()：2D旋转
transform: rotate(30deg) 元素顺时针旋转30度
rotateX()/rotateY()：3D旋转
transform: rotateX(30deg) 元素沿X轴顺时针旋转30度
scale()：缩放，同理有scaleX、scaleY
transform: scale(2,4) 元素宽度转换为原始尺寸的 2 倍，高度转换为原始高度的 4 倍
拓展：zoom属性可以等比例缩放元素
例：div{width:10px;height:20px;zoom:.5}div的宽、高为原始尺寸的0.5倍
skew()：倾斜旋转，同理有skewX、skewY
transform: skew(30deg,20deg) 元素沿X轴的横轴旋转30度，沿Y轴的纵轴旋转20度
matrix()：把所有 2D 转换方法组合在一起，使用六个值的矩阵，允许旋转、缩放、移动以及倾斜元素

transition 过渡

1. 定义

元素从一种样式逐渐改变为另一种的效果

2. 转化方法

规定希望把效果添加到哪个 CSS 属性上
规定效果的时长（如果不规定时长则默认为0）
需向多个样式添加过渡效果，由逗号隔开（如果改变全部的样式则使用all）
需要延时则使用delay属性

例：当鼠标放到元素上，延时1s后，宽度从100px在2s内逐渐变成300px，沿顺时针方向旋转180度

div{
    transition: all 2s 1s;
    width:100px;
}
div:hover{
    width:300px;
    transform:rotate(180deg);
}

@keyframes 动画

1.定义

指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

2.转化方法

规定动画的名称
必须绑定到一个选择器，且规定动画的时长(可以使用百分比来规定变化发生的时间，最佳浏览器支持)
有多个样式用封号隔开

@keyframes myfirst//规定动画名称
{
    from {background: red; left:0px; top:0px;}
    to {background: yellow; left:200px; top:0px;}
    <!--0%   {background: red;}-->
    <!--25%  {background: yellow;}-->
    <!--50%  {background: blue;}-->
    <!--100% {background: green;}-->
}
div
{
    animation: myfirst 5s;//把myfirst绑定到animation上，并规定动画时长为5s
}

合并起来的简写手法如下，分别是：动画名称、动画时长、速度曲线、延时、播放次数、是否逆向播放

div
{
    animation: myfirst 5s linear 2s infinite alternate;
}

前端 常用css总结

盒模型

1.更改盒模型的默认宽高属性

2.获取宽高方式

3.BFC原理

1.定义

2.有哪些属性会生成bfc？

3.实例分析

居中方法

1.table-cell布局

2.针对无法设置宽度的元素（兼容性不好）

3.flex布局(兼容性不好)

4.针对行内(inline-)元素

5.针对非行内元素（限水平居中）

6.margin结合绝对定位（子元素的高宽需知道）

流式/自适应/响应式/弹性布局

流式布局（Liquid Layout）

自适应布局（Adaptive Layout）

响应式布局（Responsive Layout）

弹性布局（em/rem布局）

display相关

position相关

1.static(默认)

2.relative（相对定位）

3.absolute（绝对定位）

4.fixed

伪类/伪元素

1.伪类

2.伪元素

3.伪元素和伪类的区别

用css画形状

1.画三角形

2.画心形

css3

transform 转换

1. 定义

2. 转化方法

transition 过渡

1. 定义

2. 转化方法

@keyframes 动画

1.定义

2.转化方法

前端常用css总结