html-day04盒子模型
1.浮动:是一种布局属性,主要用于实现一行多列效果
语法: float:left; 或者 float:right; 应用: 1.一行多列-元素横着排列 2.实现图文环绕效果。 注意:浮动会让元素脱离文档流!
2.盒子模型:是一种思维模型,主要用于实现布局效果。
组成: 尺寸 + 内边距 + 外边距 + 边框
1.尺寸
1.设置宽度 width:*px | *%; 2.设置高度 height:*px | *%; 说明: 如果使用百分比,代表的是其父元素的宽高的百分比。 行级元素不能设置宽高。
2.边框
border:边框的粗度 线型 颜色; 线型有: solid实线 dashed虚线 dotted点线 double双线 设置指定方向的边框 border-方向的英文:边框的粗度 线型 颜色; 设置左边框 border-left:边框的粗度 线型 颜色; 设置上边框 border-top:边框的粗度 线型 颜色; 设置下边框 border-bottom:边框的粗度 线型 颜色; 设置右边框 border-right:边框的粗度 线型 颜色; 注意:单个和复合属性一起使用,必须复合在前,单个在后!
3.内边距:盒子内容和其边框之间的间隔。
padding:*px; padding:10px 20px 30px 40px; padding:10px 20px 30px; padding:10px 20px; padding:10px; 四个方向 对应规则:上方向出发,顺时针旋转对应。有缺省,取对边。 设置左内边距 padding-left:*px; 设置上内边距 padding-top:*px; 设置下内边距 padding-bottom:*px; 设置右内边距 padding-right:*px; 注意:padding会撑大盒子;在盒子的宽高基础上做减法解决
4.外边距:盒子边框和之外的东西的间隔。
margin:*px; margin:10px 20px 30px 40px; margin:10px 20px 30px; margin:10px 20px; margin:10px; 四个方向 对应规则:上方向出发,顺时针旋转对应。有缺省,取对边 设置左外边距 margin-left:*px; 设置上外边距 margin-top:*px; 设置下外边距 margin-bottom:*px; 设置右外边距 margin-right:*px;
块级元素和行级元素的区别: 【面试题】 块级元素:默认独占整行,是一个完整的盒子,可以设置宽高等。 行级元素:有多宽占多宽,不是完整的盒子,不可以设置宽高、垂直方向的内外边距等。 注意:可内可外用内边距 盒子自动水平居中 margin:0 auto;
ps的操作: ctrl+h 隐藏参考线