（10）CSS 常用样式--盒模型扩展应用

最新推荐文章于 2022-12-18 20:52:39 发布

泽哥ins

最新推荐文章于 2022-12-18 20:52:39 发布

阅读量338

点赞数

分类专栏： CSS3 文章标签：前端 css3 css

本文链接：https://blog.csdn.net/qq_36213140/article/details/121562361

版权

CSS3 专栏收录该内容

53 篇文章 5 订阅

订阅专栏

一、清除默认样式

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

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

<ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。

<a> 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text-decoration。

清除默认加粗效果：设置font-weight。

1.示例：我们没有添加默认样式清除的运行结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
</head> 
<body>
    <div class="box">这是一个div元素</div>
    <h1>这是一个一级标题</h1>
    <p>这是一个段落标签</p>
    <ul>
        <li>这是列表一</li>
        <li>这是列表二</li>
        <li>这是列表三</li>
    </ul>
</body>
</html>

2.示例：我们添加默认样式清除的运行结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
    <style>
        ul li {
            list-style: none;
            /* list-style-type: none;
            这两种写法都可以去除列表标记*/
        }
        body,div,h1,p,ul,li {
            margin: 0;
            padding: 0;
        }
    </style>
</head> 
<body>
    <div class="box">这是一个div元素</div>
    <h1>这是一个一级标题</h1>
    <p>这是一个段落标签</p>
    <ul>
        <li>这是列表一</li>
        <li>这是列表二</li>
        <li>这是列表三</li>
    </ul>
</body>
</html>

3.默认情况下超级链接<a>标签没有下划线，我们可以清除默认下划线样式，以及颜色。

<style>
    a {
        text-decoration: none;
        color: #666;
    }

</style>

4.默认情况下标题标签，b标签，strong标签的默认字体样式是正常不加粗。

<style>
       h1,h2,h3,h4,h5,h6,b,strong {
            font-style: normal;
        }
</style>

5.还可以给 <body> 标签设置整体文字样式，让大部分后代标签的选择器，比如class选择器，id选择器，都可以全部去继承叠代。

<style>
    body {
           color: #666;
           font-size: 14px;
           font-family:"Arial","consolas","Microsoft Yahei","SimSun";
        }
</style>

二、高度 height 应用

根据不同的需求，高度属性可以设置也可以不设置。不设置是自适应高度auto

如果设置了高度：盒子占有的高度位置就确定死了，后面的同级元素会紧挨着加载。

如果不设置高度：会根据标签内部内容高度自动撑开。

以 <div> 标签为例，根据情况不同选择是否设置高度：

1.必须设置高度

UI设计图中盒子高度占位是固定的，后面同级元素在高度下面加载。自身盒子内部内容过多会溢出盒子区域。

2.overflow 属性

设置了高度的盒子，如果内部元素的加载高度超过父级，会出现溢出效果。可以通过一个溢出的属性 overflow，进行溢出部分内容的显示效果设置。

3.必须不设置高度

要求盒子高度必须自适应内部内容的高度。或者设置height的属性值是自动的。

三、居中

在网页中经常见到元素或者文字居中的效果。

1.文本水平居中

水平居中：text-align属性。不论单行或多行都可以设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
    <style>
        div {width: 200px;height: 200px;border: 1px solid #f00;text-align: center;}
    </style>
</head> 
<body>
    <div>这是一个div元素</div>
</body>
</html>

2.文本垂直居中

单行文本垂直居中：让文字行高 line-height 等于盒子高度 height。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
    <style>
        div {
            width: 200px;
            height: 200px;
            line-height: 200px;
            border: 1px solid #f00;
            text-align: center;  
        }
    </style>
</head> 
<body>
    <div>这是一个div元素</div>
</body>
</html>

多行文本垂直居中：让元素高度自适应或者正好等于多行文字的高度，设置元素内边距上下值相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
    <style>
        div {
            width: 200px;
            padding: 30px 0;
            border: 1px solid #f00;
            text-align: center;  
        }
    </style>
</head> 
<body>
    <div>这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素这是一个div元素</div>
</body>
</html>

3.元素垂直居中

一个元素内部嵌套的子元素，在父元素中居中。垂直居中：与多行文字类似，让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
    <style>
        div {
            width: 200px;
            height: auto;
            padding: 10px 0;
            border: 1px solid #f00;
        }
    </style>
</head> 
<body>
    <div>
        <p>我是p元素我是p元素我是p元素我是p元素我是p元素我是p元素我是p元素我是p元素</p>
    </div>
</body>
</html>

4.元素水平居中

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css盒子模型扩展</title>   
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #f00;
        }

        div>p {
            width: 50px;
            height: 200px;
            background-color: #0f0;
            margin: 0 auto;
        }
    </style>
</head> 
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

5.margin塌陷现象

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

1.同级元素塌陷

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

2.父子元素塌陷

父子元素之间也会出现 margin 塌陷，父元素和子元素都设置了同方向的 margin-top 值，两个属性之间没有其他的内容进行隔离，导致两个属性相遇，发生 margin 塌陷。

本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级一起掉下来。

3.解决 margin 塌陷问题的方法

①同级元素：如果两个元素垂直方向有间距，只需要设置给一个元素，不要进行拆分。

②父子元素：让两个边距不要相遇，中间可以使用父元素 border 或 padding 将边距分隔开；更加常用的方法，父子盒模型之间的距离就不要用儿子的 margin 去踹出来，而是父级的 padding 挤出来。

另外注意：水平方向的 margin 没有塌陷现象。

泽哥ins

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
（10）CSS 常用样式--盒模型扩展应用

一、清除默认样式大部分标签都有一个浏览器加载的默认样式，会对布局造成一些影响。为了避免默认样式对整体布局效果造成影响，一定要清除默认样式。盒模型属性中内外边距：大部分容器级标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。<ul> 和 <ol> 两种列表有默认的列表前缀：清除 list--style 属性。<a> 标签的默认样式，顺带设置页面中常用的a的公共样式：设置 color 和 text-decoration。清除默认加粗效果：设置f
复制链接

扫一扫