CSS——（4）布局

最新推荐文章于 2024-07-11 17:28:05 发布

nonono吧

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量109

点赞数

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

本文链接：https://blog.csdn.net/ileopard/article/details/108049269

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、水平方向的布局

<div class="box1">
        <div class="box_content"></div>
</div>

.box1{
    /* 
        内容区
    */
    width: 800px;
    height: 200px;
    background-color: tomato;


    border: 10px red solid;
}

.box_content{
    /* width 默认就是auto */
    width: 200px;
    height: 100%;
    background-color: skyblue;

    margin-left: auto;
    margin-right: auto;

    /* 
        元素的水平方向的布局
            元素在其父元素中水平方向的位置由以下几个属性共同决定的：
                margin-left
                border-left
                padding-left 
                width
                padding-right
                border-right 
                margin-right 
            
            一个元素在其父元素中，水平布局必须满足以下的等式：
              上述七个属性值的和 = 父元素的内容区的宽度（父元素的width）
                - 以上等式必须满足，入伏哦相加的结果使等式不成立，则称过度约束，等式会自动调整
                    - 调整的情况
                        - 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使得等式满足
                - 这七个值中有三个值可以设置为auto
                    width
                    margin-left 
                    margin-right
                    - 如果某个值为auto，则会自动调整为auto的那个值以使得等式成立
                        0 + 0 + 0 + auto + 0 + 0 + 0 = 800  auto = 800
                        0 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 600
                        200 + 0 + 0 + auto + 0 + 0 + 200 = 800  auto = 400

                    - 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大
                            设置为auto的外边距会自动为0
                    - 如果将三个值都设置为auto，则外边距都是0，宽度最大。
                    - 如果两个外边距都设置我auto，宽度固定值，则回江外边距设置为相同的值
                        所以我们经常利用这个特点来使得一个元素在其父元素中水平居中
                        示例：
                            width: xxxpx;
                            margin: 0 auto;
    */
}

二、垂直布局

就是正常使用
默认情况下，父元素的高度会被内容撑开
要注意内部子元素的外边距和边框大小
下面是可能会遇到的溢出问题

<div class="box1">
         <div class="box2"></div>
</div>

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

.box2{
    width: 100px;
    height: 300px;
    background-color: yellowgreen;
}

在这里插入图片描述
可以看到子元素已经从父元素中溢出了

下面是使用overflow解决以后的代码：

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

    /* 
        子元素是在父元素的内容区中排列的
            如果子元素的大小超过了父元素，则子元素会从父元素中溢出
            使用 overflow 属性来设置父元素如何处理溢出的子元素

            可选值：
                visible： 默认值 子元素会从父元素中溢出，在父元素外部的位置显示
                hidden：溢出的内容将会被裁剪，不会显示
                scroll：生成两个滚动条，通过滚动条来查看完整的内容
                auto：根据需要生成滚动条（可能底部的滚动条不会被使用，想要删除，可以使用auto）
        
        overflow-x：单独处理水平方向的
        overflow-y：单独处理垂直方向的
     */
    overflow: hidden;
}

.box2{
    width: 100px;
    height: 300px;
    background-color: yellowgreen;
}

在这里插入图片描述

外边距的折叠

兄弟元素之间
父子元素之间

下面是兄弟元素之间

<div class="box1"></div>
<div class="box2"></div>

.box1,.box2{
    width: 200px;
    height: 200px;
}

/* 
    垂直外边距的重叠（折叠）
        - 相邻的垂直方向外边距会发生重叠
        - 兄弟元素
            - 兄弟元素间的相邻垂直外边距会取两者之间的最大值
            - 特殊情况：
                如果相邻的外边距一正一负，则取两者的和
                如果相邻的外边距都是负值，则取两者之间绝对值最大的

            - 兄弟之间的外边距的重叠，对开发时有利的，所以我们不需要进行处理
        - 父子元素
*/

.box1{
    background-color: tomato;
    /* 设置一个下外边距 */
    margin-bottom: 100px;
         
    
}

.box2{
    background-color: yellowgreen;
    /* 设置一个上外边距 */
    margin-top: 100px;
}

父子元素之间

     <div class="box1">
         <div class="box2"></div>
     </div>

/* 
    垂直外边距的重叠（折叠）
        - 相邻的垂直方向外边距会发生重叠
        - 兄弟元素
            - 兄弟元素间的相邻垂直外边距会取两者之间的最大值
            - 特殊情况：
                如果相邻的外边距一正一负，则取两者的和
                如果相邻的外边距都是负值，则取两者之间绝对值最大的

            - 兄弟之间的外边距的重叠，对开发时有利的，所以我们不需要进行处理
        - 父子元素
            - 父子元素间的相邻外边距，子元素的会传递给父元素（上外边距）
            - 父子外边距的折叠会影响到页面的布局，必须要进行处理
*/

.box1{
    width: 200px;
    height: 100px;
    background-color: tomato;
    padding-top: 100px;
}

.box2{
    width: 100px;
    height: 100px;
    background-color: yellowgreen;
}

三、行内元素的盒模型

<body>
    <a href="https://www.baidu.com" class="a">百度</a>
     <span class="s1">我是span</span>
     <span class="s1">我是span</span>

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

.s1{
    background-color: yellow;
    /* font-size: 50px; */
    /* 
        行内元素的盒模型
            - 行内元素不支持设置宽度和高度
            - 行内元素可以设置padding，但是垂直方向padding不会影响到页面的布局
            - 行内元素可以设置border，垂直方向的border不会影响页面布局
            - 行内元素可以设置margin，垂直方向的margin不会影响页面布局
    */
    /* padding: 10px;
    border: 10px red solid;
    margin: 10px; */
}

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

.a{
    /* 
        无法使行内元素
        display 用来设置元素显示的类型
            可选值：
                inline 将元素设置为行内元素
                block 将元素设置为块元素
                inline-block 将元素设置为行内块元素（尽量避免使用）
                    行内块，既可以设置宽度和高度，又不会独占一行
                table 将标签设置为一个表格
                none 元素不在页面中显示
        
        visibility 用来设置元素的显示状态
            可选值：
                visible 默认值。元素在页面中正常显示
                hidden 元素在页面中隐藏，不显示，但是依然占据页面的位置
    */
    display: inline-block;
    width: 100px;
    height: 100px;

    background-color: slateblue;
}

四、浏览器的默认样式

默认样式
- 通常情况下，浏览器都会为元素设置一些默认样式
- 默认样式的存在会影响到页面的布局
- 通常情况下编写网页时，必须要去除浏览器的默认样式（PC端的页面）
比如：p标签的样式是段前段后都会空一行。。。
所以可以导入重置样式表来将所有的标签样式都重置

重置样式表：专门用来对浏览器的样式进行重置的
reset.css 直接去除了浏览器的默认样式
normalize.css 对默认样式进行了统一

nonono吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——（4）布局

一、水平方向的布局<div class="box1"> <div class="box_content"></div></div>.box1{ /* 内容区 */ width: 800px; height: 200px; background-color: tomato; border: 10px red solid;}.box_content{ /*
复制链接

扫一扫