CSS基础样式

1.基础样式

1. 宽：width ；高：height

2. 块级元素和行内元素之间的转换

   属性：display<br>
   属性值： block          转换为块级元素
           inline          转换为行内元素
           inline-block        转换为行内块元素（希望能设置宽高，但又不换行）
   

2. 背景属性

1. 背景色：background-color

2. 背景图像：background-image:url("图片地址")

   例：body{
           backgroud-image:url("pic1.jpg")
   }
   

3. 背景平铺：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标签上，将表格边框设置为单线边框