一、浮动:是一种布局属性,主要用于实现一行多列效果
语法:float:left丨right丨none;
作用:1.让元素靠在父元素的左边/右边(实现一行多列效果)
2.实现图文环绕效果
注:浮动会让元素脱离文档流
二、盒子模型
概念:是一种思维模型,主要用于实现页面布局效果。由尺寸、内外边距、边框组成
1.尺寸
width: *px丨*%;---设置宽度
height: *px丨*%---设置高度
如果设置%,代表的是其父元素的宽度或者高度的百分比
2.边框
border:边框的粗度 边框的线型 边框的颜色;
线型:solid---实线 dashed---虚线
border-方向的英文:*px solid 颜色;
3.内边距:盒子边框和它的内容之间的间隔
padding:*px;
说明:padding的值可以是1-4个,用空格隔开,对应规则是上右下左,如果有缺省,取对边
padding-方向的英文:*px;
注:padding会撑大盒子,如果有设置指定宽高,记得修改
4.外边距:盒子边框和他之外的元素之间的间隔
margin:*px;
属性值可以是1-4个,对应规则同padding
margin-方向的英文:*px;
注:单个和复合一起使用时,复合在前,单个在后
5.小结
A.外边距的粘连问题(父随子动)
解决方法:
a.用内边距实现(记得修改高度)
b.给父元素添加透明色的上边框(透明色:transparent)
c.给父元素设置overflow:hidden;
B.外边距的塌陷问题(兄弟元素)
解决方案:给其中一个兄弟设置足够的间隔
C.清除元素默认的内外边距的差异
解决方案:
*{margin:0; padding:0;}
D.盒子在水平方向上自动居中:margin:0 auto;