css 相对元素不溢出父容器 css中的相对单位

转载

技术领航者之声 2024-03-26 17:39:24

文章标签 css 相对元素不溢出父容器外边距 css html 文章分类 云原生云计算

css学习1

1.px，em ,rem,
2.动态改变自定义属性
3.盒模型

3.1实现2列等高
3.2 使用min-height和max-height
3.3 垂直居中内容
3.4 负外边距
3.5 解决容器外部折叠
3.6 使用猫头鹰选择器

1.px，em ,rem,

css支持几种绝对长度单位，最常用、最基础的是像素（px）。

css带来的抽象性带来了额外的复杂性。相对单位就是css用来解决这种抽象的一种工具。我们可以基于窗口大小来等比例地缩放字号，而不是固定为14px，或者将网页上的任何元素的大小都相对于基础字号来设置，然后只用修改一行代码就能缩放整个网页。

em是最常见的相对长度单位。在css中，1em等于当前元素的字号，其准确值取决于作用的元素。

当设置padding,height,width,border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。

当前元素的字号决定了em。

rem是root em的缩写。rem不是相对于当前元素，而是相对于根元素的单位。不管在文档中的什么位置使用rem，1.2rem都会有相同的计算值：1.2乘以根元素的字号。

浏览器的默认字号是16px。

当浏览器解析HTML文档时，会在内存里将页面的所有元素表示为DOM（文档对象模型）。它是一个树结构，其中每个元素都由一个节点表示。html元素是顶级（根）节点。它下面是子节点，head和body，再下面是逐级嵌套的后代节点。

在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（:root），可以用来选中它自己。这等价于类型选择器html，但是html的优先级相当于一个类名，而不是一个标签。

在css里面，什么时候用px,em和rem呢。掌握css的一个特点是学会在适当的场景使用适当的工具。一般用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角。

这样字号是可预测的，同时还能在其他因素改变元素字号时，借助em缩放内外边距。用px定义边框也很好用。

如果希望默认字号为14px，那么不要讲默认字体设置为10px然后再覆盖一遍，而应该直接将根元素字号设置为想要的值，将想要的值除以继承值（浏览器默认值）为14/16，等于0.875.

如下：

: root {

font-size:0.875em;

}

2.动态改变自定义属性

html文件如下：（可以使用js动态改变对应的自定义属性值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./2-3.css" rel="stylesheet" type="text/css">

    <script type="text/javascript">
    var root=document.documentElement;
    var styles=getComputedStyle(root);
    var mainColor=styles.getPropertyValue('--main-bg');
    console.log(String(mainColor).trim());

    document.documentElement.style.setProperty('--main-bg','#cdf');
    </script>
</head>
<body>
    <div class="panel">
        <h2>Single-origin</h2>
        <div class="body">
            We have built partnerships with small farms aroud the world to hanle-select beans at the peek of season.We
            then carefully roast in small batches to maximize their potential;
        </div>
    </div>
    
    <aside class="dark">
        <div class="panel">
            <h2>Single-origin</h2>
            <div class="body">
                We have built partnerships with small farms aroud the world to hanle-select beans at the peek of season.We
                then carefully roast in small batches to maximize their potential;
            </div>
        </div>
    </aside>
</body>

</html>

css文件如下：

:root {
    --main-bg:#fff;
    --main-color:#000;
}

.panel {
    font-size: 1rem;
    padding: 1em;
    border: 1px solid #999;
    background-color: var(--main-bg);
    color: var(--main-color);
}

.panel >  h2 {
    margin-top: 0;
    font-size: 0.8em;
    font-weight: bold;
    text-transform: uppercase;
}


.dark {
    margin-top: 2rem;
    padding: 1em;
    background-color: #999;
    --main-bg:#333;
    --main-color:#fff;
}

自定义属性是css中一个全新的领域，开发人员刚开始探索。因为浏览器支持有限，所以还没有出现典型的用法。

值得注意的是，任何使用var()的声明都会被忽略。请尽量为这些浏览器提供回退方案。

3.盒模型

3.1实现2列等高

实现一行2列的布局，可以用float来进行，但是无法实现2列等高。可以用flex实现两列等高布局，flex不需要额外的div包裹元素。如下代码所示

给容器设置display:flex，它就变成了一个弹性容器，子元素默认等高。你可以给子元素设置宽度和外边距，尽管加起来可能超过100%，flex也能妥善处理。使用flex时，弹性容器内的元素不需要指定display或float属性。

注意：除了别无选择，否则不要明确设置元素的高度。先寻找一个替换方案。设置高度一定会导致更复杂的情况。

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./3-1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>Franklin Running club</h1>
    </header>
    <div class="container">
        <main class="main">
          <h2>Come join us</h2>
          <p>
            The Franklin Running club meets at 6:00pm every Thursday at the town square.Run are three to five miles,at your own pace.
            The Franklin Running club meets at 6:00pm every Thursday at the town square.Run are three to five miles,at your own pace
          </p>  
        </main>
        <aside class="sidebar">
            <div class="widget"></div>
            <div class="widget"></div>
        </aside>
    </div>
</body>
</html>

css代码如下

:root {
    box-sizing: border-box;
}
*,
::before,
::after {
    box-sizing: border-box;
}

body {
    background-color: #eee;
}

header {
    color: #fff;
    background-color: brown;
}

/*main {
     修复IE的bug 
    display: block;
}*/
.container {
    display: flex;
    width: 100%;
}

.main {
    background-color: chocolate;
    border-radius: .5em;
    width: 70%;
    /* float: left; */
}

.sidebar {
    padding: 1.5em;
    background-color: hotpink;
    border-radius: .5em;
    /* cal函数中加空格 */
    width: calc(30% - 1.5em);
    margin-left: 1.5em;
    /* float: left;     */
}

3.2 使用min-height和max-height

使用这2个属性设定最小值或最大值，而不是明确定义高度，这样元素就可以在这些界限内自动决定高度。

如果你想要一张大图放在一大段文字之后，但是担心它溢出高度，就可以用min-height指定一个最小高度值，而不指定它的明确高度。这意味着元素至少等于你指定的高度，如果内容太多，浏览器就会允许元素自己扩展高度，以免内容溢出。

同理， max-height允许元素自然地增高到一个特定界面。如果到达这个界限，元素就不再增高，内容会溢出。

3.3 垂直居中内容

css另一个让人头疼的问题就是垂直居中。过去有好几种方式实现垂直居中，但是每种方式都有一定的局限性。

为什么vertical-align不生效？

如果开发人员期望给块级元素设置vertical-align:middle后，块级元素里的内容就能垂直居中，那么他们通常会失望，因为浏览器会忽略这个声明。

vertical-align声明只会影响块内元素或者table-cell元素。对于行内元素，它控制着该元素跟同一行内其他元素之间的对齐关系。比如，可以用它控制一个行内的图片跟相邻的文字对齐。

对于现实为table-cell的元素，vertical-align控制了内容在单元格内的对齐。如果你的页面使用了css表格布局，那么可以用vertical-align来实现垂直居中。

一个不好的做法就是，给容器设定一个高度值，然后试图让动态大小的内部元素居中。在实现这种效果时，请尽量交给浏览器来决定高度。

CSS中最简单的垂直居中方法就是给容器相等的上下内边距，让容器和内容自行决定自己的高度。不管容器内的内容显示为块内、块级或者其他形式，这种方法都有效，但有时我们想给容器设置固定高度，或者无法使用内边距，因为想让容器内另一个子元素靠近容器的顶部或者底部。

这在等高列中是一个常见的问题，尤其是用浮动布局这种传统的技术实现时，还好css布局和flex能够轻松实现居中。不同的情况有不同的处理方法，如下：

垂直居中指南

在容器里让内容居中最好的方式是根据特定场景考虑不同因素。

可以用一个自然高度的容器吗？给容器加上相等的上下内边距让内容居中。
容器需要指定高度或者避免使用内边距吗？对容器使用display:table-cell和vertical-align:middle
可以用flex吗？如果不需要支持IE9，可以用flex居中内容
容器里面的内容只有一行文字吗？设置一个大的行高，让它等于理想的容器高度。这样让容器高度扩展到能够容纳行高。如果内容不是行内圆度，可以设置为inline-block。
容器和内容的高度都知道吗？将内容绝对定位
不知道内部元素的高度？用绝对定位结合变形。当前面的方法都无效的时候才推荐该方法。

3.4 负外边距

不同于内边距和边框宽度，外边距可以设置为负值。负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。

如果设置左边或者顶部外边距，元素就会相应地向左或者向上移动，导致元素与它前面的元素重叠。如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。给元素底部加上负外边距并不等于给它下面的元素顶部加上负外边距。

左边或者顶部的负外边距将元素向左或者向上拉。

右边或者底部的负外边距将跟随其后的元素向左边或者向上拉。（导致重叠）

如下所示，使用表格布局实现等高列时，给表格之间设置间距时，可以使用负外边距让表格的宽度和第一行一致。

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./3-1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>Franklin Running club</h1>
    </header>
    <div class="wrapper">
        <div class="container">
            <main class="main">
                <h2>Come join us</h2>
                <p>
                    The Franklin Running club meets at 6:00pm every Thursday at the town square.Run are three to five
                    miles,at your own pace.
                    The Franklin Running club meets at 6:00pm every Thursday at the town square.Run are three to five
                    miles,at your own pace
                </p>
            </main>
            <aside class="sidebar">
                <div class="widget"></div>
                <div class="widget"></div>
            </aside>
        </div>
    </div>
</body>
</html>

css代码如下

:root {
    box-sizing: border-box;
}
*,
::before,
::after {
    box-sizing: border-box;
}

body {
    background-color: #eee;
}

header {
    color: #fff;
    background-color: brown;
}

/*main {
     修复IE的bug 
    display: block;
}*/
.container {
    display: table;
    width: 100%;
    border-spacing: 1.5em 0;
}

.wrapper {
    margin-left: -1.5em;
    margin-right: -1.5em;
}

.main {
    display: table-cell;
    background-color: chocolate;
    border-radius: .5em;
    width: 70%;
    /* float: left; */
}

.sidebar {
    display: table-cell;
    padding: 1.5em;
    background-color: hotpink;
    border-radius: .5em;
    /* 加空格 */
    width: 30%;
    margin-left: 1.5em;
    /* float: left;     */
}

3.5 解决容器外部折叠

容器上下边距会产生折叠，左边边距不会折叠。

外边距折叠时，有可能会产生意想不到的效果。

如下方法可以防止外边距折叠：

1.对容器使用overflow:auto(或者非visible的值)，防止内部元素的外边距跟容器外部的外边距折叠。这种方式副作用最小。

2.在两个外边距之间加上上边框或者内边距，防止它们折叠。

3.如果容器为浮动元素、内联块、绝对定位或固定定位时候，外边距不会在它外面重叠。

4.当使用flex布局时，弹性布局内的元素之间不会发生外边距折叠。

5.当元素显示为table-cell时不具备外边距属性，因此他们不会折叠。

3.6 使用猫头鹰选择器

* + *  是猫头鹰选择器，该选择器是一个通用选择器（*),它可以选中所有元素，后面是一个相邻兄弟组合器（+），最后是另一个通过选择器。它因神似一只眼神空洞的猫头鹰而得名。猫头鹰选择器功能，它会选中直接跟在其他元素后面的任何元素。也就是说，它会选中页面上有着相同父级的非第一个子元素。

通过使用猫头鹰选择器来全局设置上下堆叠的元素的间距，如下

body * + * {
    margin-top: 1.5em;
}

使用猫头鹰选择器是需要权衡的。它省去了许多的需要设置外边距的地方，但是在某些不想加外边距的地方则需要覆盖。通常只在有并列元素，或者有多列布局时这样使用。

如下所示，为完整的代码

html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./3-1.css" rel="stylesheet" type="text/css">
</head>
<body>
    <header>
        <h1>Franklin Running club</h1>
    </header>

    <div class="container">
        <main class="main">
            <h2>Come join us</h2>
            <p>
                The Franklin Running club meets at 6:00pm every Thursday at the town square.Run are three to five
                miles,at your own pace.
                The Franklin Running club meets at 6:00pm every Thursday at the town square.Run are three to five
                miles,at your own pace
            </p>
        </main>
        <aside class="sidebar">
            <a href="/" class="button-link">follow us on Twitter</a>
            <a href="/" class="button-link">like us on Facebook</a>
            <a href="/" class="sponser-link">become a sponser</a>
        </aside>

    </div>
</body>

</html>

css代码如下：

:root {
    box-sizing: border-box;
}
*,
::before,
::after {
    box-sizing: border-box;
}

body {
    background-color: #eee;
}

header {
    color: #fff;
    background-color: brown;
}

/*main {
     修复IE的bug 
    display: block;
}*/
.container {
    display: flex;
    width: 100%;
    border-spacing: 1.5em 0;
}



.main {
    /* display: table-cell; */
    background-color: chocolate;
    border-radius: .5em;
    width: 70%;
    /* float: left; */
}

.sidebar {
    /* 消除猫头鹰选择器的影响; */
    margin-top: 0; 
    padding: 1.5em;
    background-color: hotpink;
    border-radius: .5em;
    /* 加空格 */
    width: 30%;
    margin-left: 1.5em;
    /* float: left;     */
}

.button-link {
    display: block;
    background-color: darkgoldenrod;
    padding: 0.5em;
    border: 1px solid;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
   
}

.sponser-link {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color:#0072b0;
}

body * + * {
    margin-top: 1.5em;
}

/* .button-link + .button-link {
    margin-top: 1.5em;
} */

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。