css细化
一、布局
1.浮动 →清除浮动
2.定位
css 样式表
内联样式：在html中每个属性都具备style属性 如：<h1 style=""></h1>
css语法 允许出现多个属性：值 对； 每对之间用；隔开 如：<h1 style="属性:值;属性:值;"></h1> 只作用在所定义的标签内，其它标签不受影响
外部样式表：将样式定义到一个外部的css文件中(.css)，在HTML页面中，引用.css文件
真正意义的体现 样式重用的效果
使用方式：1.创建外部样式表
css样式表特征：1.继承性 2.层叠性 一个选择器可以被重复定义 在多个不同的定义中，不重复的属性可以层叠到一起，如果属性重复的话，以 后定义的为准
3.优先级 样式定义冲突时，按照不同样式的优先级来使用样式 ：
1.浏览器缺省设置 2.外部样式表或内部样式表-就近原则 3.内联样式(最高) ❤☆4.!important：手动调整样式属性的优先级(尽量不要使用)☆❤
css基础选择器：
伪类选择器：
1.链接伪类 适用于a标签 :link(未访问状态下的样式) 如： a:link{ }
:active(鼠标点中 激活的状态) 如：a:active{ }
:visitetd(点击 进入过 链接页面的状态) 如： a:visited{ }
2.动态伪类 :hover (鼠标悬停状态下的样式) :active (元素被激活时) :focus(元素获取焦点时，多数用于文本框密码框表单等表单元素)
css属性-尺寸
溢出：overflow: 当内容溢出元素框时 隐藏超出部分 hidden(溢出隐藏) visible(溢出可见) scroll:设置滚动条 auto:自动，没溢出不显示滚动条，有溢出自动出现滚动条 overflow-x:横向溢出处理方式 overflow-y:纵向溢出处理方式
设置滚动条的样式：
设置滚动条宽度 ul::-webkit-scollbar{ width=...px; }
设置滚动条轨道的颜色 ul::-webkit-scollbar-track{ background-color：...; }
设置滚动条滚动的颜色 ul::-webkit-scollbar-thumb{ background-color：...; }
overflow:hidden;与display:none; 的区别:
overflow:hidden(超出部分隐藏) display:none;(把整个元素隐藏,隐藏之后,不再占据位置)
边框 border-属性 width style color 边框圆角:border-radius
边框阴影 (新特性) box-shadow:
h-shadow:水平阴影距离 v-shadow:垂直阴影距离 blur:可选，模糊距离 spread:可选，阴影的尺寸 color:可选，颜色 inset:可选值，将当前阴影修改为内阴影
图片边框:border-image border-image-source图片路径 border-image-width 图片宽度
背景:background
精灵图,雪碧图 一张大图里边有很多小图(用background-position选取图片位置,省流量)
渐变---------都是通过background-image来设置的
1.线性渐变:linear-gradient 重复线repeating性：repeating-linear-gradient
取值：
2.径向渐变:radial-gradient 重复径向：repeating-radial-gradient
课外知识 浏览器兼容性：
表格：常见的样式属性有padding,width,height,文本、字体格式化属性。 背景属性：颜色，图片，边框
文本垂直对齐: vertical-alian:top/bottom/middle
表格特有样式属性：1.边框合并属性:border-collapse(合并) 取值：separate(分离边框)
边框边距 注意：border-collapse 必须为separate的时候才允许使用该属性
属性：border-spacing 取值：一个值:表示垂直和水平间间距相等
两个值：第一个值表示 水平间距，第二个值表示垂直间距 两个值分开
列表
1.列表样式：属性:list-style-type
无序列表取值：none(无标记),disc(实心圆，默认),circle(空心圆),square(实心矩形)
有序列表：none(无标记),decimal(1,2,3),lower-roman: upper-roman:
列表项图像： 属性：list-style-image 取值:url(); list-style-image:url();
列表项位置: li前边标识的位置 属性：list-style-position 取值：1.outside:默认值，标识在外 2.inside:标识在内 list-style:none;取消列表标识。
Display: 可以转换 元素的显示方式
1.显示方式： 框的默认显示类型是可以通过display的属性进行修改
属性display 取值：1.none：让生成的元素不显示，隐藏。一旦设置none，该元素中的所有内容都不在显示，并且不会在占据文档空间
2.block：块 ，让任何一个元素像块级元素一样的去显示
特点：1.行内元素，像块级元素一样去显示 2.让块级元素从隐藏(display:none;)变为 显示 (display:block;)
3.inline:让任何一个元素像行内元素一样去显示 特点：多个元素在一行内显示
场合：1.块级元素变行内元素 2.行内元素you隐藏变为显示
4.inline-block 行内块级元素 元素本身是行内元素 ，但是具备块的特点(能修改宽高)
场合：想改变行内元素的宽和高的时候
显示效果： visibility:实现元素的可见性(显示/隐藏)
取值：1.visible：默认值，元素可见 2.hidden：元素不可见，隐藏，但空间依然占据 3.collapse：用在表格上，可以删一行或一列，不影响表格的布局。
opacity：设置不透明度级别
属性opacity 取值0-1之间的数字(包括0和1) 0完全透明，1完全不透明，值越大越不透明
vertical-align:设置图片和文字垂直对齐方式 取值：top,middle,bottom baseline:基线对齐（默认对齐方式）
光标：默认情况，网页上的光标会根据不同的元素显示不同的样子。
在css中，可以通过cursor属性改变 光标显示效果，给客户一种可视化的暗示。
值： pointer（手状）crosshair（+）wait（等待）help（?）
