前端box（盒子嵌套）

作者: 埃菲尔上的铁塔梦i | 来源:发表于2018-08-09 22:37 被阅读0次

1、盒子模型

一个盒子我们会分成几个部分：
内容区(content)
内边距(padding)
边框(border)
外边距(margin)

图片1.png

内容区

通过width和height两个属性可以设置内容区的大小。
width和height属性只适用于块元素。

内边距

默认情况下width和height不包含padding的大小。
使用padding属性来设置元素的内边距。
例如：
padding:10px 20px 30px 40px
这样会设置元素的上、右、下、左四个方向的内边距

内边距

同时在css中还提供了padding-top、padding-right、padding-
right、padding-bottom分别用来指定四个方向的内边距

边框

border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框的样式

边框可以设置多种样式：
none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）
groove（槽线）
ridge（脊线）
inset（凹边）
outset（凸边）

外边距

使用margin属性可以设置外边距。
用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。
当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等，所以这行代码margin:0 auto可以使元素居中。

display

我们不能为行内元素设置width、height、 margin-top和margin-bottom。
我们可以通过修改display来修改元素的性质。
可选值：
block：设置元素为块元素
inline：设置元素为行内元素
inline-block：设置元素为行内块元素
none：隐藏元素（元素将在页面中完全消失）

visibility

visible：可见的
hidden：隐藏的

overflow

visible：默认值
scroll：添加滚动条
auto：根据需要添加滚动条
hidden：隐藏超出盒子的内容

文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档流</title>
</head>
<body>
    <!-- 
    文档流
        文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中
         
    元素在文档流中的特点
        块元素
            1.块元素在文档流中会独占一行，块元素会自上向下排列
            2.块元素在文档流中默认宽度是父元素的100%
            3.块元素在文档流中的高度默认被内容撑开
        内联元素
            1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右。
            2.在文档流中，内联元素的宽度和高度默认都被内容撑开
    -->
    
    <!-- 
    当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距
    -->
    <div style="background-color: #bfa;">
        <div style="height: 50px;"></div>
    </div>
    <div style="width: 100px; height: 100px; background-color: #ff0;"></div>
    
    
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
    <span style="background-color: yellowgreen;">我是一个span</span>
</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .box1{
            width: 600px;
            height: 200px;
            background-color: red;
            /*
            块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开
            如果希望块元素在页面中水平排列，可以使块元素脱离文档流
            使用float来使元素浮动，从而脱离文档流
            可选值：
                none，默认值，元素默认在文档流中排列
                left，元素会立即脱离文档流，向页面的左侧浮动
                right，元素会立即脱离文档流，向页面的右侧浮动
            当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
            元素浮动以后，会尽量向页面的左上或这是右上漂浮，直到遇到父元素的边框或者其他的浮动元素
            如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
            */
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

定位

position属性可以控制Web浏览器如何以及在何处显示特定的元素。
可以使用position属性把一个元素放置到网页中的任何位置。
可选值：
static
relative
absolute
fixed

相对定位

当将position属性设置为relative时，则开启了元素的相对定位。
当开启了相对定位以后，可以使用top、right、 bottom、left四个属性对元素进行定位。

内联元素的浮动

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>浮动</title>
   <style type="text/css">
       .box1{
           /*在文档流中，子元素的宽度默认占父元素的全部*/
           /*height: 100px;*/
           background-color: #bfa;
           /*
           当元素设置浮动以后，会完全脱离文档流.
           块元素脱离文档流以后，高度和宽度都被内容撑开
           */
           /*float: left;*/
       }
       .s1{
           /*
           开启span的浮动
           内联元素脱离文档流以后会变成块元素
            */
           float: left;
           width: 100px;
           height: 100px;
           background-color: yellow;
       }
   </style>
</head>
<body>
   <div class="box1">a</div>
   <span class="s1">hello</span>
</body>
</html>

网页的简单布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>本来生活</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .head{      /*头部*/
            width: 1519.2px;
            height: 31px;
            background-color: #fcfcfc;
            border-bottom: 1px solid #e5e5e5;
            margin: auto;
        }
        .register{  /*登录*/
            width: 195px;
            height: 29.6px;
            background-color: yellow;
            margin-left: 160px;
        }
        .slideshow1{    /*轮播图*/
            width: 1519.2px;
            height: 60px;
            background-color: yellowgreen;
            margin: auto;
        }
        .seek{    /*搜索*/
            width: 1200px;
            height: 102px;
            background-color: #3e4141;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 20px;
            padding: 10px 0 20px;

        }
        .catalogue{   /*目录*/
            width: 1519.2px;
            height: 44px;
            background-color: #8ab700;
            margin: auto;

        }
        .box1{
            width: 210px;
            height: 44px;
            background-color: green;
            margin-left: 160px;

            float: left;

        }
        /*.box2{
            width: 86px;
            height: 40x;
            background-color: green;
            display: block;
            margin:left:20px;


        }*/
        .box2{
            width: 86px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }
        .box3{
            width: 122px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }
        .box4{
            width: 122px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }
        .box5{
            width: 104px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;

        }
        .box6{
            width: 104px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }

        
        .box7{
            width: 104px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }

        
        .box8{
            width: 86px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }

        
        .box9{
            width: 122px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }

        
        .box10{
            width: 122px;
            height: 40px;
            background-color: green;
            float: left;
            margin:2px /*10px*/;
        }



        .content{   /*内容*/
            width: 1519.2px;
            height: 400px;
            background-color: gray;
            margin:auto;
        }
        .classify{
            width: 206px;   
            height: 396px;  
            background-color: yellow;
            margin-left: 160px;
            float: left;
            border:2px green solid; 
            
        }
        /*.a{
            width: 206px;
            height: 33px;
            background-color: blue;
            float: left;
            

        }*/
    </style>
</head>
<body>
    <div class="head">
        <div class="register"></div>
    </div>
    <div class="slideshow1"></div>
    <div class="seek"></div>
    <div class="catalogue">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
        <div class="box9"></div>
        <div class="box10"></div>
    </div>
    <div class="content">
        <div class="classify"></div>
            <div class="b"></div>
            <div class="c"></div>
            <div class="a"></div>
            <div class="d"></div>
            <div class="e"></div>
            <div class="f"></div>
            <div class="g"></div>
            <div class="h"></div>
            <div class="r"></div>
            <div class="j"></div>
            <div class="k"></div>
            <div class="l"></div>
    </div>

</body>
</html>

image.png

前端box（盒子嵌套）

1、盒子模型

网页的简单布局

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读