*此文档仅作为自己复习css时使用 将最基础的写在这 此次资料来源于pinkTc的video
一:盒模型 (box model)
简单点来说盒子模型就是把html中的布局元素看作是一个矩形的盒子
组成:
①border:边框
②content:文字内容
③padding:文字内容与边框之间的边距(内边距)
④margin:边框以外(盒子和盒子之间)的间距(外边距)
css盒子模型本质上是一个盒子,封装周围的html元素,它包括以上的内容
①border:边框(影响盒子模型的大小)
由边框宽度、样式以及颜色组成
add:表格的细线边框border-collapse 控制相邻单元格的边框 (collapse属性值表示相邻边框合并)(给表格设置边框时会出现单元格边框之间的合并,这样就会解决 )
边框会影响盒子的实际大小,所以1.测量盒子的时候不测量边框2.如果测量了边框,则需要宽/高减去边框的宽度(记住要减2次)
②content:文字内容
默认出现在盒子的左上顶部(因浏览器而异)
③padding:文字内容与边框之间的边距(也会影响盒子模型的大小)
指定padding值之后,内容和边框之间有了间距,影响了盒子的实际大小(撑大了),也就是说如果盒子已经有了宽度和高度,此时在增加内边距就会撑大盒子,如果我们想要盒子跟ui提供的效果图大小一样,则让宽/高减去多出的内边距大小即可(同border类似)
padding的用于还是非常广泛的 比如果在一个侧边栏中文字距离左边框的距离一般不会有文本缩进(text-indenr)而是会直接用padding,这样会更加准确
如果一个元素没有给宽度/高度,那么此元素的宽/高将继承父元素的宽/高
如果没有给块状元素宽/高,那么此时padding不会撑开此盒子的宽/高
比如说一个盒子里面嵌套这一个子元素 如果没给定此元素的宽高,则此元素会继承父元素的宽高,此时给子元素一个padding值时是不会撑开此盒子的,但是如果给定了宽度/高度 则回撑开此盒子
在这里为什么要说影响盒子模型的大小(撑开了呢)如果在我们的实际开发中 ,刚开始我们都预定好了box的宽度 并且已经布局完毕,当我们添加具体内容时,如果改变盒子模型的某些值得话因此就会影响到该盒子的大小,继而影响到其他与之相临的盒子(比如父元素的宽度固定了 ,可能会将另一个盒子挤下来),后期也有两个具体的属性来控制各自大小
④margin:外边距(盒子与盒子之间的距离)
1. 典型应用:块级盒子实现水平居中显示
条件:①块级盒子必须指定宽度②左右外边距设置auto(此方法对于行内元素和行内块元素无效,要想使其水平居中 可以text-align)
2.外边距合并
使用margin定义块元素的垂直外边距时,可能会出现外边距的合并
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的块状元素有margin-bottom,下面的元素有margin-top,则它们之间的垂直间距不是bottom和top的和,而是取两者值中最大的一个生效,这种现象称为相邻块元素垂直外边距的合并。所以说要想解决此现象可以只给一个盒子外边距
嵌套块元素垂直外边距的塌陷
父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值
对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,如果此时想让子元素与父元素有间隔,给子元素设置margin-top会无效(父元素连通子元素一起向下移动较大一个的margin-top值)
解决的方法:1.为父元素定义上边距 2.为父元素定义上内边距 3.为父元素添加overflow:hidden
margin部分有点混乱,BFC规范 明天再继续补充下