CSS样式：行内元素盒子模型

原创于 2022-06-30 21:17:06 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

HTML-CSS-JavaScript 专栏收录该内容

27 篇文章

订阅专栏

本文深入探讨了CSS中的盒模型，包括内容区、内边距、边框和外边距的概念，并展示了如何设置边框样式和内边距。此外，还提到了外边距对元素位置的影响以及overflow属性的使用。通过实例展示了不同盒模型在行内元素和块元素上的应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /*
         像素百分比 
        fawwa  em 
            - em是相对于元素的字体大小来计算的
            - 1em = 1font-size
            - em会根据字体大小的改变而改变

        rem
            - rem相对于根元素的字体大小来计算 
            html{
                font-size:30px;
            } 

        行内元素    
            - 行内元素在页面中左向右水平排列
        
        - 块元素 
            - 块元素会在页面中独占一行
            - 默认宽度是父元素的全部(会把父元素撑满)
            - 默认高度是被内容撑开(子元素)


        盒模型、盒子模型、框模型(box model)
            - css将页面中的所有元素都设置为一个矩形的盒子
            - 将元素设置为矩形的盒子后,对页面的布局编程将不同的盒子摆放到不同的位置
            - 每一个盒子由一个几个部分组成：
                内容区（content）
                内边距（padding）
                边框（border）
                外边框（margin）   
                
                
        要设置边框,需要至少设置三个样式：
            - 边框的宽度 border-width border-width还有一组 border-xxx-width  xxx可以是tio right bottom left
            - 边框的颜色 border-color 也可以设置四个颜色的边框  border-xxx  xxx：top bottom right left
            - 边框的样式 border-style 指定边框样式  solid表示实线   dotted 点状虚线 dashed 虚线 double 双线 
            1px solid #B3100F;

            内边距(padding)
                 内容区(在没有设置内边距的时候是一个整矩形 设置了是四个边之后是小矩形)
                 padding-left:100px; -right -bottom -top
                 padding 内边距简写属性, 可以同时指定四个方向的内边距
                 规则和bordr-width一样   
                 padding:10px 20px 30px 40px;设置四个边
                 padding:10px 20px;设置两个边



            外边距(margin)
                - 外边距不会影响盒子可见框的大小
                - 但是外边距会影响盒子的位置(网页是一个大矩形)
                - 一共有四个方向的外边距：
                    margin-top
                    margin-right
                    margin-bottom
                    margin-left

                - 元素在页面中是按照自左向右的顺序排列的
                    所以默认情况下如果我们设置的左和上外边距则会移动元素自身
                    而设置下和右外边距会移动其他元素    
            
            overflow:可选值：
                scroll: 生成一个横一个竖滚动条来查看完整的内容 
                visible:默认值 子元素会从父元素中溢出,在父元素外部的位置显示
                hidden 溢出内容将会被裁剪不会显示 比如文字 其余字体 
                overflow-x 单独处理横滚动条
                overflow-y 单独处理竖滚动条
                auto ：根据需要判断是否加滚动条

            行内元素的盒模型
                - 行内元素不支持设置宽度盒高度
                - 行内元素可以设置padding, 但是垂直方向padding不会影响页面的布局
                - 行内元素可以设置border,重置方向不会影响页面的布局
                - 行内元素可以设置margin,垂直方向的margin不会影响布局
                    
         */
        
        .box1{
            width: 200px;
            height: 200px;
            background-color:aqua;
            border-width: 10px 20px 30px 40px; /*四个值：上 右 下 左  三个值：上 左右 下 两个值：上下 左右 一个值：上下左右*/
            border-color: rebeccapurple;
            border-style:1px solid #B3100F;
        }
        .box2{
            margin: auto;
        }
        /* 共同特征写在一起 提高效率*/
        .box3 .box4{
            width: 400px;
            height: 400px;
            font-size: 10em;
        }
        .box3{
           background-color: aqua; 
        }
        .box4{
            background-color: blanchedalmond;
        }
        
    </style>
</head>
<body>
    <div class="box1 box2">123456</div>
    <div class="box3">1</div>
    <div class="box4">2</div>
</body>
</html>