1.2-3css盒模型拓展应用

最新推荐文章于 2024-03-28 15:13:48 发布

阿雾a

最新推荐文章于 2024-03-28 15:13:48 发布

阅读量95

点赞数

分类专栏：前端笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_58526727/article/details/117373750

版权

前端笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

CSS 常用样式

盒模型扩展应用

清除默认样式

大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。

盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。

body,div,h1,h2,h3,h4,h4,h6,p,ul,li {
            margin: 0;
            padding: 0;  
}

<ul>和<ol>两种列表有默认的列表前缀：清除 list–style 属性。
ul,ol {list-style: none;}
<a>标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text- decoration(清除下划线)。
a {color: red;text-decoration: none;}
清除默认加粗效果：设置font-weight。
h1,h2,h3,h4,h5,h6，strong，b{font-weight: normal;}

除了清除默认样式，还可以给<body>标签设置整体文字样式，让大部分后代标签全部去继承。
body {color: #333;font-size: 20px;font-family:Arial,"宋体";}

高度 height 应用

根据不同的需求，高度属性可以设置也可以不设置。

如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。
如果不设置高度：会根据标签内部内容高度自动撑开。

以<div>标签为例，根据情况不同选择是否设置高度。
1.必须设置高度
设计图中盒子高度占位是固定的
当盒子设置固定高度时，如果自身盒子内部内容过多会溢出盒子区域，可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。

属性值	说明
visible	溢出部分可见（默认值）
hidden	溢出部分隐藏
scroll	溢出部分垂直和水平方向都出现滚动条
auto	没有溢出正常显示，有溢出则溢出方向自动出现滚动条

注意：正常情况下，padding部分是不会加载内容的，但当溢出时，属性值设置为hidden，溢出方向的padding部分也是会加载溢出内容的，但是盒子外部肯定不会加载溢出内容。

2.必须不设置高度
要求盒子高度必须自适应内部内容的高度。
（要求自适应高度也可以设置height的属性值是自适应）
div {height: auto;}

居中

文本水平居中

水平居中：text-align属性。
不论单行或多行都可以设置。
p{text-align: center;}

文本垂直居中

单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。
p{line-height: 200px;}

多行文本垂直居中：让盒子高度自适应或者正好等于多行文字的高度，设置文字内边距的上下值相同。
p{padding: 40px 0;}

元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。
垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。
.box {height: auto; padding: 50px 0;}

元素水平居中

针对类似<div>这种样式上必须独占一行的盒子，如果子盒子宽度低于父盒子宽度，可以设置子盒子的 margin 值，水平方向的值都设置为 auto。
原因：auto 只在水平方向有作用，水平方向的 margin 如果设置为 auto，边距会自动无限增大，直到撑满整个父元素宽度减去子元素宽度之外剩余的区域，如果两个水平方向都是 auto，两边都要无限大，只能达到一个平衡也就是两边距离相同，这就导致盒子居中。
.box{margin: 0 auto;}

父子盒模型

一般情况下，一个父元素内部可以放一个或多个子元素，而且多个子元素要排成一行显示，必须保证父元素的宽度一定要足够（不考虑溢出情况），需要遵循一个设置尺寸的规律：所有子元素的宽度加在一起不能大于父元素的宽度 width。
父元素的width ≥ 所有子元素width + padding + border + margin
如果不满足条件：要么多余的子元素掉下来不能在一排，要么溢出父元素,所以计算或量取尺寸时一定要计算准确，一像素都不能偏差。

特殊情况：盒模型自动内减
父子盒模型中，只有一个子元素，且子元素是类似 <div>标签必须占一行的。
不设置子元素的 width 属性，子元素的 width 属性值会自动加载父级元素的 width。如果同时设置了子元素水平方向的 padding 和 border 、margin，不需要手动去进行内减，子元素的 width 会自动收缩尺寸。(height不符合此条)
子元素所有的水平方向的位置所有属性的加和等于父元素的 width 。

margin 塌陷现象

margin 塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到了边距值大的值内部。

同级元素塌陷

上面的元素有下边距，下面的元素有上边距，两个边距相遇，真正的盒子间距离是较大的那个边距值。

父子元素塌陷

1.父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。
2.本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

解决 margin 塌陷问题的方法

①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。例如：
要让两个元素之间有100的间距，直接给上面元素设置100的margin-bottom，而不是给两个元素分别50
②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。
另外注意：水平方向的 margin 没有塌陷现象。