HTML文档是由一个个的html元素组成的盒模型:把每一个html元素看成一个盒子
盒模型的结构
1.content(内容):用来展示文字和图片
2.padding(内边距):内容与边框的距离
3.border(边框):元素的边框
4.margin(外边距):元素与元素之间的距离(父子元素,兄弟元素)
盒模型的两种形式
1.普通盒模型
2.怪异盒模型: box-sizing:border-box;
设置元素的盒模型类型
- content-box 标准盒模型
- border-box 怪异盒模型
怪异盒模型
在怪异盒模型下:
盒子的宽 = width(左右padding+左右border+content)+左右margin
盒子的高 = height(上下padding+上下border+content)+上下margin
如果设置了元素的盒模型类型为怪异盒模型,此时一定要注意,我们在设置
的width,height会被之后设置的padding,border分享,会缩小content的空间。
普通盒模型
在普通盒模型下:
盒子的宽度 = 左右magrin+左右padding+左右border+width
盒子的高度 = 上下margin+上下padding+上下border+height
content:内容,我们平时给元素添加的内容(文字,图片,某些元素)
都会显示在content所在的区域内
padding内边距:背景色会渲染pading区域
padding简写
1.四个值 顺时针 上 右 下 左的顺序!
2.三个值 上 左右 下的顺序!
3.两个值 上下 左右顺序!
4.一个值 上下左右都为这一个值!
border
设置一个元素的边框,需要设置三个值:
1.边框宽度
2.边框类型:silid,dotted,dashed
3.边框颜色(默认黑色)
margin类似于padding,但是背景色不会渲染margin区域。
块级元素的宽如果没有设置,其宽是从父级继承的宽度。系统会为某些元素设置默认的margin值或者padding值。
这对于我们以后尺寸的计算有影响,所以在以后的开发过程中,首先清除掉所有元素的margin和padding值。css首行代码:*{margin:0;padding:0}
# margin的坑点:
1.相邻兄弟元素在垂直方向上的margin值会出现融合的情况.融合后会
取两个元素里较大的值作为融合后的值.
如何解决该问题:display:inline-block;
2.当父级子级元素都设置了margin时,子级的margin值会传递到父级
# margin传递解决办法:
1.给父级加一个边框
2.给父级使用overflow:hidden属性,(推荐使用)
3.给父级或子级或两者都加display:inline-block解决;
auto
auto值可以帮我们灵活的进行元素的布局
在盒模型中,只有width,margin可以使用auto作为其的值.
1.水平方向上,如果width,margin-left,margin-right三个值中某个值为auto
其余值必须为定值,auto=父元素宽度-剩余两个值
2.当三个值都为定值时,系统会强制丢弃margin-right的值
3.当margin-left和margin-right的值都为auto时,width必须给定值.
resize
1.none:不允许元素改变大小
2.vertical:只允许元素在竖直方向上改变大小
3.horizontal:只允许元素在水平方向改变大小
4.both:允许元素水平竖直都可以改变大小
// IE和Opera不兼容resize属性.
resize:both;
/*如果要使元素的resize属性起作用,必须加溢出隐藏*/
overflow: hidden;