css实战总结

常用属性

背景属性

所有标签的背景，通过相关属性进行自定义

属性	说明
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片是否重复以及其重复方式
background-attachment	背景图片是否跟随内容滚动
background-position	背景图片的水平位置和垂直位置
background	样式定义各种背景属性

background-repeat默认值为repeat，即图像沿着x轴和y轴平铺，还可以指定沿着x轴平铺rpeat-x，沿着y轴平铺repeat-y，或者不平铺no-repeat，继承父元素该属性设置inherit。
background-attachment 用于设置背景图像是否固定或者随着页面的其余部分滚动。默认值为：scroll，表示可以随着页面其余部分的滚动而滚动。设置fixed，表示当页面其余部分滚动时，背景图片不会滚动，设置inherit，继承父元素。

字体属性

属性	说明
font-family	文本的字体系列
font-size	文字大小
font-variant	小写或者大写字母的字体显示文本
font-style	文本是否是斜体
font-weight	定义字体的粗细
font-weight	定义字体的粗细

font-family用于设置元素的字体，该元素属性值一般可以设置多个字体。
font-size用于设置字体的尺寸。
font-style用于设置字体是否是斜体，默认值为normal，当设置为italic，显示为一个斜体的样式，当设置为oblique，显示为一个倾斜的样式。
font-variant用于设置字体使用小写字体，默认为normal，一旦设置为small-caps，将所有小写字母变为大写。
font-weight用于设置字体的粗细，normal值等于400，bold的值等于700。

文本属性

属性	说明
color	文本颜色
direction	文本方向和书写方向
letter-spacing	字符的间距
line-height	文本的行高
text-align	文本对齐方式left，right，center，inherit
text-decoration	给文本添加修饰效果，值有underline为添加下画线，overline添加上画线，line-through添加删除线，blink添加闪烁的效果,none无如何修饰,inherit
text-indent	定义文本的首行缩进方式，默认值为0
text-shadow	为文本添加阴影效果
text-transform	切换文本的大小写
white-space	设置如何处理元素内的空白
word-spacing	定义文本距离

尺寸属性

属性	说明
width	设置元素的宽度
min-width	元素的最小宽度
max-width	设置元素的最大宽度
height	设置元素的高度
…	…

列表属性

属性	说明
list-style-image	设置列表项标记样式为图像，none/inherit/url
list-style-position	设置列表项标记的位置，inside/outside/inherit
list-style-type	设置列表项标记的类型 disc 实心圆 circle 空心圆 square 方块 decimal 数字
list-style	可以用一条样式定义各种列表属性

表格属性

属性	说明
border-collapse	是否合并表格边框
border-spacing	设置相邻单元格边框之间的距离
caption-side	表格标题的位置
empty-cells	是否显示表格中空单元格上的边框和背景
table-layout	设置用于表格单元格列宽的设置方式

盒子属性

属性	说明
padding-top	元素的上内边距
padding-right	元素的右内边距
padding-bottom	元素的下内边距
padding-left	元素左边内边距
margin-top	上外边距
—	—
border-top-style	上边框样式 （none，无边框效果hidden，与none相同dotted点线边框效果 ; dashed虚线边框效; double双线边框效果; solid实线边框效果; groove3D凹槽边框效果; ridge3D凸槽边框效果）
—	—
border-top-width	上边框宽度

浮动属性

属性	说明
float	设置框是否需要浮动以及浮动方向
clear	设置元素的哪一侧不允许出现其他浮动元素
clip	裁剪绝对定位元素，该元素必须是绝对定位，上右下左原则
overflow	设置内容溢出元素框时的处理方式，值：visible,auto,hidden,scroll
display	设置元素如何显示，值none,block,inline,inline-block,inherit
visibility	定义元素是否可见，visibility设置为隐藏，元素占用的空间依然会保留，但display:none不保留占用空间，值：visible,hidden

定位属性

属性	说明
position	元素的定位类型，值static,absolute绝对，relative相对
top	元素上外边距
right	元素右外边距
bottom	元素下外边距
left	元素左外边距
z-index	元素堆叠顺序 （用于设置目标对象的定位层序，数值越大，所在层级越高。该属性只在position:absolute时有效。）

伪类和伪元素

• 为了避免大家混淆伪类和伪元素，css3中的标准规定伪类使用单冒号“:” ，伪元素使用双冒号“::”，但在此之前都使用的单冒号“:”，所以为了保证兼容伪元素两种使用方法都是可以的。
• 伪类可以叠加使用，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾。
• 伪类与类优先级相同，伪元素与标签优先级相同。顺便说一下优先级怎么判断，一般是 !important > 行内样式> ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。还有一个简单的计算方法，内联样式表的权值为 1000，ID 选择器的权值为 100，Class 类选择器的权值为 10，HTML 标签选择器的权值为 1，权值实际并不是按十进制计算的，用数字表示只是说明思想，我们可以把选择器中规则对应做加法，比较权值大小，权值越大优先级越高，如果权值相同前面的样式会被后面的覆盖。

.box:first-child:hover { color: #000;}   //使用伪类
.box:first-letter { color: #000;}   //使用伪元素
.box:first-letter:hover { color: #000;}   //错误写法

伪元素举例

在test-div 元素 前后添加 #

.test-div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.test-div::before {
    content: "#";
    color: red;
}
.test-div::after {
    content: "#";
    color: blue;
}

伪类举例

所有偶数行背景色设置为#ccc，不能被5整除的奇数行设置背景色#fff，能够被5整除的奇数行设置背景色#f0f

table tr:nth-child(2n) td{
   background-color: #ccc;
}
table tr:nth-child(2n+1) td{
   background-color: #fff;
}
table tr:nth-child(2n+1):nth-child(5n) td{
   background-color: #f0f;
}

常用布局

盒子模型布局

盒子模型作为一种传统的css样式布局方式，有一些常见的布局类型，一下的一些作为基本归类参考，当然实现的方式有很多种。可以作为一种参考

靠左竖直居中

  position: absolute;
  top: 0;
  left: 0;
  top: 50%; /*偏移*/
  transform: translateY(-50%);

靠右竖直居中

 position: absolute;
 top: 0;
 top: 50%; /*偏移*/
 transform: translateY(-50%);
 right: 0;

绝对居中

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

或者

 margin: 0 auto; /*水平居中*/
 position: relative;
 top: 50%; /*偏移*/
 transform: translateY(-50%);

固定底部

固定布局在顶部位置

 position: fixed;
 bottom: 0;

超出滑动

定义超出一定高度的时候开始滑动 这里的案例是超出800px

  overflow-y: scroll;
  max-height:800px;
  min-height: 450px;

flex布局

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。特别注意ie 10 之前的浏览器是不兼容的；要看情况选择

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* 兼容 Safari */
  display: flex;
}

设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

父布局的属性介绍

属性	说明
flex-direction	排列方向 row（从上往下） ，row-reverse（从下往上）， column （从左往右），column-reverse（从右往左）
flex-wrap	换行样式 nowrap（不换行），wrap（从上往下换行），wrap-reverse（从下往上换行）
flex-flow	flex-direction属性和flex-wrap ，默认值为row nowrap。
justify-content	主轴上的对齐方式 flex-start（左对齐）；flex-end （右对齐）；center （居中）；space-between（两端对齐，项目之间的间隔都相等。）；space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）;
align-items	flex-start（与交叉轴的起点对齐）flex-end （与交叉轴的终点对齐。） center （与交叉轴的中点对齐）； baseline （项目的第一行文字的基线对齐） stretch（如果项目未设置高度或设为auto，将占满整个容器的高度）；
align-content	属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

justify-content 属性参考

align-items 属性介绍

align-content 属性介绍

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

子布局的属性介绍

属性	介绍
order	属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow	属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink	属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小
flex-basis	属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小
flex	flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选（建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。）
align-self	属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch（该属性可能取6个值，除了auto，其他都与align-items属性完全一致）

特别鸣谢

【部分参考】http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html