css 层叠样式表

    美化html（网站）的


写法，三种写法：

   内联写法  优先级最高
   <p style="color: red;">你好</p>

   内部写法

   外链写法

改变优先级：!important

css选择器 {
    css属性名: css值;
}


css选择器: 

  标签选择器

  class（.） 选择器

  id（#） 选择器  基本不用

  ，表示多选
  空格 表格嵌套（父子）关系
  > 选择父元素内部最近的子元素
  + 选择同级

  通配符选择器 （*）  选中网页上所有标签（body）

    用途：清除浏览器标签自带的样式

  伪类选择器：

    :hover  



盒子模型：内边距（padding） 外边距（margin） 内容（content） 边框（border）

  什么叫盒子模型？

  宽度计算规则：

    标准盒子模型：

      元素的真实宽高 =  你的写的宽度 + 左右内边距和左右边框 x 你的写的高度 + 上下内边距和上下边框

    怪异盒子模型（IE）
      box-sizing: border-box;


            /* margin: 20px;  四个方向的距离  上 右 下 左 */
            /* margin: 20px 30px;  上下  左右 */
            /* margin: 10px 20px 30px;  上  左右  下 */
            /* margin: 5px 10px 15px 20px;  上 右 下 左 */

            /* margin-top: 30px;
            margin-right: 30px;
            margin-bottom: 30px;
            margin-left: 30px; */

            padding-left: 30px;
            padding-top: 20px;

            /* border: 13px solid #161616; */

            /* border-left: 13px solid blue; 
            border-right: 13px solid #161616; 
            border-top: 13px solid green; 
            border-bottom: 13px solid yellow;  */

            /* border-left-width: 13px;
            border-left-style: solid;
            border-left-color: aquamarine; */



css 属性记录：

  text-decoration  设置文字的线条，一般用在a上

  line-height 设置行高，一般用于 块标签内部单行文字的垂直居中
  text-align  设置x轴对齐方式 ，一般用于 块标签内部文字的对齐方式
  margin: 0 auto: 一个块标签在另外一个块标签中居中

  vertical-align 设置y轴对齐方式，一般设置在高度较高的元素上
  cursor  设置光标的外观
  outline: none;  输入框（input button textarea）
  display  主要作用是：实现块标签和行标签的转换，次要作用：实现元素显示(block)隐藏(none)

    inline 行

    block 块

    inline-block  行内块标签

    none 把元素隐藏起来

    元素被设置 inline-block 后，标签之间会有一个默认的边距，这个边距需要在父元素上设置font-size 0 
    来消除