3.前端CSS—盒子模型和浮动

一、CSS盒子模型

HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型

  盒子模型通过四个边界来描述:margin(外边距),border(边框),padding(内填充),content(内容区域),如图所示:

3.前端CSS—盒子模型和浮动

<style>
div {
    background-color: rgb(30, 33, 184);
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>

显示效果:红色边框实际是没有的

3.前端CSS—盒子模型和浮动

1.1 content(内容区域)

盒子的内容,显示文本和图像。CSS中的width和height属性直接作用的区域。

  width:指的是内容的宽度,而不是整个盒子真实的宽度。

  height:指的是内容的高度,而不是整个盒子真实的高度。

1.2 padding(内填充)

padding即内边距,padding的区域是有背景颜色的。且背景颜色和内容区域的颜色一致。

内边距的距离:边框到内容之间的距离。

  1.padding有四个方向,所以能够分别描述四个方向的padding。

  2.padding描述方法分两种:(1)小属性;(2)综合属性(空格隔开)

小属性设置——控制每个方向的宽度

/* 小属性设置 控制每个方向上的宽度*/
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;

综合属性设置——用空格隔开,顺时针方向设置

/* 综合属性,用空格隔开 顺时针方向 上右下左*/
padding: 20px 30px 40px 50px;

没有设置四个值的时候

/*只设置了三个值:上 左右 下*/
padding: 20px 30px 40px;

/*只设置两个值:上下  左右*/
padding: 35px 45px;

/*只设置一个值:上下左右*/
padding: 20px;

一般搭建网站要清除默认的padding,但是这样写效率低,可参考(css-reset 代码

    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
    </style>

1.3 border(边框)

border是边框的意思,边框有三要素:粗细、线性、颜色。

 值     |     描述
none    |   无边框
dotted  |   点状虚线边框
dashed  |   矩形虚线边框
solid   |   实线边框

三要素的特性:

border: 5px solid blue;
  1. 如果颜色不写(blue),默认是黑色;
  2. 如果粗细不写(5px),默认是不显示的。
  3. 如果只写了线性样式(solid),默认上右下左(顺时针)3px的宽度,默认是黑色
/*基础3要素*/
border-width: 5px;
border-style: solid;
border-color: red;
/*3要素进阶*/
border-width: 5px 10px;  /* 上下:5px 左右:10px */
border-style: solid dotted dashed double ;   /* 顺时针:上:实线边框 右:点状虚线 下:矩状虚线 左:双线 */
border-color: red green red;   /*上:红 左右:绿 下:红*/

按照方向设置border样式

/*按照方向去分*/
/*上*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
/*右*/
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
/*下*/
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*左*/
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;

按照方向设置可以设置

border-left: 10px solid red;

设置border样式为空

/*清除border*/
border: none;
/*设置一边的border没有样式*/
border-right: none;
border-top: 0;

1.4 margin(外边距)

margin: 外边距,指的是元素与元素之间的距离。

margin特性:  

  1. margin 的4个方向

  2. margin会改变实际大小,背景色不会渲染到margin区域 这个区域会以空白显示,但是也属于盒子的一部分

  3. margin是添自身的,如果哪个想要改变自己的位置,就给谁添加margin html的部分标签自带margin padding p body ul

margin垂直方向塌陷问题及解决:

两个兄弟盒子设置垂直方向的margin时,以较大的margin值为准,这种现象称为“塌陷”。

<head>
    <meta charset="UTF-8">
    <title>margin的塌陷</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }
    </style>
</head>

这里的margin-bottom: 20px没有起作用,只有下面的margin-top: 50px起作用了,上面的20只是嵌到了50中所以最终显示效果就是50px。

解决:浮动的盒子垂直方向不会塌陷,可以解决margin塌陷问题.

<head>
    <meta charset="UTF-8">
    <title>margin的塌陷</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;
            float: left;
        }
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="father">
        <!--
        浮动的盒子垂直方向不塌陷
        -->
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

3.前端CSS—盒子模型和浮动

水平方向上的margin是不会塌陷的。

盒子的水平居中

/*水平居中盒子*/
margin: 0 auto;

/*水平居中另一种表示*/
margin-left: auto;
margin-right: auto;

二、块级元素、行内元素和行内块级元素的转换关系

在css选择器内,可以通过display属性对块级元素、行内元素、行内块元素进行转换,从而调整显示效果。

  display的功能:1.控制HTML元素的显示和隐藏 2.块级元素与行内元素的转换

2.1 display:inline 转化为行内元素

通过display:inline将div这种块级元素转化为了行内元素,div内的内容在一行内显示。

<style type="text/css">
    .box1{
        display: inline;  /* 通过inline将块级元素转化为行内元素 */
        width: 200px;
        height: 40px;
        border: 1px solid red;
    }

<body>
    <div class="box1">内容</div>
    <div class="box1">内容</div>
</body>

2.2 display:block 转化为块级元素

<span>是行内元素,行内元素的特点就是元素的高度、宽度及边距不可设置,display:block转化为块级元素后,span内的内容分行显示,且高度、宽度设置生效。

<style type="text/css">
    span{
        background-color: yellow;
        width: 100px;   /* 给行内元素设置高度宽度是不起作用的 */
        height: 40px;
        display: block;  /* block将行内元素转化为块级元素 */
    }    

<body>
    <span>alex</span>
    <span>alex</span>
</body>

2.3 display:inline-block 转化为行内块级元素

把<div>这个块级元素转化为了行内块级元素。box1的元素都在一行上;元素的高度、宽度等都可设置。

<style type="text/css">
    .box1{
        display: inline-block;  /* 通过inline-block将块级元素转化为行内块级元素 */
        width: 200px;
        height: 40px;
        border: 1px solid red;
     }
</style>
<body>
    <div class="box1">内容</div>
    <div class="box1">内容</div>
    <div class="box2">内容</div>
</body>

2.4 display:none 隐藏当前的标签

display:none隐藏标签不占位置。在此需要注意和visibility:hidden进行区分。

img{   
    width: 300px;
    height: 300px;
    display:none;  /* 隐藏当前的标签 不占位置 */
}
img{   /* 行内块级元素,可以设置高度和宽度,也都在一行内展示 */
    width: 300px;
    height: 300px;
     /*display: none;  /* 隐藏当前的标签 不占位置 */ */
    visibility:hidden;  /* 隐藏当前的标签 占位置 */
}

三、浮动

3.1 浮动定义

将元素从普通的布局排版中拿走,其他盒子在定位时会当作该元素不存在进行定位,可以理解为不在一个平面上,

3.2 浮动的作用

使元素脱离文档流,按照指定的方向发生移动,遇到父级的边界或者相邻的浮动元素就会停下来。

文档流:元素在排列的时候有默认开始位置以及他们所占的区域。

浮动的目的:为了实现指定的布局,让指定元素定位在指定位置,并且可以设置浮动后的行级元素的宽高,最初的设计就是用来实现文字环绕。

浮动的副作用:会导致父级标签塌陷的问题,

四、清除浮动

4.1 给父盒子设置高度

4.2 内墙法

在浮动元素最后加一个空的块元素,且块元素不浮动,设置其属性为clear:both,以此来清除别人对我的浮动影响。

.clear{
            clear: both;
        }

4.3 伪元素清除法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
            width:100px;
            float: left;
        }
        .c2{
            background-color:aqua;
            height:100px;
            width: 100px;
            float: right;
            }
        .c3{
            background-color:pink;
            height:200px;
        }
        .cc{
            /* height: 100px; */
        }
        .clearfix:after{
          /*以下三句是必须要写的*/
            content:‘‘;
            display: block;
            clear: both;

        }
    </style>
</head>
<body>
    <div class="cc clearfix">
        <div class="c1"></div>
        <div class="c2"></div>
    </div>
    <div class="c3"></div>
</body>
</html>

4.4 overflow:hidden

box是父级元素的属性。

.box{
    width: 400px;
    overflow: hidden;
}

4.5 overflow溢出

overflow属性规定当内容溢出元素框时发生的事情。

  这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,用户代理会提供一种滚动机制。可能导致元素放得下也会用滚动条。

    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            overflow: auto;   /* 内容变多时出现滚动条 */
        }
    </style>
名称 描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

3.前端CSS—盒子模型和浮动

上一篇:在VB6中使用。net控件


下一篇:Flutter | Json自动反序列化——json_serializable(附源码)