day05-css(盒子模型及相关属性和阴影,浮动)

一,内外边距
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设置内阴影
原文地址:https://www.cnblogs.com/adylz111/p/13433523.html