六大属性:
margin、border、padding、width、height、backgroung
margin:外边距(即盒子与盒子之间的距离)
margin-top、margin-right、margin-bottom、margin-left
margin后面值的个数:
margin:10px (上下左右都是10px)
margin:10px 20px(上下10px,左右20px)
margin:10px 20px 30px(上10px 左右20px 下30px)
margin对于男标签都起作用,对于女标签只在水平上有效,垂直方向不起作用
margin可以设置负值
margin 塌陷(重叠)问题:前提(男标签 垂直方向)
1、父子元素之间重叠:父元素的margin-top和父元素中的第一个子元素margin-top重叠
解决方法:
1、给父元素设置border-top
2、给父元素设置padding-top
3、给男标签(块级元素)变性成不男不女(行内块)任何一个设置都可以
2、兄弟元素之间重叠:上面盒子的下margin和下面盒子的上margin重叠,中间margin取大优先
解决方法:
1、给男标签变成不男不女(只能变一个)
2、浮动:浮动元素不会塌陷
border:边框
border:1px solid red
border-width 、border-style、border-color
padding:内边距 (border与内容距离)
content:width、height
女标签不能设置,宽度有内容撑起,高度有font-size决定
宽高设置百分比,是占据父元素的多少
backgroung
background-color:背景颜色
透明度的表示方法;rgba、transparent、opcity:0
background-image:url() 背景图片
默认情况下图片在水平和垂直方向都会平铺
1,默认水平和垂直方向都会平铺
2,如果空间不足,图片也会显示,只是显示不完整
3,url后面的路径引号可加可不加
4,背景图片默认会填充border,padding,content
background-attactment:设置背景是否随着滚动条的滚动而滚动
fixed不随变化而变化
backgroung-repeat
background-position