overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;隐藏超出部分，出省略号
一定要先布局！布局！布局！要先设置好色块，将位置确定。
布局的时候一定要先设置好，宽高，位置，
尽量不要用margin属性调特别大！！的位置！！！
box-sizing: border-box;/*自适应盒子*/
line-height: 50px;/*居中*/
list-style-type: none;/*有序无序列表样式消除*/
cursor: pointer;/*改变鼠标样式*/
border-bottom: 1px dotted #ddd;/*边框样式改变*/
text-indent:2em;/*首行缩进*/
input style :”outline:none;”/*将输入框的边框隐藏，界面优化*/
背景图要先设置好宽高，设置行。块。行内块。元素。才可连接无内容显示图片。
对于自身定位（relative）可以设置上下左右padding值确定背景的变化。（国务院）
bootstrap
<link rel="shortcut icon" href="images/favicon.ico">/*设置网页栏的图标*/
css3
兼容性：
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border (边框)
边框圆角 radius: 25px;（或者百分比）
盒子阴影 box-shadow:左右偏移量 上下偏移量 虚化程度 颜色；
边界图片 border-image：url(图片路径) 上下边框 左右边框 stretch(拉伸)round(平铺)；
background(背景图片)
可添加多张图片进行位置调控。
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
#example1 {
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
background-origin指定背景图的位置区域。（背景裁剪：background-clip）
border-box;设置在盒子里面的位置。
content-box;设定在内容里面的位置。
背景裁剪
渐变
background：Linear Gradients（方向(180deg) red blue ）；线性渐变
从上到下（默认） to right(从左向右) to bottom right（对角线）
可以带有角度的变化
重复的线性渐变
background: repeating-radial-gradient(red, yellow 10%, green 15%);
background：Radial Gradients（ 180deg red blue）；径向渐变
background: radial-gradient( （形状） red 15%, green 25%, blue 60%);
circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse
可以为负值。
文本效果
text-overflow：隐藏掉无法显示的文字。hidden。
文字的强制换行。word-wrap word-break。
可引入字体文件。
2D、3D转换。
转换：transform:属性；
偏移translate(30px，50px);方法
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
旋转rotate(30deg);方法
在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
放大缩小scale(2（2倍宽度），3（3倍高度）);方法
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
过渡效果：transition
transition: width 2s;通过设置秒数，改变过渡的样式。
动画：animation
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@keyframes myfirst{
from {background:red;}
to {background:yellow;}
}
弹性盒子
display：flex;
设置direction:rtl;盒子内的元素的排列方向（右到左）
flex-direction 属性指定了弹性子元素在父容器中的位置。
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
justify-content 属性
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。
justify-content 语法如下：
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的*空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;（此处修改属性）
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
margin: 10px;
}
</style>
align-items 属性
align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
语法
align-items: flex-start | flex-end | center | baseline | stretch
各个值解析:
- flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
- flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
- center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
- baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
- stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
<style>
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;（此处修改属性）
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
margin: 10px;
}
</style>