css中的position、box-sizing你搞懂了吗？

最新推荐文章于 2022-07-30 10:36:16 发布

子时不睡

最新推荐文章于 2022-07-30 10:36:16 发布

阅读量728

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_45755816/article/details/122520832

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

css中的position、box-sizing你搞懂了吗？

position
box-sizing
box-pack

💖💖每周前端小知识开心💖💖

position

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如元素）表现得像块级元素一样。还可以通过把 display 设置为none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

css定位机制

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)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{
            border: 4px solid aqua;
        }
        span{
            border: 4px solid rgb(11, 212, 38);  
        }
    </style>
</head>
<body>
    <div>子时不睡</div>
    <div>子时不睡</div>
    <span>子时不睡</span>
    <span>子时不睡</span>
    <div>子时不睡</div>
    <div>子时不睡</div>
</body>
</html>

在这里插入图片描述

从上面可以看出块状元素 (蓝色)和行内元素（绿色）的区别
也说明了块状元素和行内元素的普通流的定位情况

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

position属性

static

static 是默认值。任意 position: static; 的元素不会被特殊的定位。一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
relative

relative 表现的和 static 一样，除非你添加了一些额外的属性。在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

生成相对定位的元素，相对于其正常位置进行定位。

absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素.

元素框从文档流完全删除

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定

fixed

一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

生成绝对定位的元素，相对于浏览器窗口进行定位。

<!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>position属性</title>
</head>
<body>
    <p>static</p>
    <div class="static">
        static 是默认值。任意 position: static; 的元素不会被特殊的定位。
        一个 static 元素表示它不会被“positioned”，一个 position 属性被设置为其他值的元素表示它会被“positioned”。
    </div>
    <p>relative</p>
    <div class="relative1">
        relative 表现的和 static 一样，除非你添加了一些额外的属性。
    </div>
    <div class="relative2">
        在一个相对定位（position属性的值为relative）的元素上设置 top 、 right 、 bottom 和 left 属性
        会使其偏离其正常位置。
        其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
    </div>
    <p>fixed</p>
    <div class="fixed">
        hello,this is fixed
    </div>

    <p>absolute</p>
    <div class="relative">
        这个元素是相对定位的。如果它是 position: static; ，
        那么它的绝对定位子元素会跳过它直接相对于body元素定位。
        <div class="absolute">
            这个元素是绝对定位的。它相对于它的父元素定位。
        </div>
    </div>
</body>
<style>
.static{
    position: static;
    border-color: greenyellow;
    border-width: 2px;
    border-style: solid;
}

.relative1 {
  position: relative;
  border-color: greenyellow;
  border-width: 2px;
  border-style: solid;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
  border-color: greenyellow;
  border-width: 2px;
  border-style: solid;
}
.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
  border-color: rgb(149, 8, 243);
  border-width: 2px;
  border-style: solid;
}
.relative {
  position: relative;
  width: 600px;
  height: 400px;
  border-color: rgb(243, 8, 20);
  border-width: 2px;
  border-style: solid;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
  border-color: rgb(243, 8, 20);
  border-width: 2px;
  border-style: solid;
}
</style>
</html>

在这里插入图片描述

box-sizing

认识

告诉浏览器怎么定义一个元素的宽和高，是否需要加上内边距padding和边框

在css盒子模型默认定义里面，如果对一个元素设置width和height，只会应用到这个元素的内容区。如果这个元素还有border或padding，这浏览器上的盒子width和height实际还要包括设置的边宽和内边距。所以在调整一个元素的宽度和高度需要时刻注意这个元素的边框和内边距。当我们需要实现响应式布局，就会特别麻烦。所以如果需要实现响应布局时，可以想想是否要设置box-sizing属性

属性

值	说明
content-box	默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box	告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去(border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。注：border-box 不包含 margin。
inherit	指定 box-sizing 属性的值，应该从父元素继承

box-pack

认识

规定当框大于子元素的尺寸，在何处放置子元素。

目前好像所有浏览器都不支持box-pack属性。

火狐浏览器：通过-moz-box-pack支持

chorme ：通过-webkit-box-pack支持

属性

值	说明
start	对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）
end	对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）
center	额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素
justify	额外的空间平均分配给每个子元素