CSS基础样式
1.基础样式
- 宽：width ；高：height
-
块级元素和行内元素之间的转换
属性：display<br> 属性值： block 转换为块级元素 inline 转换为行内元素 inline-block 转换为行内块元素（希望能设置宽高，但又不换行）
2. 背景属性
-
背景色：background-color
-
背景图像：background-image:url("图片地址")
例：body{ backgroud-image:url("pic1.jpg") } -
背景平铺：background-repeat
属性值：repeat x,y轴都平铺（默认） repeat-x x轴平铺 repeat-y y轴平铺 no-repeat 不平铺
4.背景定位：background-position
属性值:center,right,left,top,bottom(可以写两个，如：left top 表示左上)
40% 50%百分数值，分别表示x轴，y轴
50px 50px长度值，分别表示x轴，y轴（可和百分比的混用）
5.背景关联：background-attachment
属性值:scroll 背景随文档滚动（默认值）
fined 图像相对于可视区固定，不受滚动影响
6.背景尺寸：background-size
属性值：长度值
百分比
cover
contain
说明：1.长度值和百分比都是按设定的值改变图像大小，都为两个值，如果只设置了一个值，则第二个值
默认auto<br>
2.cover是把背景图按比例扩展至足够大，使背景图完全覆盖背景区域，某些超出部分就自动剪裁掉<br>
3.contain是把背景按比例扩大，直到宽高任意一边覆盖满背景区域
7.规定背景定位：background-origin
属性值:padding-box 背景图相对于边框内线定位（默认）
border-box 背景图相对于边框外线定位
content-box 背景图相对于边框内容框定位
8.背景绘制区域：background-cilp
属性值： boder-box 背景超出边框外边线的被剪裁
padding-box 背景超出边框内边线的被剪裁
content-box 背景超出内容框的被剪裁
9.背景属性简写：background
属性顺序：color image repeat attachment position/size origin clip
属性的默认值分别为：
color：transparent
image:none
repeat:repaeat
attachment:scroll
position:0% 0%
3.字体属性：
font-family(字体家族):"宋体","Microsoft Yahei";（可以多写几种字体，方便不同浏览器适配）
font-style(字体样式):normal(常规)、italic(斜体)或oblique(倾斜);（<em>标签自带斜体，为行内元素很少使用）
font-variant（字体变化）:normal(常规)、small-caps(把小写字母转换为小型大写字母);
font-weight(字体加粗)：normal(常规)、bold(加粗)...;(可以写数值，但是没有单位)
font-size:20px...;(一般设置为偶数)
简写顺序：
font：font-style font-variant font-weight font-size line-height font-family;
简写属性里必须有font-size和font-family两个属性
4. 文本属性
1.文本颜色：color
2.缩进文本：text-indent（只对块级元素有效）
属性值：正数
负数（正负数需带单位px）
百分比
2em（空两个字符，常用）
3.水平对齐:text-align
属性值：left
right
center
行内元素文本想水平对齐，需在行内元素外套一个块级元素，将水平对齐设置在块级元素上
例:<div> div{
<span></span> width:20px;
</div> border:1px solid red;
text-align:center;
}
4.垂直对齐：vertical-algin（针对行内元素）
属性值：baseline 基线对齐（默认）
top 顶部对齐
middle 居中对齐
bottom 底端对齐
长度值
在块级元素里插入图片是，图片底部离边框会有一点留白，这时可以在块级元素里写一个
{vertical-algin:bottom}解决
5.词间隔：word-spacing；属性值:正负长度值，单位px
6.字间隔：letter-spacing；属性值：正负长度值，单位px
7.字符转换：text-transform
属性值:none 无变动（默认）
uppercase 转换成大写
lowercase 转换成小写
capitalize 首字母大写
8.文本装饰：text-decoration
属性值:none 无装饰（常用于<a>）
urderline 下划线
overline 上划线
line-through 贯穿线
9.文本换行：word-wrap
属性值:normal 不自动换行（默认）
break-word 自动换行
9.行高：line-height
10.文本阴影：text-shadow
属性值:x轴 y轴 opacity(模糊值) color
前三个都是数值，单位px，前两个数值越大离文本越远，
负数向左或上移动，正数向右或下移动，模糊值越大阴影就越模糊
延伸：box-shadow 边框阴影，属性和文本阴影一样
5. 列表属性
1.列表标记样式：list-style-type
属性值：none 无标记
disc 实心圆点
circle 空心圆
square 实心方块
decimal 数字
2.列表项图像标记：list-style-image(图片大小不能调整，只能由引入的图片大小决定)
属性值：url("图片地址")
3.列表项标记位置：list-style-position
属性值：outside
inside
4.列表项简写：list-style
属性值：image type position(顺序可打乱)
例：无标记样式可写为{list-style:none}
列表项标记的颜色与文本不同的设置：在<li>里包一个文本标签，给文本标签设置另一种颜色样式
6. 边框属性
1.边框样式：border-style
属性值:none 无边框
dotted 点线
solid 实线
double 双实线
dashed 虚线
border-style可同时设置一，二，三，四个值，不同数量的值表现形式也不一样：
四个值：上，右，下，左
三个值：上，（左右），下
两个值：（上下），（左右）（同样适用于1，2，3，5）
2.边框宽度：border-width
属性值:thin 细边框
medium 中等边框（默认）
thick 粗边框
长度值 自定义
3.边框颜色：border-color
4.属性简写：{border:width style color}(顺序可打乱)
5.单方向边框：可设置四个方向不同的边框样式，也可以单独给某一个方向设置边框
属性:dorder-top
dorder-right
dorder-bottom
dorder-left
属性值：width style color
7. 轮廓属性：outline
说明：属性值跟用法都跟边框border大致一样，但不能分四个方式设置不同的样式
border和outline的区别：
border在页面中会占据空间，二outline在页面中虽然可以设置宽度，但是不会占据页面空间
8. 表格属性
1.表格边框：border
例:table,th,td{
boeder:1px solid red;
}
2.折叠边框：border-collapse:collapse；定义在table标签上，将表格边框设置为单线边框
