css总结

---

css（cascading style sheets）层叠样式表

引入方式

1. 行内样式————写在html标签中。如：

     <div style="width:100px; height:100px;”></div>
   

2. 内嵌样式————写在style标签中如：

        <style type="text/css">
            div{
                width:200px;
            }
        </style>
   

3. 链接样式————使用link标签，如：

    <link type="text/css" rel="stylesheet" href="style.css" />
   

4. 导入样式

    @import url("style.css")
   

   如果需要写在style中，则在最上面引入

选择器

语法：选择器{规则}

1. 标签选择器（元素选择器）

    div{
        width:100px;
    }
   

2. 通配选择器

    *{
        margin:0;
        padding:0;
    }
   

3. id选择器

    #box1{
        width:100px;
    }
   

4. 类选择器

    .box{
        width:200px;
    }
   

另一种情况：

    div.box{
        width:100px;
    }

意思为选中类名为box的div元素

1. 包含选择器————通过包含嵌套选择，只要包含就行

    .box p a{
        color:red;
    }
   

   意思为类名为box的元素下的p元素下的a元素。一般情况下包含选择器不超过四层，上下层不一定是父子关系。

2. 子选择器————一个元素下的直接子元素

    .box>p{
        color:red;
    }
   

选择器的权重####

*选择器                    0.5
元素选择器       1
类选择器            10
id选择器           100
内联样式            1000
！important      最重要，优先级最高

长度单位和颜色表示

长度单位

• px 像素

• em 以当前字体的高度为基准，的倍数，受父元素的影响。如：当前为12px；则1em=12px

颜色表示

• 英文单词 red blue green pink black 等

• 使用三色的数值，数值范围在0-255之间。如：
  rgb(120, 110, 100)
rgba(120, 110, 100,0.5)
  a为透明度，数值范围在0-1之间，0完全透明

• 三色数值的十六进制
  如：#ffffff #00ff00 #cccccc

字体文本样式

• font-family 字体系别种族

• font-size 字体大小

• font-style 字体倾斜效果
  值：

  1. normal 不倾斜

  2. italic 倾斜

  3. oblique 让没有倾斜的字体倾斜

• font-weight 字体粗细
  值：

  1. normal 正常粗细

  2. bold 粗体

  3. bolder 加粗体

  4. lighter 细体

  5. 100-900 9层，数值越大越粗，400为正常

• text-transform 英文字母大小写转换
  值：

  1. capitalize 单词首字母大写

  2.uppercase 全部大写

  3 lowercase 全部小写

• text-decoration 文本装饰效果
  值：

  1. underline 文字加下划线
  2. line-through 删除线
  3. overline 上划线
  4. none 无

• text-indent 段落内容首行缩进 可以为负值

• letter-spacing 字母间距，文字间距

• word-spacing 单词单词之间的间距

• line-height 段落内部的行高

  可以使用line-height的值与height的值相等，达到文本在一行内垂直居中的效果。

• text-align 文本水平位置
  值：left/right/center/justtify(两端对齐)

• vertical-align 垂直对齐方式
  一般定义行内块级元素和文本的垂直对齐
  值：

  1. baseline (默认) 基准线对齐
  2. top 上
  3. middle 中
  4. bottom 下

盒子模型

盒子模型是由内容 内边距 边框和外边距组成的抽象模型

• padding 内边距

  值分别有：
  padding-top
padding-right
padding-bottom
padding-left

  简写：

  padding:上下左右; （一个值）

  padding:上下 左右; (两个值)

  padding:上 左右 下; (三个值)

  padding:上   右   下    左;    (四个值)  遵循顺时    针次序
  

• border 边框

border-width   边框的宽度

border-color   边框的颜色

border-style 边框的样式 （值：`solid`实心 ` dotted`小圆点  `dashed`虚线 ...）

 border:border-width  border-color   border-style;

border-left:  border-width  border-color   border-style;

border-right、border-top、border-bottom

例如：

    border:2px solid red;
    border-right:1px dotted blue;


border:none;    没有边框

 border-bottom:none;没有下边框

• margin 外边距

用法同padding

注意：

1. 左右横排的盒子之间的间距是 两者的外边距相加

1. 上下排列的盒子之间的间距是 以最大的为准（大的会把小的给吞掉）

1. 一个盒子包着里一个盒子 他们都有margin-top 以最大的为准（大的会把小的给吞掉）
   解决方案:给父元素加overflow:hidden

1. 块居中 margin:0 auto;

背景

• background-color 背景颜色

• background-image 背景图片

background-image: url('图片路径') 默认水平垂直都平铺

• background-repeat 背景图片的显示方式
  值：

  1.    repeat              （默认）
  2.    no-repeat           不平铺
  3.    repeat-x            水平平铺
  4. repeat-y               垂直平铺
  

• background-position 背景图片的位置
  background-position: 34px 10px;
  值：

  1. 写两个定位的单词（left right center top bottom）

1. 使用百分比或像素

• background-size 背景图片的大小

1. 具体数值


    1. 一个值代表宽度高度


    2. 两个值一个代表宽度，一个代表高度


2. 百分数



3. cover        把背景图片扩展至足够大，以使图像完全覆盖区域，等比例扩展可能会切割图片（显示不完整）


4. contain      等比例扩展至足够大，图片完整（可能会引起区域空白）

• background-origin 背景图片的渲染位置
  值：

    1. padding-box          （默认）渲染从padding  开始
    1. content-box              在内容里渲染
    1. border-box                   从边框往里渲染

• background-attachment 背景图片是否滚动
  值：

    1. scroll           (默认)背景图片随正常文档流滚动而滚动。
    2. fixed            固定 不随文档流而移动

简写：

    background: #f00 url('路径') no-repeat center center;

浮动

浮动
造成标签的浮动，影响正常文档流空间，脱离正常文档流 会对后面的元素 产生影响不会对前面的元素产生影响

1. float: left; 左浮动

1. float: right 右浮动

1. float: none 不浮动（默认）
   元素浮动后自动变成块级元

清除浮动

• 给父元素加height

• 给父元素加overflow:hidden

• 在浮动元素后面加一个空的块级元素 给它加样式clear:both clear(left清 除左浮动 right清除右浮动 both清除左右浮动）

• 给父元素加伪类 :after

    父元素:after{
        content:"";
        display:block;
        clear:left;
    }
  

定位

position：

1. static 不定位（默认 正常文档流）

1. relative 相对定位 （相对于自身）

1. absolute 绝对定位

    - 有定位的元素的外面包着它的元素（可能是直接元素，也可能是间接元素）有定位，相对于有定位的那个元素定位


    - 有定位的元素的外面包着它的元素没有定位，相对于浏览器定位

1. fixed 固定定位 （相对于浏览器定位）

多个定位元素的覆盖次序 通过z-index来判断 z-index的值是一个没有单位的数值
谁的z-index的值越大，谁就在最上层

其他

• 元素类型的转换

1. 任何元素转换为块级元素  display:block


1. 任何元素转换为行内块级元素  display:inline-block（ie7及以下版本不支持）


1. 任何元素转换为行内元素   display:inline


1. 任何元素消失不见        display:none

• box-sizing 盒子大小（css3属性）
  值：

  1. content-box 设置宽度为内容的宽度，加padding盒子会变大

1. border-box           设置宽度为border之内的加padding不会增大盒子

• 内容溢出

  1. overflow
  2. overflow: visible    (默认)可见
  3. overflow: hidden           隐藏
  4. overflow: scroll       出现滚动条
  5. auto                   浏览器自动处理

• text-overflow 文本溢出处理

    1. clip                     不显示省略标记
    2. ellipsis                     显示省略标记

• white-space 元素空白处理

    1. normal                       默认
    2. nowrap                       不换行
    3. pre                      (空白被保留)

一般处理文本溢出，三者搭配使用
新标签：<nobr></nobr>强制不换行

• 元素消失（不可见）

1. display ：none   元素在页面不显示  位置也不见了


2. visibility:hidden  元素在页面不显示   位置还在


3. opacity:0         元素在页面看不见    位置还在


4. z-index ： -999999   元素在页面也看不见

• 列表样式

1. list-style-type  列表样式类型

值：

    1. disc   实心原点
    2. none   去掉样式
    3. circle  空心圆
    4. square  实心方形

1. list-style-image 列表样式图片
   值：
   url(图片路径)

1. list-style-position   列表样式的位置

值：

    1. outside   列表样式在内容的外面
    2. inside    使列表样式在内容再里面