HTML+CSS基础06

1.浮动

float：none/left/right
应用场景：让纵向排列的元素横向排列
特点：
·浮动元素会脱离文档流，遮挡住后面的文字，但不会遮挡文字（文字和浮动元素属于一层）
·当浮动元素的父元素的宽度不足以容纳下这些浮动元素的时候，浮动元素会掉下来，且掉在浮动设置的值，比如设置的左浮动就会掉在左边

2.盒模型

一 ：内容区（文字/图片/视频）区域由宽高决定
二：内填充（padding）：
padding：10px；一个值在四周
padding：10px 20px；两个值 上下 左右
padding：10px 20px 30px；三个值 上 左右 下
padding：10px 20px 30px 40px；四个值 顺时针
单方向padding-方向（top/right/bottom/left）：数值px；
padding特点：
·padding可以撑大盒子，如果不想被撑大，在盒子原来的宽高的基础上减去对应的方向的padding
·不可以设置负数
·可以调整内容区到盒子的距离
三：边框（border）边框也会增大盒子
四：外边距（margin）
margin值的设置和padding是一样的
margin的tedian：
·margin不会影响盒子的大小
·margin可以设置负数 正数增大距离 负数重叠
·margin可以用来调整盒子和盒子之间的距离
补充：img引入的图片有自带的大约3px的底部留白img{display：block}