学习笔记-css的布局：盒模型，垂直方向的布局

最新推荐文章于 2023-07-15 11:31:04 发布

takashi_void

最新推荐文章于 2023-07-15 11:31:04 发布

阅读量246

点赞数

文章标签： css3 html5

本文链接：https://blog.csdn.net/HZBCc/article/details/123945173

版权

html部分

<!DOCTYPE html>
<html lang="ch">
    <head>
        <title>css布局</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="bing2.css">
    </head>
    <body>
        <div class="div1">div1</div>
        <div class="div2">div2</div>
        <div class="div3">
            <span>span</span>
            <span>span</span>
            <span>span</span>
            <span>span</span>
            <span>span</span>
            <span>span</span>
            <span>span</span>
            <span>span</span>
        </div>

        <br><div class="box1"></div>
        <br><div class="box2"></div>
        <br><div class="box3"></div>
        <br><div class="box4">
            <div></div>
        </div>
        <br><div class="box5"></div>

        <br>
        <div class="fu">
            <div class="zi"></div>
        </div>
        <br>

        <div class="fu1">
            <div class="zi1"></div>
        </div>
        <br>

        <div class="fu2">
            <div class="zi2"></div>
        </div>

        <br>
        <div class="fu3">
            <div class="zi3"></div>
            <div class="zi3"></div>
        </div>

        <br>
        <div class="fu4">
            <div class="zi4"></div>
        </div>
        <br>

        <div>
            <div class="xd1"></div>
            <div class="xd2"></div>
        </div>

        <br>
        <div class="f1">
            <div class="z1"></div>
        </div>

        <br>
        <div class="f2">
            <div class="z2"></div>
        </div>

        <br>
        <div class="f3">
            <div class="z3"></div>
        </div>

        <span class="boxh">boxh</span>
        <span class="boxh1">boxh1</span>

        <div class="box5"></div>
        <div class="box6"></div>

        <div class="box7"></div>
        <div class="box8"></div>
        <br>
        <div class="box9"></div>
        <br>
        <div class="box10"></div>


    </body>
</html>

css部分

/* 
    文档流（normal flow）
        网页是一个多层的结构，一层撂着一层
        通过css可以分别为每一层设置样式
        作为用户来讲只能看到最顶上的一层
        这些层中，最底下的一层称为文档流，文档流是网页的基础
         我们所创造的元素默认都是在文档流中进行排列
         对于我们来说元素主要有两个状态
                在文档流中
                不在文档流中（脱离文档流）
        
        元素在文档流中有什么特点：
            块元素：
                块元素会独占一行（自上向下垂直排列）
                默认宽度是父元素的全部（会把父元素撑满）
                默认高度是被内容撑开（子元素）
            行内元素：
                行内元素不会独占页面的一行，只占自身的大小
                行内元素在页面中自左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行
                行内元素的默认宽度和高度都是被内容撑开
*/
.div1{
    background-color: blue;
}

.div2{
    background-color: aqua;
}

.div3 span{
    background-color: brown;
}

/* 
    盒模型 盒子模型 框模型（mox model）：
        css将页面中所有元素都设置成了一个矩形的盒子
        将元素设置为一个矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
        每一个盒子都有以下几个部分组成
            内容区：content
            内边距：padding
            边框：  border
            外边距： margin

        内容区（contenr）：
            元素中的所有子元素和文本内容都在内容区中排列
            内容区的大小由width和height两个属性来设置
            width：设置内容的宽度
            heighr：设置内容的高度

        边框：border
            边框属于盒子边缘
            边框的大小会影响到盒子整体的大小
            要设置边框，至少需要设置三个样式
                边框的宽度：border-width
                边框的颜色：border-color
                边框的样式：border-style

                    border-width有默认值，不写也会显示
                    border—color也有默认值，默认是color
                    border-style默认值是none，也就是没有

                border—width（color，style）：
                    四个值：上 右 下 左
                    三个值：上 左右 下
                    两个值：上下 左右
                    一个值：上下左右

                border—width（color，style）-xxx：
                    xxx：
                        top：设置上面
                        right：设置右边
                        lift：设置左边
                        bottom：设置下面

            border的简写属性：通过该属性可以同时设置边框的所有样式，而且没有顺序要求
                border：color style widtf（顺序没有要求）


*/

.box1{
    width: 200px;
    height: 200px;
    background-color: brown;

    border-width: 20px;
    border-color: cadetblue;
    border-style: solid;
}

.box2{
    width: 200px;
    height: 200px;
    background-color: brown;

    border-width:  20px 10px 30px 40px;
    border-color: cadetblue olive rebeccapurple salmon;
    border-style: solid dashed outset inset;
}

.box3{
    width: 200px;
    height: 200px;
    background-color: brown;

    border: 20px orangered solid;
    border-right-style:none ;
}

/* 
    内边距（padding）：内容区和边框之间的距离
        一共有四个方向的内边距
            padding-top
            padding-right
            padding-lift
            padding-bottom

        padding的简写属性可以同时设置四个方向的内边距，规则和border那几个的设置一样

        内边距的设置会影响到盒子的大小
        背景颜色会延伸到内边距上

        一个盒子的可见框大小，由内容区、边框、内边距共同决定
        所以在计算盒子大小的时候，需要把这三个加起来计算
*/
.box4{
    width: 100px;
    height: 100px;
    background-color: blue;
    border: 10px red solid;
    padding: 30px 50px;
}
.box4 div{
    width: 100%;
    height: 100%;
    background-color: aqua;
}

/* 
    外边距（margin）：
        外边距不会影响到盒子可见框的大小
        但是外边距会影响盒子的位置
        一共有四个方向的外边距：
            margin-top
                设置一个正值，元素会向下移动
            margin-bottom
                设置一个正值，其下面的元素会向下移动
            margin-right
                设置一个正值，其右边的元素会向右移动
            margin-lift
                设置一个正值，元素会向右移动
            
            margin也可以设置负值，如果是负值往相反的方向移动

            元素在页面中是自左向右排列的：
                所以默认情况下我们设置左和上是移动自己
                设置右和下是移动别的
            
            margin也有简写属性，和padding一样

            margin会影响盒子的实际大小
*/

.box5{
    width: 200px;
    height: 200px;
    background-color: chocolate;
    padding: 100px;
    border:20px blue solid;
    margin: 100px 50px 30px;
}

/* 
    元素水平方向的布局
        元素在其父元素中水平方向的位置由以下几个属性共同决定
            margin-lift
            border-lift
            padding-lift
            width
            margin-right
            border-right
            padding-right

            七个值中有三个可以是auto
                margin-lift
                width
                margin-right

            一个元素在其父元素中，这七个之和一定要等于其父元素内容区的宽度（必须满足）
            如果相加结果等式不成立，则称为过渡约束，则会自动调整
                调整情况：
                    如果没有auto，则调整margin-right

                    如果某个值为auto
                    则会调整auto
                    
                    如果将宽度和一个外边距设置为auto，则宽度会是最大，设置为auto的那个外边距会自动为0

                    如果两个外边距设置为auto，width固定，则两个外边距设置为相同的值
                        经常使用这个来使元素在父元素中水平居中

                    如果将三个都设置为auto，宽度最大，相当于没有设置

                    width的默认值是auto

*/

.fu{
    width: 800px;
    height: 200px;
    border: 20px red solid;
}

.zi{
    width: 200px;
    height: 200px;
    background-color: chartreuse;
    margin-left: 50px;
}

.fu1{
    width: 800px;
    height: 200px;
    border: 20px red solid;
}

.zi1{
    width: auto ;
    height: 200px;
    background-color: chartreuse;
    margin-right: auto;
    margin-left: 100px;
}

.fu2{
    width: 800px;
    height: 200px;
    border: 20px red solid;
}

.zi2{
    width: 200px ;
    height: 200px;
    background-color: chartreuse;
    margin-right: auto;
    margin-left: auto;
}

/* 
    元素垂直方向的布局：
        默认情况下父元素的高度会被内容撑开

        子元素是在父元素的内容区中排列的
        如果子元素的大小超过了父元素，则子元素会从父元素中溢出
        
        使用overflow来设置元素的溢出
            visible：默认值，子元素会溢出
            hidden：把溢出的部分裁剪掉
            scroll：生成垂直和水平两个方向的滚动条
            auto：根据需要生成滚动条

        overflow-x：单独处理水平
        overflow-y：单独处理垂直
*/

.fu3{
    background-color: aqua;
}

.zi3{
    width: 100px;
    height: 100px;
    margin-bottom: 100px;
    background-color: brown;
}

.fu4{
    height: 400px;
    background-color: aqua;
    overflow: hidden;
}

.zi4{
    width: 100px;
    height: 500px;
    background-color: brown;
}

/* 
    垂直外边距的折叠（重叠）：
        相邻的垂直方向外边距会发生重叠现象

        兄弟元素：
            两个都是正值，兄弟元素间相邻的垂直外边距会取较大的那个
            两个一正一负，兄弟元素间相邻的垂直外边距会取两个之和
            两个都是正值，兄弟元素间相邻的垂直外边距会取绝对值较大的那个

            兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理

        父子元素：
            父子元素间相邻的外边距，子元素会传递给父元素（上外边距）
            父子的外边距折叠会影响到页面布局，必须进行处理

            解决方法：1.不改变子元素上外边距，而改变父元素的内边距和高度
                    2.改变子元素外边距，又给父元素加一个边框，可以分离它两的外边距
*/

.xd1,.xd2{
    width: 200px;
    height: 200px;
}

.xd1{
    background-color: darkgreen;
    margin-bottom:100px ;
}

.xd2{
    background-color: chartreuse;
    margin-top: 200px;
}

.f1{
    width: 200px;
    height: 200px;
    background-color: aquamarine;
}

.z1{
    width: 100px;
    height: 100px;
    background-color: blue;  
}

.f2{
    width: 200px;
    height: 100px;
    background-color: aquamarine;
    padding-top: 100px;
}

.z2{
    width: 100px;
    height: 100px;
    background-color: blue;  
}

.f3{
    width: 200px;
    height: 199px;
    background-color: aquamarine;
    border-top: 1px aquamarine solid;
    
}

.z3{
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 100px; 
}

/* 
    行内元素的盒模型：
        行内元素不能设置高度和宽度
        行内元素可以设置padding，但是垂直方向padding不会影响页面布局
        行内元素可以设置border，垂直方向bordr不会影响布局
        行内元素可以设置margin，垂直方向margin不会影响布局

        display：用来设置元素显示的类型
            可选值：
                inline：将元素设置为行内元素
                block：将元素设置为块元素
                inline-block：将元素设置为行内块元素
                    行内块：既可以设置宽度和高度，又不会独占一行
                table：将元素设置为表格
                none：元素不在页面中显示（隐藏完不占位置）

        visibility：用来设置元素的显示状态
            可选值：
                visible：默认值，元素在页面中正常显示
                hidden：隐藏，元素在页面中不显示，但是依然占据位置
*/

.boxh{
    background-color: red;
    padding: 20px;
    border: 10px rebeccapurple solid;
    margin: 50px;
    display: inline;
    visibility: visible;
}

.boxh1{
    background-color: aquamarine;
    width: 100px;
    height: 100px;
    padding: 20px;
    border: 10px rebeccapurple solid;
    margin: 50px;
    display:block;
}

/* 
    盒子的大小：
        默认情况下盒子的可见框大小由内容区，内边距和边框共同决定
        box—sizing：用来设置盒子尺寸的计算方式
            属性：
                content-box：默认值，宽度和高度设置内容区的大小
                border-box：宽度和高度用来设置整个盒子可见框的大小（width和height指内容区、内边距和边框的大小之和）
*/

.box5{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    padding: 10px;
    border: 10px red solid;
    box-sizing: content-box;
}

.box6{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    padding: 10px;
    border: 10px red solid;
    box-sizing: border-box;
}

/* 
    轮廓和圆角：
        outline：用来设置元素的轮廓线，用法和border一摸一样
            轮廓和边框不同的点，就是轮廓不会影响可见框的大小
        
        box-shadow：用来设置元素的阴影效果，不会影响页面布局
            第一个值：水平量偏移，设置阴影的水平位置，正值向右，负值向左
            第二个值：垂直偏移量，设置阴影的垂直位置，正值向下，负值向左
            第三个值：阴影的模糊半径
            第四个值：阴影的颜色   
            
        border-radius:设置圆角半径大小
            四个值：左上 右上 右下 左下
            三个值：左上 右上和左下 右下
            两个值：左上和右下 右上和左下
            一个值：四个角
            设置成50%：变成圆形
*/

.box7{
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        padding: 10px;
        outline: 10px red solid;
        box-sizing: content-box;
}

.box8{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
    box-shadow: 10px 10px 20px rgb(54, 54, 54);
}

.box9{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
    border-radius: 30px;
}

.box10{
    width: 100px;
    height: 100px;
    background-color: cadetblue;
    border-radius: 50%;
}