[TOC]

CssNotes

1、HTML5样式嵌入方法

外部（推荐）<link>标签 <link rel="stylesheet" type="text/css" href="css/layout.css">
内部 在html中使用<style></style>
内联（不推荐）在标签内部，写style=“background: red; border-radius:256px;”

2、css优先级

1 内联style
2 id选择器
3 class选择器
4 标签

3、css长度单位

1 px
2 em

4、css选择器

1 常用选择器
    > 标签选择器 span {}
    > id选择器 #id {}
    > 类选择器  .class {}
    > 关联选择器 由父类里面找子类的子类，使用空格
    > 组合选择器 使用“,” 选择多个不同的父类里面的子类
2 基本选择器
    > :first-child  第一个元素
    > :first-letter 第一个字符
    > :first-line   第一行
    > :last-child   最后一个元素  
    > :nth-child(2) 第几个元素，括号内可以选择
3 层级选择器
    > a,b   组合
    > a b   后代中所有的
    > a>b   子元素（不包括孙子级别）
    > a+b   后面的（不是里面的）
4 伪类选择器
    > :hover    当鼠标移动到其上方的时候，其样式进行改变
    > :focus    获取焦点 如input
    > ::selection   被选择的时候，如文本的选择时可以进行操作
5 属性选择器
    > [id]          该标签含有该属性就够了，如input[name] {}指的是，选择input标签中含有name属性的标签
    > [id=use1]     该标签的属性为，如：input[name=username]{}
    > [name*=us]    该属性中含有后面的字符的，如：input[name*=us]{}，指的是name属性中包含有"us"字符的
    > [name^=en]    选择该属性以“en”开头的
    > [name$=en]    选择该属性以“en”结束的
    。。。还有很多，具体参考API文档

5、常见的样式属性和值

1 字体与颜色
    font-family     字体类型，如： 宋体、黑体、微软雅黑，默认为宋体
    font-size       字体大小，
    font-style      字体样式，是正常，还是斜体 normal、italic
    font-weight     字体粗细，bold为粗体，默认为正常

    可以自定义字体，如下，自定义了font-family为“zcx”的字体类型
    @font-face {
        font-family:zcx;
        src:url('zcx.ttf');
    }

2 背景属性
    background-color
    background-image
    background-repeat       重复，比如图比较小，可以使用多个 可以为 no-repeat
    background-attachment   fiexed（固定）  scroll（跟着滚动）适用于body对div不兼容
    background-position 
        水平:left center right ，垂直:top center bottom 
        50% 50%
        500px 700px
    可以缩写，对其颜色 no-repeat 位置等进行一行写完。

3 文本属性
    letter-spacing  字间距
    word-spacing    词间距
    text-decorationg    none、underline、overline、line-through
    text-align      文本居中，left、center、right
    text-index      p标签段落首行缩进
    line-height     文本的高
    color           文本颜色
    word-break      自动换行，中文会自动换行，英文不会，因此可以使用break-all

    *若文本溢出文本框，则可以使用 overflow:auto,可以自动出现滚动条

4 边框属性
    border-style    none、hidden、dotted、dashed、solid、double、groove（凹进去）、ridge（凸出来）、inset(凹进去的)、outset（凸出来的）
    border-width    
    border-color
    border-bottom   设置底部边框的样式
    border-left     设置左侧边框的样式
    border-right
    border-top

5 鼠标光标属性 cursor:
    crosshair   十字形状
    pointer     小手形状
    text        文本形状
    wait        等待形状
    default     默认形状
    help        帮助形状

6 列表样式 <ul> <li>
    list-style-type: none、disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha
    
    定宽、定高的效果：min-width（当再更小的时候，会出现滚动条）

    textarea文本域【cols 和 rows 表示 宽 和 高 】
        resize：none 文本框不能拖动调动大小  可设置width 和 height

    样式继承：
        文字样式、颜色、大小继承【文本属性】可以继承

    表格：<table> <tr> <th> <td>    border、width、cellspacing
        border-collaps: collaps表格边框是否合并
        border-spacing  表格边框之间的距离

7 定位属性
    position：【脱离文档流】
        absolute    不占位置    坐标系为浏览器左上角
        relative    占位置 坐标系为自己左上角   
        实现div绝对位置方法：父div的position为relative，子div的position为absolute
        【即为：若absolute外层为relative，则其位置top，left为相对于外层relative的位置，否则为相对于浏览器的位置】
    top     left    z-index

8 内外边距
    外边距 margin
    内边距 padding

9 浮动和清除浮动
    float:  浮动 脱离文档流，不占位
        块标签，设置float值，则不会自动变行        可以使用ul设置导航菜单。
        例子：ul中所有的li都设置为浮动，若不设置ul标签的高度，ul会自动设置高度为0，此时在ul中添加一个div标签，并设置“style='clear:both'”即可。
    clear:  一般用于clear：both，在盒子所有的子盒子都浮动起来的时候，将盒子撑开。

10 滚动条
    overflow:   scroll、auto、hidden

11 显示和隐藏
    display: 
        none    看不见，且不占位    
        block   以块标签进行显示
        inline  以行标签进行显示    
    visibility: hidden  看不见，但占位     visible

12 CSS3 
    边框样式：
        border-radius 圆角直径（1个值 2个值 3个值 4个值）
        box-shadow  右下角阴影（5个值 前两个为位置，第三个为模糊值，第四个为外延值，第五个为颜色）
        border-image:   url('b.png') 26 26 round ，不要忘了加上“border 26px solid transparent”
    背景样式：
        background-size 背景图的大小 
        background-origin : padding-box、border-box、content-box
    文本样式：
        text-shadow     字的阴影
        word-wrap   break-world 折行
    字体样式：
        可以自定义字体，如下，自定义了font-family为“zcx”的字体类型
        @font-face {
            font-family:zcx;
            src:url('zcx.ttf');
        }
    2D样式：transform
        translate() 相对移动
        rotate()    自身旋转 70deg  若translate和rotate结合，则斜着走
        scale()     比例，x、y分别变为原来的几倍，从中心变大的
    3D样式：transform
        rorateX()
        rorateY()
    过渡样式：
        transition 改变宽高的时间 width 2s 
    分栏样式：对文本进行分栏
        column-count:   分栏数目
        column-gap:     分栏中间距离          
        column-rule:    分栏中间线
    轮廓样式：
        outline: 2px solid #00f
        outline-offset: 离边框的距离

============================================================================================

1、盒子模型

边框：border
内填充：padding
高度：height
宽度：width
外边距：margin
/*  padding 内边距
    padding: 10px; 四个边都是
    padding: 10px 20 px; 上下10px 左右20px
    padding: 10px 20px 30px; 上10px 左右20px 下30px
    padding: 10px 20px 30px 40px; 上 右 下 左

    padding-top
    padding-left
    padding-right
    padding-bottom
*/  
同理，margin外边距也是一样的
IE浏览器 的内容并不是正确的，而是width-border*2 -（padding-left*2），可加一个"!important"字段进行标记，IE选择下面一个，而普通浏览器选择important

2、页面布局相关属性

position属性
    为absolute时，其位置为相对于浏览器的绝对位置，需要配合top、left来使用【一般结合js来使用，漂浮的广告来用=。=】
    为relative时，位置为相对位置其本来默认的位置。
    static（静态）为position默认值
    fixed（固定），页面上下滑动的时候，其位置不发生任何的变化
z-index
text-align: left right center                           【内容】横向居中
line-height: 100px【此时不使用height，直接使用line-height  【内容】垂直居中（或者内加padding）
display属性
    block：当span这种非块级区域的标签要进行换行时可以使用
    inline：当div这种块级标签想要不换行时可以使用，两个都要用【现在没用？？？？】
    none: 隐藏，其该元素的位置没了
visibility属性
    inherit 子层继承父层的可见性
    visible 无论父层是否可见，子层都可见
    hidden  无论父层是否可见，子层都不可见
overflow属性
    hidden  超出框的部分隐藏
    scroll  超出部分加上滚动条
    auto    若超出，则加滚动条，不超出，则不加滚动条
float属性 漂浮
    left right 上层有空间就在上层，如果没有，会自动下去 会自动换行
clear属性
    left right both
    清除指定元素的指定方向的漂浮

3、多列浮动

1 设置一列浮动，一列div盒子居中：让左右自动
    margin-left：auto    margin-right：auto 
    margin：0 auto
2 设置两列浮动
    float: left  right
3 设置三列浮动
    float: left right，同时设置 margin-left或者margin-right的距离  【千万不要忘了float】
4 设置多列浮动
    float都设置为left

display: block;和display: inline;的区别

block元素特点：

1.处于常规流中时，如果width没有设置，会自动填充满父容器 2.可以应用margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略vertical-align

inline元素特点

1.水平方向上根据direction依次布局 2.不会在元素前后进行换行 3.受white-space控制 4.margin/padding在竖直方向上无效，水平方向上有效 5.width/height属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由line-height确定，替换行内元素的行框高由height,margin,padding,border决定 6.浮动或绝对定位时会转换为block 7.vertical-align属性生效

link与@import的区别

link是HTML方式， @import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件

溢出省略“...”

.ellipsis{display:block !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。
还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。