day04 CSS选择器 盒模型外边距和塌陷问题，元素分类和转换，溢出处理属性。

1、css选择器进阶(6个)

2、css盒模型--外边距

3、css盒模型外边距塌陷问题

4、元素的分类和转换

5、溢出处理的属性

盒模型：布局思路

盒模型组成 = 外边距margin+边框border+ 内边距padding + 有效内容width,height

width,height min-width max-width min-height max-height

width:auto ;（不会溢出） width:100%;(会溢出)

padding: 撑大盒子 外扩型 W = width +padding-left 内减计算 内部的内容与边界距离！！ 内边距填充背景色

border边框 内外分割线 border:1px solid red;

border-width:0px 0px 0px 0px;

border-style:solid / dashed / dotted /double

border-color：rgb()/rgba()/16进制

实现三角形

尖角朝右 : 左 上 下

.box {
    width:0;
    height:0;
    border-width:50px 0px 50px 50px;
    border-style:solid;
    border-color: transparent  transparent transparent   yellow;
}

文本相关属性

font: 一般声明在body身上
​
body {
    font: normal  400   14px/1.5  arial ,xx,simsun,"Microsoft YaHei" ,"HeiTi SC",sans-serif;
}

文本对齐属性

text-align:center居中(图，字) /right/left/justify
​
vertical-align:top/middle/baseline默认对齐/bottom
基线对齐---图片靠上，文字靠下，对不齐---调整其他对齐(middle,top,bottom)
​
line-height:上下移动文字 行高=盒子高度单行文本垂直居中
​
​
white-space:nowrap强制一行展示/pre格式化输出/normal浏览器默认；

外边距

 作用： 1.移动盒子 2. 设置两个盒子之间的距离
 margin:10px;四个外边距都为10px
 margin:10px 20px 上下10px 左右20px
 margin:10px 20px 30px ;上10px 左右20px 下30
 margin:10px 20px 30px 40px 上右下左;
 margin-top:
 margin-left
​
 单位 px/%/rem/auto
​
  auto 上下的auto没有作用  左右的auto会使盒子在父盒子宽度实现水平居中！！
  margin-left:100px 向右移动 100px
  margin-top:100px 向下移动了100px
  margin-left:-100px 向左移动了100px
  margin-top:-100px 向上移动了100px
​
  所以 移动盒子就用左外和上外边距！！
​
  设置盒子与盒子之间的距离是上右下左均可以的！！

   auto:margin:0 auto 实现水平居中
​
   margin-left:50% 向右移动父盒子宽度的一半！！！

概述：用于设置盒子与盒子之间的距离。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性

 

单个方向定义

• margin-bottom 设置标签的下内边距。 margin-left 设置标签的左内边距。

• margin-r