盒子模型

240 阅读2分钟

六大属性:

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