一,内外边距 magrin 设置外边距 padding 设置内边距 四个值:上右下左原则 三个值:上,左右,下 两个值:上下;左右 外边距(margin) margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。 margin-top:上外边距 margin-right:右外边距 margin-bottom:下外边距 margin-left:上外边距 margin:上外边距 右外边距 下外边距 左外边 可以让一个盒子实现水平居中,需要满足一下两个条件: 1. 必须是块级元素。 2. 盒子必须指定了宽度(width) magrin:0 auto;(图片,盒子居中) 常用:*{ margin:0 padding:0 }(用来去除全体默认样式) 区别: 行内元素: a:在一行显示 b:宽高不能设置 c:上 下margin不管用,上 padding不管用,可以设置左右margin,左右下padding管用 块元素: a:独占一行 b:可以设置宽高 C:margin. padding都可以设置,需要注意:上 下margin如果重叠取较大值 解决margin塌陷的方法: 在两个盒子的父类上增加属性:over flow:hidden; 二,box-shadow box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影; 例:box-shadow: 10px 10px 10px 10px red inset;(默认为外阴影) 1. 前两个属性是必须写的。其余的可以省略。 2. 外阴影 (outset) 但是不能写(默认),想要内阴影使用inset 三,浮动 float 如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。 解决盒子随着上一个盒子浮动而变动的问题可以在下方盒子增加clear:both;清除浮动 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。浮动的元素排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。 总结: 1. 浮动的目的就是为了让多个块级元素同一行上显示。 2. 加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面。 3. 加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏给了标准流的盒子。 4. 特别注意,首先浮动的盒子需要和标准流的父级搭配使用, 其次特别的注意浮动可以使元素显示模式体现为行内块特性。演示示例:浮动有隐藏模式转换 box shadow 默认外阴影 inset设置内阴影