CSS笔记（一）

 1、CSS的几大选择器
 
    元素选择器：h1{ }
    id选择器：#box{ }
    类选择器：.inp{ }
    通配符选择器：*{ }
    分组选择器：h1,p{ }
    后代选择器：h1 span{}
    相邻兄弟选择器:可选择则与当前元素紧挨着的元素
        h1+p-->h1下的第一个p
    属性选择器：
        *[titel]{color:red}-->将所有标签中含有title属性的元素字体变为红色
        a[href]{font-size:60px}-->将a标签下有href属性的元素字体变为60px
        a[href][title]{}：-->a标签下有href属性和title属性的
        注意：
        属性必须和属性值完全匹配，有几个写几个：
        例如：
        <p class="box happy">
        写成这样是不行的：p[class="box"];非要写一个则：p[class~="box"]
    
常见选择器的权重问题：!important > 行间样式 > id > class | 属性 > 标签选择器 > 通配符
        
    <h2 title="Hello world">Hello world</h2>
    <a title="W3School"    >W3School</a>
2、类选择器与id选择器的区别：

    最大区别id选择器前有#
    只能在文档中出现一次    
    
3、css的三种使用方式：
    外部引入：
    <link rel="stylesheet" type="text/" href="">
    行内式
    <p style="font-size:10px">
    文档式
    <style>
    </style>
    注意：优先级的比较
        行内式>外部样式和文档式>浏览器默认样式

4、背景添加背景效果
    background-color:添加背景颜色
    background-size:背景大小
    background-image：添加背景图片（平铺样式：no-repeat不平铺只显示一次 repeat-x：x轴方向）
    background-position：背景位置
    background-attachment：背景附着（fixed固定 scroll随之滚动）
    background-origin:规定图片在什么位置（content-box文本区域 border-box边框区域  pdding-box
        内边距区域）
    
    注意：
    css background简写：csirap
        color size image repeat attachment position
    opcity：0.5（值介于0-1之间）
    rgba(0,134,54,0.3)(最后一个值30%的意思)
    
5、css边框
    border-style：属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）
                    三个值：上 左右 下 （顺时针）
                    两个值：上下  左右
    有以下属性值：
        dotted - 定义点线边框
        dashed - 定义虚线边框
        solid - 定义实线边框
        double - 定义双边框
        groove - 定义 3D 坡口边框。效果取决于 border-color 值
        ridge - 定义 3D 脊线边框。效果取决于 border-color 值
        inset - 定义 3D inset 边框。效果取决于 border-color 值
        outset - 定义 3D outset 边框。效果取决于 border-color 值
        none - 定义无边框
        hidden - 定义隐藏边框
    border-width：边框宽度（用于上边框、右边框、下边框和左边框）
    border-color：边框颜色（用于上边框、右边框、下边框和左边框）
    
    注意：
    简写：border：width style color

6、css圆角
    border-radius：设置边框圆角
    border-left-top：左上
    
7、css margin：（用于在任何定义的边框之外，为元素周围创建空间）
    外边距属性（top bottom left right）
    auto 在容器中水平居中
    inherit继承自父元素
    简写：margin：上 右 下 左

8、外边距合并问题
    margin-bottom：10px
    margin-top：10px
    两者之间还是10px，如果top那个为20px，则取大的那个，则为margin为20px

9、css padding（用于在任何定义的边界内的元素内容周围生成空间）
    padding属性（top bottom left right）
    inherit继承自父元素
    简写：margin：上 右 下 左

10、 内边距和元素宽度
    CSS width 属性指定元素内容区域的宽度。内容区域是元素（盒模型）的内边距、边框和外边距内的部分
    <div> 元素的宽度为 300px。但是，
    <div> 元素的实际宽度将是 350px（300px + 左内边距 25px + 右内边距 25px）
    
    解决办法：
    若要将宽度保持为 300px，无论填充量如何，那么您可以使用 box-sizing 属性。
    这将导致元素保持其宽度。如果增加内边距，则可用的内容空间会减少。