CSS常见控制样式
本文详细说明了CSS中除基本样式，如颜色、边距外等常用到的其他样式控制
文字控制类
控制文字显示效果
/* 取消a标签的下划线 */
text-decoration:none;
/* 控制字上的线位置包括删除 */
text-decoration:line-through;
/* 大小写转换 */
text-transform：uppercase;
/* 文本缩进 */
text-indent:50px;
/* 指定字符间的间隔 */
letter-spacing:2px;
/* 指定单词间的间隔 */
word-spacing:30px;
/* 禁用文字环绕，太长也不换行 */
white-space:nowrap;
/* 文字与图片上下位置控制，该样式用于图片上，可使文字和图片上下居中 */
vertical-align:text-top;
/* 文本阴影 */
text-shadow: 2px 2px #ff0000;
列表控制类
控制列表的显示
/* 设置或取消列表项类型 */
list-style-type:none;
/* 设置列表项类型的位置在内部还是外部 */
list-style-position:outside;
/* 设置列表项为图片 */
list-style-image:url('sqpurple.gif');
边框外显示
outline:颜色，样式，宽度
定位
CSS控制元素在页面上相对或绝对定位
/* 元素的位置相对于浏览器窗口是固定位置 */
position:fixed;
/* 相对定位元素的定位是相对其正常位置。 */
position:relative;
/* 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>: */
position:absolute;
/* 使用absolute上下左右居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
内容溢出
控制内容溢出元素框时显示的方式
overflow:hidden;
清除浮动
用于处理浮动布局 float:left导致的元素高度塌陷问题
/* 清除浮动可用 放在父级*/
.clearfix {
overflow: auto;
}
伪类
/* 在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素： */
p:first-child
{
color:blue;
}
/* 指向最后 */
p:last-child
{
color:blue;
}
/* 指向任意 */
:nth-child(n)
/* 倍数行 */
:nth-child(2n)
伪元素
/* "first-line" 伪元素用于向文本的首行设置特殊样式。 */
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
/* 注意："first-line" 伪元素只能用于块级元素。 */
/* "first-letter" 伪元素用于向文本的首字母设置特殊样式： */
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
/* ":before" 伪元素可以在元素的内容前面插入新内容。 */
h1:before
{
content:url(smiley.gif);
}
/* ":after" 伪元素可以在元素的内容之后插入新内容。 */
h1:after
{
content:url(smiley.gif);
}
鼠标样式
cursor: pointer;
元素透明度
opacity:0.4;
背景渐变
/* 线性渐变 */
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
/* 默认从上向下 */
/* lirection:to right,to bottom right等还可以使用角度，和象限取值一样，单位为deg */
/* 重复线性渐变 */
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
/* 径向渐变 圆或椭圆*/
/* 均匀 */
background-image: radial-gradient(red, yellow, green);
/* 不均匀 */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
/* direction 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。 */
2D转换
transform：rotate(30deg); /*旋转*/
transform：translate(50px,100px); /*移动xy轴*/
transform：scale(2,3); /*放大或减小的大小，xy轴*/
transform: skew(30deg,20deg); /*包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。*/
transform:matrix(0.866,0.5,-0.5,0.866,0,0); /*matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。*/
/* 3D转换 同上后面加上XYZ*/
/* 共同时的格式translate3d(x,y,z) */
transform: rotateX(120deg); /*围绕其在一个给定度数X轴旋转的元素。*/
transform: rotateY(130deg);/*rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。*/
过渡时间
元素由一个状态变为另一个状态的时间和效果控制
transition: width 2s, height 2s, transform 2s;
动画
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s; /*定义变化属性和时间*/
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
/* 变化时间 */
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
列的控制
/* 多列 */
column-count: 3;
column-gap: 40px; /*列间隙*/
column-width: 100px; /*列宽度*/
column-rule: 1px solid lightblue; /*列边框*/
column-span: all; /*元素跨多少列*/
边框控制
/* 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 */
box-sizing:border-box;
/*用户可调整框框大小*/
resize:both;
滤镜
改变元素的显示
filter: grayscale(100%);
弹性布局
/* 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 */
/* 弹性父元素属性 */
flex-direction：/*控制布局方向*/
/* row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。 */
/* 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐 */
justify-content: flex-start | flex-end | center | space-between | space-around;
/* align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。 */
align-items: flex-start | flex-end | center | baseline | stretch;
/* align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。 */
align-content: flex-start | flex-end | center | space-between | space-around | stretch
/* flex-wrap 属性用于指定弹性盒子的子元素换行方式。 */
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
/* nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse -反转 wrap 排列。 */
/* 弹性子元素属性 */
order：/*<integer>：用整数值来定义排列顺序，数值小的排在前面。可以为负值。*/
margin: auto;/*使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;/*lign-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。*/
/* flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。 */
flex:1;/*让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：*/
/* 一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。 */
flex-grow:
/* 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。 */
flex-shrink:
/* 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。 */
flex-basis:
响应式
不同设备宽度下不同样式控制
/* 代表大于576px触发 */
@media (min-width: 576px){}