day03-浮动属性&盒模型

1.浮动属性的使用     属性:float 使..浮动、使..漂浮     属性值:         - left         - right         - none     特点         - 浮动只能控制元素在水平方向上移动         - 浮动会使元素脱离文档流 元素的初始位置不存在 当前元素会漂浮在浏览器的上方         - 浮动是会破坏初始的布局方式         - 浮动的停止条件         - 当元素浮动的时候 碰到父级的包含框就会停止浮动         - 当多个元素浮动的时候 默认是左右排列 => 浮动属性碰到前面含有浮动属性的元素也会停止浮动         - 当子级元素大于父级元素宽度的时候 最后一个子级元素会往下移动 直至找到足够的空间     流         - 普通流/文档流 网页的正常布局 从上到下 从左到右         - 浮动流         - 定位流               示例           ul li{             float: left;             width: 100px;             height: 35px;             /* 清除列表的默认样式 黑色的实心圆 */             list-style: none;             /* 控制文本在水平方向对齐 */             text-align: center;             /* 控制文本在垂直方向上对齐 */             line-height: 35px         }                 浮动的特殊情况:文本图片的环绕效果           - 浮动会使元素脱离文档流 下面的元素就会被上面的覆盖           - 但是！文本是一个特殊的结构(真实的dom结构) 不会被浮动元素盖住           - 浮动元素只会盖住盒子大小

2. 盒模型概念: 设置元素与元素之间的间距     组成部分:         - content 内容区域 对应快递模型中的快递物品         - padding 内边距 对应快递模型中的快递物品和快递盒之间的填充物         - border 边框 对应快递模型中的快递盒         - margin 外边距 对应快递模型中的快递物品之间间距                          宽度 : padding的左侧和右侧 50+50px                 高度 : padding的上和下 50+50px                 padding属性的使用:内边距(填充、补白)         - 从快递模型中得出padding内边距设置父级元素与子级元素之间的间距         - padding内边距通常是给父级元素设置的         - padding内边距会将当前的元素撑大,为了不影响布局 需要在宽高上减去相应的padding值         - padding也可以在子级元素上添加 依然会撑大当前元素的宽高大小      padding方向值         - padding:一个属性值 表示上下左右         - padding:两个属性值 表示上下 和 左右         - padding:三个属性值 表示上 和 左右 和 下         - padding:四个属性值 表示上 右 下 左             padding方向值还可以使用padding-方向即可         - padding-left/top/right/bottom     总结         - padding可以给父级添加也可以给子级添加         - 父级:所有子级位置间距都是相同的时候         - 子级:每个子级之间的间距都是不一样的      思考:padding可不可以使用负值?                 不可以接负值         margin外边距的使用         - margin在快递模型中对应的是多个快递之间的位置关系         - margin通常是用来设置同级元素之间的位置间距         - 哪个元素需要设置间距就给当前元素添加margin外边距即可         - margin不会将当前元素的宽高大小撑大 不用减去相应的margin     margin方向值         - margin:一个属性值 表示上下左右         - margin:两个属性值 表示上下 和 左右         - margin:三个属性值 表示上 和 左右 和 下         - margin:四个属性值 表示上 右 下 左             margin方向值还可以使用margin-方向即可         - margin-left/top/right/bottom     思考:          - 内外边距可不可以换着用?         - margin可不可以接负值?                  可以     margin的常见bug         - 在父级元素下只有一个子级元素 给子级元素设置margin-top会错误解析到父级元素             - padding替代margin             - 给父级添加边框属性(还没学习)             - 文本溢出属性: overflow:hidden             - 两个同级元素设置margin-top/bottom 之间会取最大值                                    盒模型的组成部分是content、padding、border、margin           - content 表示元素设置的宽度和高度         - padding和margin表示内外边距         - border (表示边框  明天学习)     内外边距的总结         相同点             - 都可以设置元素的间距             - 方向值写法都是一样          不同点             - padding表示内边距 设置了会撑大当前元素的宽高大小             - margin表示外边距 设置不会撑大当前元素的宽高大小         固定用法             - *{margin:0;padding:0} 清除浏览器和页面中的所有元素的间距             - 版心选择器{margin:0 auto} 版心居中