CSS基础

基本的清除浏览器默认样式
*{
maigin:0;
padding:0;
}
内联样式
style="color:red;font-size:10px;"
内部样式
<style type="text/css">
</style>
外部样式
<link rel="stylesheet" type="text/css" href="css/new_file.css"/>

排列
list-style：none 去掉前面的符号
disk 实心圆 
circle空心圆  
square
实心方块

长度单位
px 像素
百分比 相对于父元素
1em = 1font-size 当前元素字体大小

font字体
font-size 字体大小
font-family:arival,微软雅黑;如果浏览器不支持使用后面的字体。
五种字体：一般放最后面备用
serif 衬线
scan-serif 非衬线
monospace 等宽字体
cursive 草书字体
fantasy 虚幻字体
font-style：normal (默认)italic(斜体) oblique(斜体)
font-weight：bold(加粗)
font-variant：small-caps小型字母大写
line-height:30px; 行高，也可以用百分比或数值会相对于字体大小设置 行间距=行高-字高
可以在font中指定行高，如果没有指定，使用默认值
font： 30px/50px(行高)
可以写五个，加粗，斜体，和小型字母大写可随意写，但是文字大小和字体必须写在倒二倒一
font：italic small-caps bold 60px "微软雅黑"

text文本
text-transfrom：capitalize 单词首字母大写，通过空格区别uppercase所有字母大写lowercase所有字母小写
text-decoration:uderline 添加下划线 overline:添加上划线 line-through:添加删除线 none 可用来消除超链接的下划线
letter-spacing 字符之间距离
word-spacing 词之间距离
text-indent：20px；首行缩进距离 2em缩进两个词
color:rgba(0,0,0,0.5)最后一个可以控制透明了
text-shadow:1px 2px 3px rgba(0,0,0,0.5)(水平距离，垂直距离，模糊距离， 阴影颜色) 文字阴影(可以实现文字的凹凸效果)

text-align和vertical-align
text-align样式使元素在其定界区域内水平对齐，其取值可以是left(默认)、right、center或justify。justify使元素两端对齐。
vertical-align（垂直对齐） baseline：将支持valign特性的对象的内容与基线对齐 top：将支持valign特性的对象的内容与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐 bottom：将支持valign特性的对象的文本与对象底端对齐 text-bottom：将支持valign特性的对象的文本与对象底端对齐
只有一个元素属于inline或是inline-block，其身上的vertical-align属性才会起作用（即span内联元素、img内联块状元素等元素可以起作用，而div为块状元素block则不可以）
如果想使一个内容水平居中就使用text-align:align，反之如果是垂直居中使用text-align + vertical-align。
用top解决img和背景颜色有底部缝隙的问题

背景
background-image:url(img/1.png /或网址);
background-repeat:设置背景图片的重复方式repeat，默认值，背景图片会双方向重复(平铺)no-repeat repeat-y，背景图片沿垂直方向重复
background-position:10px 20px (相对于块元素的x和y坐标，填百分比是相对于父元素)
background-position:center center(正中心)
background-size： 100px 100px ; 修改背景图片的大小（填百分比是相对于父元素）
background-size：cover；等比缩放把盒子填满，超出的部分剪掉
background-size：contain；等比缩放宽或高达到边界停止缩放
background-attachment:scroll(默认。可以用fixed，滑动浏览器后背景不动)
背景简写（包含颜色，地址，重复方式，位置，attachment），大小需要单独写
background：#000 url(image/m.jpg) no-repeat fixed center 20px;
背景半透明
background：rgba(0,0,0,0.5)
多个背景图片，用逗号隔开，前面的覆盖后面的，所以在最后一个图片设置背景颜色
background: url(image/m.jpg) no-repeat fixed center 20px,url(image/n.jpg) no-repeat fixed center 20px hotpink；

盒子模型
内容 内边距 边框 外间距

边框：
颜色：border-color：red；
大小 border-width：10px；
样式border-style：solid（实线）dashed dotted double
borde:red 10px solid; 简写边框格式 没顺序要求
border-collapse：collapse；合并相邻边框（可用于表格）
border-radius: 10px/50%; 圆角矩形，可以调整矩形边框四个角的弧度，可以写四个分别对应左上右上右下左下，写50%，即弧度是边长的50%

内边距
背景颜色和内容区一样
padding-top:10px; 上边距
padding：100px; 四边距
padding：10px 30px;对边距

外边距
margin-top:100px
width：900px；
margin： 0 auto；
块级元素 有width时的盒子可以使用auto使其水平居中
当margin-top、padding-top的值是百分比时
相对最近父级块级元素的width，相对最近父级块级元素的width

插入图片与背景图片
插入图片是一个块元素，会占盒子的空间。产品展示一般用插入图片
使用width和height修改大小，用margin和padding修改位置
背景图片是块元素的背景，适合做一些图标，底图

垂直方向外边距的重叠问题：
相邻的垂直方向的外边距会发生重叠
【相邻】【兄弟元素】之间相邻外边距会取最大值而不是取和
垂直方向外边距的合并问题：
【父子】垂直外边距【相邻】了，则子元素的外边距会设置给父元素
可以给父元素添加一个边框
可以给父元素添加一个内边距
可以设置父元素 overflow：hidden；
clear 定位

如果盒子没有设置width，则padding不会增加盒子总宽度，继承的width也算没有设置。

盒子布局稳定性,布局属性使用优先级
width>padding>margin

标准盒子模型
box-sizing:content-box;
新增盒子模型
box-sizing：border-box;
width值包含了盒子的padding和border

盒子阴影
box-shadow:水平距离 垂直距离 阴影距离 阴影大小 阴影颜色 内外阴影(默认outset，不用写)
box-shadow:20px 20px 20px 20px rgba(0,0,0,0.5) inset