1.边框尺寸
1.轮廓线
outline
默认情况下文本框密码框都带有轮廓线
取消轮廓线 outline:none;
2.box-sizing
改变元素尺寸的计算方式
1.默认取值：content-box
元素实际尺寸由margin + border + padding + width/height 计算得到
2.取值 border-box
元素的实际尺寸 width = margin + border + padding + 内容;
一旦为元素设置边距和边框，会压缩内容区域
2.背景属性
1.背景颜色
属性 background-color
取值 颜色值
2.背景图片
属性 background-image
取值 url(路径)
3.背景图片相关属性
1.背景图片重复平铺显示
属性 background-repeat
取值：
1.repeat 默认值，图片尺寸不够时，沿水平和垂直方向重复平铺
2.repeat-x 沿水平方向平铺
3.repeat-y 沿垂直方向平铺
4.no-repeat 不平铺
2.背景图片尺寸
属性 background-size
取值：
1.500px 500px 分别设置背景图片宽高
2.100% 100% 采用当前元素的尺寸占比作为背景图片的尺寸
3.cover 表示对图片等比缩放至完全覆盖元素，多出部分裁剪
4.contain 表示对图片等比缩放至刚好容纳图片，不足的部分不管
5.auto 自动
3.背景图片位置
属性 background-position
取值:
1.数值px ：x y
设置水平和垂直方向的偏移距离
2. x% y%
0% 0% 表示图片在左上角显示
100% 100% 图片在右下角显示
50% 50% 背景图片居中
3. 方位值表示:
top center bottom
left center right
left bottom 左下角
设置背景图片水平和垂直方向的显示位置，某一个方向缺省的话，默认为center
4.背景图片是否固定
属性 background-attachment
设置背景图片是否跟随网页滚动
取值：
1.scroll 默认值 跟随滚动
2.fixed 固定背景图片位置
1.给任何元素添加背景图片固定，当前背景图片是相对于视口viewport 和当前容器元素几乎没有关系
2.当容器元素不可见时，背景图片也不可见
4.背景属性简写
属性 background
取值 color url positat size ion repeattachment
e.g.
background:red url('') right no-repeat 100% 100% scroll;
background-size 是css3属性，需要单独设置
3.文本/字体属性
1.指定字体
font-family : "Microsoft YaHei","微软雅黑","黑体",Arial;
注意：当字体名称是中文，或者是由多个英文单词组成的，都需要添加引号
2.字体粗细
font-weight:
取值：
1.lighter(100)/nomal(400)/bold(700)
2.采用数字，无单位，取值100-900,值越大，字体越粗
3.字体大小
font-size
取值 16px
4.字体样式(斜体)
font-style
取值：
1.normal
2.italic 斜体
3.oblique 字体倾斜 显示效果与斜体一致
5.行高
line-height
常用于设置文本垂直居中
6.字体属性简写
使用简写，有必填的属性值 family
font:style weight size family;
font:family size/line-height;
e.g.
font:Arial 16px/20px;
注意：font-weight font-style 必须设置在font-size之前
同时设置字体大小和行高，必须写成一个属性值存在，size/line-height
7.文本颜色
color
8.文本装饰线
text-decoration
取值：
1.underline 下划线
2.none 取消装饰线
3.overline 上划线
4.line-through 删除线
9.首行缩进
text-indent
取值 像素值 或者以em为单位 1em = 元素字体大小
4.表格属性
1.表格添加边框
border:1px solid black;
2.表格边框合并
属性 border-collapse
取值：
1.separate (默认)
2.collapse (边框合并)
3.边框边距
设置单元格之间的距离
属性：border-spacing
取值：
1.指定一个数值
水平与垂直方向上间距相等
2.指定两个数值
分别设置水平方向与垂直方向上单元格之间的距离
注意：属性必须在边框分离的情况下使用
border-collapse:
border-spacing: 10 20
5.列表属性
1.列表特征：
1.无序列表和有序列表 存在上下边距
2.存在左边内边距
3.具备项目符号
4.列表项垂直排列
2.列表属性
属性
1.list-style-type 设置项目符号
2.list-style-position:
设置项目符号的位置 默认outside 项目符号与内容框分离
设置inside 项目符号调整到内容框中
3.list-style-image：url()
自定义项目符号
属性简写：
list-style : type image position;
常用的取消列表项目样式：
list-style:none;
list-style-type: square;
list-style-position: inside;
list-style-image: url('../web001/img/northStar.jpg');
6.过渡效果
1.过渡效果指的是css属性值在一段时间内平缓变换的效果
2.语法
1.指定过渡属性
指定哪个属性值在变化的时候使用过渡效果
transition-property:
取值：
1. all 但凡能够使用过渡效果的属性值在变化时一律使用过渡来体现
2. 单独设置属性，指定某一个属性在变化时使用的过渡效果
允许使用过渡效果的属性：
1.颜色相关的属性
2.取值为数字的属性
2.指定过渡时长
transtion-duration
指定在多长时间内完成过渡效果
取值：以s或者ms为单位的数值
1s = 1000ms
500ms = 0.5s = .5s
3.指定过渡的速度时间曲线函数
transition-timing-function
取值：
1.ease默认值 慢速开始，快速变快，缓慢结束
2.linear匀速变化
3.ease-in 慢速开始，加速结束
4.ease-out 快速开始，慢速结束
5.ease-in-out 慢速开始和结束，中间先加速后减速的过程
4.指定过渡效果的延迟时间
等激发过渡效果之后，等待多久开始执行
tarnsition-delay
取值 以s或者ms为单位的数值
5.属性简写
transition:property duration
timing-fun delay;
6.练习
创建200*200的元素，背景为红色
鼠标悬停时：
1.尺寸变为400*400
2.背景颜色变成橘色
3.变成圆形
属性值的变换需要5s内完成
7.布局方式(重点掌握)
1.布局方式影响整体结构划分和元素的显示样式
2.布局方式分类
1.文档流布局/普通流/静态流/
默认的布局方式
元素按照书写顺序及元素类型，从上到下，从左到右排列
2.浮动布局(重难点)
3.定位布局
1.绝对定位
2.相对定位
3.固定定位
3.浮动布局
最常用的布局方式
1.将元素设置浮动之后，元素会具备以下特点：
1.元素会脱离文档流，不再占据文档空间
2.剩余未浮动元素会上前占位
3.元素浮动时，会停靠在父元素的左边或右边，或者是其他的浮动元素边缘上
4.元素浮动只能在当前行浮动
5.浮动可以解决共行问题，也可以解决行内块元素水平间隙的问题
2.语法
属性 float
取值：
1.left 元素向左浮动，碰到其他元素的边框时停止
2.right 元素向右浮动，碰到其他元素的边框停止
3.none 默认值，元素未浮动
3.浮动引发的效果
1.如果父元素中无法容纳浮动元素，浮动元素会自动换行显示
2.元素一旦设置浮动，便可以设置宽高，主要针对行内元素
3.元素一旦浮动，默认尺寸由内容决定
4.文字环绕效果
如果前一个元素设置浮动，后面元素会上前占位，并且文本后面元素的文本会围绕浮动元素显示