html笔记（3）

选择器

是一种匹配模式，用于匹配想要选择的元素
基础选择器
  1.选中所有元素【通配符】
         *{}
  2.选择所有对应的标签【标签选择器】
          标签名{}
  3.选中所有有对应类名的元素【类选择器】
    1.元素设置名<元素 class='类名','类名2'></元素>
    2.使用类选择器 .类名1 或者 .类名2{}
  4.选中指定id的元素【id选择器】
      1.元素这是id名 <元素 id='id名'></元素>
      2.使用id选择器 #id名{}
  注意：id名是唯一的 class是可以重复的
  推荐给页面的大块区域使用id命名
  区域里面的元素使用class命名
  5.群组选择器
     选中a和b。 a,b{}
  6.选择器的权重说明
    ！important>行内样式>id>类>标签>*
          越具体地位越高
    多个选择器计算权重之和，大的优先
    如果权重一样，后者覆盖前者

元素的分类

块级元素：独占整行，可以设置宽高
行级元素：有多宽占多宽，不可以设置宽高
行内块元素：有多宽占多宽，可以设置宽高（img、input、button）

浮动

语法：
           float:left或者right；
     作用1:让元素横着排列，实现一行多列的效果
             2.设置文字环绕方式
      注意：浮动会让元素脱离文档流

盒子模型

     概念：是一种思维模型，宽高+内边距+外边距+边框
   主要用于页面布局：
      1.尺寸
           设置宽度：width*px或者*%;
           这是高度：height*px或者*%;
      2.内边距:内容与盒子边缘之间的间隔
                        设置指定方向的内边距
                        paading   -top  -上
                                  -bottom - 下
                                  -left - 左
                                  -right -右           
           一次性设置多个方向 padding:*px；值可以是1-4个
           从上方向出发，顺时针对应，有缺省取对边
           注意：内边距会撑大盒子
       3.外边距：盒子a与盒子b之间的间隔
       这是指定方向的外边距：margin-方向:*px;
       一次性设置多个方向margin:*px;对应规则同padding

边框

设置单个方向的边框：border - 方向: *px solid 颜色；
     4个          border:*px solid 颜色；
     solid 实现 dashed 虚线

盒子模型相关的细节说明

1.给所有元素消除内外边距
             *{
             margin:0;
             padding:0;
             }
 2.可内可外，优先内
 3.盒子水平居中：使用margin：0 auto；