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}