CSS基础语法 - 0424

一、基础语法：选择器{样式声明;}

  选择器：最基本的有标签，类class和id

  样式声明：包括属性和值两部分

  注意：如果想让css样式应用到多个html文档中,，应该将样式保存为一个独立的css文件，在需要使用该样式的html文档进入引用

二、分类

  Ⅰ 标签选择器
  Ⅱ class类选择器
  Ⅲ id选择器

  注意：优先级：JavaScript DOM操作样式 > style > id选择器 > class类选择器 > 标签选择器（即：就近原则）

三、盒子模型（重点）

  1. 盒模型是布局的基础,页面上的一切可见元素皆可看做盒子
  2. 盒子默认都是块级元素: 独占一行,支持宽度设置(根据盒子模型示意图分析)
  3. 盒子模型可以设置5个样式: 宽高背景内外边距与边框
       (1): width: 宽度(水平方向)
       (2): height: 高度(垂直方向)
       (3): background-color: 背景 (默认透明)
       (4): padding: 内边距, 内容与边框之间的填充区域
       (5): margin: 外边距,决定当前盒子与其它盒子之间的位置与关系
       (6): border:  边框, 位于内外边距之间, 是可见元素,允许设置宽度, 样式和颜色 

          注意：padding: 20px（上下） 30px（左右）

                    padding:20px（上） 30px（左右） 40px（下）

                    padding:20px（上下左右）
  4. 根据是可见性可以分为二类:
      (1). 可见的: width, height, border
      (2). 透明的: background, padding, margin
      注意: padding,margin 只允许设置宽度, 不允许设置样式与颜色