Web网页开发-盒模型-笔记

发布时间:2024年01月02日

1.CSS的三种显示方式
(1)块级元素:标签所占区域默认为一行
特点:一行一个 ?可设宽高
(2)行内元素:标签所占区域由内容顶开,行内元素无法使用text-align
特点:一行多个 不可设宽高,margin上下和padding上下都不能改变位置,但是上下内边距可以撑开盒子大小
(3)行内块元素:既有行内元素特点,又有块级元素特点[img、input、td]
特点:一行多个 可设宽高
注意:当元素转成行内块之后,用vertical-align改变行内元素的对齐方式


2.块级元素、行内元素、行内块元素之间的转换
display:block-块级元素
display:inline-行内元素
display:inline-block-行内块元素
3.边框合并:border-collapse:collapse
4.盒模型
外边距:[盒子与盒子之间的距离] margin
内边距:[盒子与内容之间的距离] paading
把标准盒子转换成怪异盒子
box-sizing:border-box
盒子包括:内容、内边距、边框、外边距
内边距padding:
| 1个值 | padding:上下左右内边距
| 2个值 | padding:? ?上下内边距 ? ?左右内边距?
| 3个值 | padding:上内边距 ? 左右内边距 ? 下内边距
| 4个值 | padding:? ?上内边距 右内边距 下内边距 左内边距?
内边框还可以指定具体方向的内边距
标准盒:盒子的大小会随着边框和内边距变化而变化
? ? ? ? ? ? ? 盒子大小=内容+内边距+边框+外边距
? ? ? ? ? ? ? 内容大小=width和heght
怪异盒:盒子的大小不会随着边框和内边距变化而变化
? ? ? ? ? ? ? 盒子大小=width和weight
5.嵌套盒子外边距合并问题:
父盒子没有边框,并且子盒子设置了外边距,此时,子盒子的外边距会穿透父盒子,带着父盒子一起移动
解决方案
? ? ? ? ? ? ? 1.给父盒子设置边框
? ? ? ? ? ? ? 2.给父盒子设置内边框
? ? ? ? ? ? ? 3.给父盒子设置overflow:hidden,让父盒子中的距离无法穿透,无法溢出
6.兄弟盒子外边距合并问题:
当上盒子设置下外边距,下盒子设置上外边距,之间的距离为其中的最大值

文章来源:https://blog.csdn.net/pinbodeshaonian/article/details/135335607
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。