css盒子模型

1.css盒子模型
组成:content->padding->border->margin
物品 填充物 包装盒 盒子跟盒子之间的距离
content:内容区域 width height组成
padding:内边距
只写一个值:30px 表示上下左右
写两个:30px 40px(上下,左右)
写四个值:30px 40px 50px 60px(上,右,下,左)
单一样式只能写一个值:
padding—left:左边距
padding-right:右边距
padding-top:上边距
padding-bottom:下边距
margin:(外边距)
只写一个值:30px 表示上下左右
写两个:30px 40px(上下,左右)
写四个值:30px 40px 50px 60px(上,右,下,左)
单一样式只能写一个值:
margin—left:左边距
margin-right:右边距
margin-top:上边距
margin-bottom:下边距
注释:
1.背景色会填充到margin以内的区域(不包括margin区域)
2.文字会再content区域
3.padding不能出现负值,margin时可以出现负值的
box-sizing:
盒子寸:可以改变盒子模型的展示形态
默认值:content-box:width,height->content
border-box:width,height->content padding border
使用场景:
1.不用在计算某些值
2.解决一些百分比的问题
盒子模型的一些问题:
1.margin叠加问题,出现再margin上下同时存在的情况,会取上下中值较大的作为叠加的值
2.margin传递问题,只会出现在,嵌套结构当中,且只有margin-top会有传递问题,其他三个方向是没有传递问题的。
解决方案:
1.bfc规范
2.给父容器添加边框
3.margin换成padding
盒子模型扩展:
1.左右可以自适应auto扩展,上下不行
2.width,height不设置的时候对盒子模型的影响,会自动计算容器大小,节省代码
标签分类:
按类型:
块block(独占一行,支持所有样式,不写宽的时候跟父元素相同,所占区域是一个矩形):div,p,ul,li,h1....
内联inline(挨在一起,有些样式不支持例如:宽高,边距。不写宽的时候宽度由内容决定,所占区域不一定是矩形,内链标签之间会会由空隙):span,a,em,strong,img...
内联-块inline-block(挨在一起,支持宽高):input,select....
注释:布局一般用块标签,修饰一般用内联标签
按内容:
flow:流内容
metadata:元数据
sectioning:分区
heading:标题
phrasing:措辞
embedded:嵌入的
interactive:互动的

posted @ 2020-07-16 20:13  无敌臭弟弟  阅读(105)  评论(0编辑  收藏  举报