css的盒子模型，定位，浮动示例以及讲解

请你一定要记得我好吗
237 阅读4分钟

盒子模型

微信截图_20220325200800.png

border(边框)

微信截图_20220325201114.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: deepskyblue;
            border: 5px solid black   /*border:width style color; 复合样式,这样是四条边都一样*/
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

微信截图_20220325201605.png

border-width ： 边框宽度 border-style ：边框类型 (solid实线 dashed虚线 dotted点线 double双边框) border-color ： 边框颜色

以上三个东西可以给多个值：

一个值 代表4个方向都一样 上右下左 （顺时针） 两个值 上下 右左 三个值 上 右左 下 四个值 都不一样

另外还可以详细要求：

border-right-width 右边框大小
border-bottom-width 下边框大小
border-top-width:上边框大小

border-style 边框样式
border-top-style  顶部边框类型
border-right-style  右边边框类型
border-bottom-style  底部边框类型
border-left-style  左边边框类型

border-color  边框颜色
border-top-color  顶部边框颜色
border-right-color  右边边框颜色
border-bottom  底部边框颜色
border-left-color 左边边框颜色

复合样式:
border-top
border-right
border-left
border-bottom

padding(内边距)

※※※padding会撑大盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: chartreuse;
            padding: 100px;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

2022-03-25 (1).png

可以看到padding已经撑大了盒子，padding也可以详细标注，具体如下：

padding-right
padding-left
padding-top
padding-bottom:

注意：不能给padding设置颜色

margin(外边距)

外边距是相对而言的

margin 外边距 元素与其他元素的距离（边框以外的距离） 1个值 代表4个方向值一样 顺时针 2个值 上下和左右 ※※※margin: auto; 快速左右居中 如果设置了两个值的话： 垂直方向： margin-bottom , margin-top 取两者之间的较大值 水平方向： margin-left , margin-right 取两者之和

也可以具体要求：

margin-left

margin-top

margin-bottom

margin-right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		*{
            padding: 0;      <!--去掉缝隙-->
            margin: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background: chartreuse;
            margin: 100px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: chartreuse;
            margin: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="box1">
    </div>
</body>
</html>

有无margin的区别：

微信截图_20220325204632.png

微信截图_20220325204651.png

display: inline-block

与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。

同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

下例展示 display: inline、display: inline-block 以及 display: block 的不同行为：

<!DOCTYPE html>
<html>
<head>
<style>
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;  
  background-color: yellow; 
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
</style>
</head>
<body>

<h1>display 属性</h1>

<h2>display: inline</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="a">the People's Republic of China</span>. Welcome to <span class="a">Shanghai</span>!</div>

<h2>display: inline-block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="b">the People's Republic of China</span>. Welcome to <span class="b">Shanghai</span>!</div>

<h2>display: block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="c">the People's Republic of China</span>. Welcome to <span class="c">Shanghai</span>!</div>

</body>
</html>

微信截图_20220325210016.png

微信截图_20220325210049.png

注：display: inline-block这个小节的图片和源码来自于W3school

overflow:hidden

超出父类的会被切掉，相当于不存在，不论是文字还是别的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .box{
            width: 200px;
            height: 200px;
            background: blue;
            overflow: hidden;
        }
        .box div{
            width: 100px;
            height: 100px;
            background: blueviolet;
            margin: 100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
        </div>
    </div>
</body>
</html>

有无overflow:hidden的区别

微信截图_20220325211222.png

微信截图_20220325211336.png

注意

1.margin调整内部div外边距；

2.padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）

3.border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。

4.内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。

5.盒子的长/宽 = 样式大小 + 内边距 *2 + 边框 *2

另外再说一个网址，这里面的代码的作用是把浏览器自带的、默认的设置全部取消

meyerweb.com/eric/tools/…

浮动

基本内容

浮动产生了脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blueviolet;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

区别如下：

微信截图_20220325232739.png

微信截图_20220325232827.png

微信截图_20220325233123.png

微信截图_20220325233341.png 可以看出，有浮动属性的是飘起来的，没有浮动属性的会压在下面。

高度塌陷

微信截图_20220325233858.png 可以看到，内容把边框撑大了（截屏原因，实际上红框从左至右都有，这里只截了一部分）

微信截图_20220325234053.png

可以看到有浮动以后产生了高度塌陷，由于现在子元素脱离文档流，所以红框产生高度塌陷，怎么解决呢？（解决父级高度塌陷）

1.如果知道高度塌陷的高度，就直接指定红框高度即可，这种方法不常用。

2.标准用法：clearfix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            border: 1px solid red;
        }
        li{
           list-style: none;
           width: 50px;
           height: 50px;
           background: deepskyblue;
           float: left;
       }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <ul class="clearfix">    <!--此类名专门用来清除浮动，其他什么都不干-->
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
</html>

微信截图_20220325234844.png

注：文字左右居中 text-align : center

​ 文字上下居中 line-height : 行高px

​ 倒圆角 border-radius ：可以填1，2，3，4个值，填50%就是圆

定位

微信截图_20220326001824.png

微信截图_20220326001835.png

静态定位（默认）相当于没定位

1.相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .a{
            width: 100px;
            height: 100px;
            background: deepskyblue;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .b{
            width: 100px;
            height: 100px;
            background: #831ee0;
        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>

微信截图_20220326002455.png

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

2.绝对定位（会脱离文档流）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        .a{
            width: 100px;
            height: 100px;
            background: deepskyblue;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 2;
        }
        .b{
            width: 100px;
            height: 100px;
            background: blueviolet;
            position: absolute;
            top: 100px;
            left: 100px;

        }
    </style>
</head>
<body>
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>

微信截图_20220326152430.png

谁权重高就先显示谁，子级要绝对定位时，要给父级一个相对定位，这样可以减少定位时的错误

3.固定定位

他是依据浏览器窗口定位的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
        }
        .a{
            background: deepskyblue;
            position: fixed;
            bottom: 50px;    <!--位置是自己填写的(上下左右)-->
            right: 0;
        }
    </style>
</head>
<body style="height: 2000px">    <!--设置浏览器页面高度-->
    <div class="a"></div>
    <div class="b"></div>
</body>
</html>

这时你会发现无论怎么滑动鼠标，有一块东西都会在一个地方不动

4.补充

微信截图_20220326005045.png

avatar
文章
阅读
粉丝