CSS总结

盒模型

页面渲染时，dom元素所采用的 布局模型，可以通过 box-sizing 进行设置，根据计算高度的区域可分为：

• content-box （W3C 标准盒模型）
• border-box （IE盒模型）

// content-box  div大小为 140 * 140，内容盒大小为 100 * 100
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: solid 10px black;
}

// border-box    div大小为 100 * 100，内容盒大小为 60 * 60
div {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 10px black;
}

选择器优先级

• !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
• 选择器 从右往左 解析

属性继承

• 所有元素可继承：visibility cursor
• 内联元素可继承：letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
• 块元素可继承：text-align text-indent

居中布局

水平居中

// 行内元素，在父元素上设置 text-align 即可
div {
    text-align: center;
}

// 块级元素，设置 margin
div {
    margin: 0 auto;
}

// absolute + transform 结合使用
div {
    position: relative;
    div {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
}

// flex + justify-content: center
div {
    display: flex;
    justify-content: center;
}

垂直居中

// 行内元素：line-height
div {
    height: 20px;
    line-height: 20px;
}

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
    }
}

// flex + align-items: center
div {
    display: flex;
    align-items: center;
}

// table
div {
    display: table-cell;
    vertical-align: center;
}

水平垂直居中

// absolute + transform
div {
    position: relative;
    div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

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

去除浮动影响

1、在标签结尾处加空div标签 clear:both
2、:after伪类       
 .clearfix:after {
 	content:"."; 
 	display:block; 
 	height:0; 
 	visibility:hidden;
 	 clear:both; 
 }

超出省略号

1.div内显示一行，超出部分用省略号显示

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

2.div内显示两行或三行，超出部分用省略号显示

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;		//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    -webkit-line-clamp: 2;（行数）
    -webkit-box-orient: vertical;			//必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

换行

强制不换行:

div { white-space:nowrap; }

自动换行:

div { 
	word-wrap: break-word; 
	word-break: normal; 
 }

强制英文单词断行:

div { word-break:break-all; }

注意：设置强制将英文单词断行，需要将行内元素设置为块级元素。

css动画

纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)
https://cubic-bezier.com/#.29,.55,.67,.33

animation：帧动画

animation-name：绑定到选择器的 keyframe 名称
animation-duration：完成动画所花费的时间，以秒或毫秒计
animation-timing-function：动画的速度曲线
animation-delay：动画开始之前的延迟
animation-iteration-count：动画的播放次数
animation-direction：是否轮流反向播放动画

transition：过渡动画

transition-property：过渡效果的 CSS 属性的名称
transition-duration：完成过渡效果所需要的时间
transition-timing-function：速度曲线
transition-delay：动画延迟时间

用 DIV 画一个三角形、梯形

三角形

<style>
.box{
　　width: 0;
　　height:0;
　　border-top:50px solid transparent;
　　border-right: 50px solid red;
　　border-bottom: 50px solid transparent;
　　border-left: 50px solid transparent;
}
</style>

<div class="box"></div>

梯形

.trangle{
　　width: 100px;
　　height: 100px;
　　border: 100px solid #000;
　　border-top-color: red;
　　border-bottom-color: yellow;
　　border-left-color: blue;
　　border-right-color: green;
}
<div class="trangle"></div>