coderwhy--前端知识整合包--htmlcss05

最新推荐文章于 2024-08-25 09:42:40 发布

Princesk

最新推荐文章于 2024-08-25 09:42:40 发布

阅读量509

点赞数

分类专栏： html5/css基础学习

本文链接：https://blog.csdn.net/Princesk/article/details/108771843

版权

html5/css基础学习专栏收录该内容

7 篇文章 5 订阅

订阅专栏

本文详细介绍了CSS中的display属性，包括block、inline、inline-block、none等常见取值，以及它们在布局中的应用。同时，文章深入探讨了CSS盒子模型，包括content、padding、border、margin的属性及特点，如内外边距的处理和折叠现象。此外，还提到了背景图片的设置、背景颜色、背景定位等相关知识。

摘要由CSDN通过智能技术生成

coderwhy–前端知识整合包–html/css05

一、css属性-display

块级元素由来：display:block(所有浏览器默认添加，块级元素本就是行内级元素是因为浏览器默认添加上面那个)

1、常见取值

block：将元素设置为块级元素

inline：将元素设置为行内级元素

none：隐藏元素

inline-block：可以设置宽高的行内级元素，可以再同一行显示，具有块级元素和行内级元素特点

<head>
<style>
    <!--这是一个选中变色效果-->
        ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: inline-block;
            width: 200px;
            height: 50px;
            color: #000;
        }
        a{
            text-decoration: none;
            color: #000;
            display: block;
        }

        .main{
            /* text-align: center; */
            border: 1px solid #000;
            height: 200px;
            width: 200px;
        }
        .one{
            background-color: cadetblue;
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
        }
        ul li{
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
        }
        ul li:hover{
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <!-- <div>
        <select title="邮箱">
            <option value="0">腾讯</option>
            <option value="1">baidu</option>
            <option value="2">wangyi</option>
        </select>
    </div> -->
    <div class="main"> 
        <div class="one">mail</div>
        <div class="two">
            <ul>
                <li id="0"><a href="#">qq</a></li>
                <li id="1"><a href="#">qq</a></li>
                <li id="2"><a href="#">qq</a></li>
            </ul>
        </div>
    </div>
</body>

img、input、ifrae->替换元素->没有说是inline-block（可以在同一行显示，可以设置宽高）


<head>
<style>
        ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            /* text-decoration: none; */
           
        }
        a{
            text-decoration: none;
            display:inline-block;
            width: auto;
            height: auto;
        }
        ul li{
            display:inline-block;
            border: 1px solid black;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 34px;

        }
        .sl, .fl{
            width: auto;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="page">
        <ul>
            <li class="sl"><a href="#">&lt;上一页</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">9</a></li>
            <li><a href="#">10</a></li>
            <li class="fl"><a href="#">下一页</a></li>
        </ul>
    </div>
</body>

二、盒子模型

1、主要内容简介：

conten内容（盒子显示的东西）、

padding内边距（内容到边框的距离）、

border边框（一个区分不同盒子的边框）、

margin外边距（一个盒子边框到另外一个盒子边框的距离）

2、盒子的content和相关属性

width、height

min-width：当浏览器显示宽度没有达到min-width标准时够时会出现滚动条，能显出来儿不是将整个内容缩放

max-width：最大显示内容不能超过300px，如果超过300px的会被换行

同理height

3、盒子的padding和相关属性

增加内边距盒子也会变大（会被计算到整个盒子大小）

缩写属性padding如果只需要设置三个值，比如上右下，那左侧就会被设置跟右侧一样的值就，若是上右左，下会被设置为跟上一样的值，谁没有谁就会被设置成与他相对的那个值

div{                   div{
padding: 20px 30px;  =     padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:30px
}                        }

4、盒子的margin和相关属性及其特点

简介

注意body有设置margin，

margin-top、right、bottom、left设置语法跟padding一样

上下margin传递-父子关系（左右不会被传递，是子传父）

上传递：如果块级元素的顶部栈和父元素顶部栈重叠，那这个块级元素margin-top会传递给父元素（说白了子元素与父元素顶部紧挨着，子元素若是设置margin-top：20px，不会显示，反而父元素会继承这个margin-top：20px，最后父元素会与其顶部元素分开20px）

下传递：如果块级元素的底部线和父元素底部线重叠，并且父元素高度为auto，那个子元素的margin-bottom会被传递

.one{
background-color:black;
width:100px;
height:100px;
}
.two{
background-color:black;
width:100px;
height:100px;
margin-top:20px;
margin-left:20px
}
.one1{
background-color:red;
width:200px;
height:200px;
}

<div class="one">
</div>
<div class="one1">
  <div class="two">
  </div>
</div>

解决方式：

父元素的padding的上下进行设置让顶部栈和底部线无法跟子元素重叠（不建议）
给父元素设置border
干脆不设置内部元素的margin，直接设置父元素padding（如果有父元素）

触发BFC

设置成浮动显示，触发
设置一个元素overflow不是visiable

.one{
background-color:black;
width:100px;
height:100px;
}
.two{
background-color:black;
width:100px;
height:100px;
margin-top:20px;
margin-left:20px
}
.one1{
background-color:red;
width:200px;
height:200px;

overflow:scorll
}

<div class="one">
</div>
<div class="one1">
  <div class="two">
  </div>
</div>

折叠特性-兄弟特性（外边距塌陷）

垂直方向相邻的两个margin（top和bottom）可能会合并成一个margin这叫折叠（左右永远不会出现折叠）

举例：top：20px bottom：20px，最终20px；top：30px，bottom：20px，最终30px；top：20px，bottom：30px，最终30px；结论，最后显示结果是去两者之间最大值。

解决方式：以后只设置一个要么top要么bottom

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bEgoCMU4-1600922604306)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200716201148007.png)]

折叠实用性：段落之间保持唯一

5、盒子的border和相关属性及其特点

边框宽度：

border-top-width、border-right-width、border-bottom-width、border-left-width

缩写属性:border-width

边框颜色：

border-top-color、border-right-color、border-bottom-color、border-left-color

缩写属性:border-color

边距样式和取值：

border-top-style、border-right-style、border-bottom-style、border-left-style、

缩写属性:border-style

取值：none、dotted（细虚线） dashed（粗虚线） soild（单实现） double（双实线） groove（外部border凹陷） redge（外部border突出） inset(凹陷) outset（突出）

边框形状：

    <style>
        .one{
            display: inline-block;
            border-top: 50px solid black;
            border-right: 50px solid olive;
            border-bottom: 50px solid rebeccapurple;
            border-left: 50px solid green;
        }
    </style>
</head>
<body>
    <div class="one">

    </div>
</body>

        .two{
            height: 0;
            width: 0;

            border-width: 50px;
            border-style: solid;


            border-top-color:springgreen;
            border-bottom-color:transparent;
            border-right-color:springgreen;
            border-left-color: transparent;


            transform: rotate(-45deg);
        }
    <div class="two">

    </div>
<!--旋转的三角形-->

boder的圆角效果

所谓的圆角实为椭圆，所以设置时是这样的border-top-left-radius: 20px 30px;两个值(相对应水平半径、垂直半径)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fSfVzApf-1600922604308)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200716210934273.png)]

border-radius:50px=border-top-left-radius:50px 50px;border-top-right-radius:50px 50px;border-bottom-left-radius:50px 50px;border-bottom-right-radius:50px 50px;

顺序为顺时针：上左、上右、下右、下左

    .three{
            width: 200px;
            height: 100px;
            background-color: tomato;
            border-radius: 50px;
        }
<div class="three">
</div>

<!--设置一个圆-->
    .three{
            width: 100px;
            height: 100px;
            background-color: tomato;
            border-radius: 50px;
            <!--border-radius:50%    这个属性大于或等于50%救是一个圆前提div宽高相等-->
        }
<div class="three">
</div>

6、outline属性

不占用空间，默认显示在border外边（可以用来加到别人网站上获取布局明显，用以模仿学习）

我感觉可以理解为下面第五大部分行内非替换元素注意点的padding-top、padding-bottom

相关属性有：outline-width、outline-style（跟border取值一致）、outline-color

缩写属性outline：使用方式跟其他缩写属性保持一致

7、box-shadow属性

给一个盒子设置阴影

        .box{
margin: 0 auto
<!--居中-->
            width: 100px;
            height: 100px;
            background-color: red;
            box-shadow: -5px -5px 2px 5px gold inset;
<!--左右 上下 模糊半径 衍生半径（向四周伸缩五像素） 阴影颜色 向内部扩散阴影（可以不写）；便宜数字为正数分别代表右和下，负数为左和上-->
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>

<!--为一个块级元素只有上面不要阴影-->
<!--方法一-->
.box{
            width: 100px;
            height: 100px;
            border: 1px soild organge;
            box-shadow:-10px 10px 5px,
                       10px 10px 10px;
                       <!--阴影可以多次设置，加逗号就行，但这样下面的阴影会加深-->
}
<!--方法二-->
.box{
            width: 100px;
            height: 100px;
            border: 1px soild organge;
            box-shadow:0 5 5 rgb（0,0,0，.1）,
}

    <style>
        .box{
            width: 100px;
            height: 200px;
            border: 0.5px solid aquamarine;
            box-shadow: -1px 1px 1px,
                        1px 1px 1px;
             margin: 0 auto;
        }
        .box-first{
            background-color: aquamarine;
            width: 100px;
            height: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-first">

        </div>
        <div class="box-second">

        </div>
    </div>
</body>

8、text-shadow属性（文字阴影）

用法跟上面的box-shadow一样，不演示了

9、box-sizing属性

为什么不用width和height？

box-sizing有很多值，这里只举例border-box和content-box；

box-sizing的默认值是content-box（内容盒子），

.box{
width:200px;
height:200px;

padding-bottom:20px;
border-bottom:20px soild red;

<!--在css里没有设置这个box-sizing时，默认设置的宽高是盒子的content(内容)宽高，所以当我们加入他的padding或者border时是会额外占据其他空间，比如上面，这个盒子宽高将变成240-->
box-sizing:content-box
<!--而当我们设置box-sizing为border-box时，此时css里的宽高将变成content+padding+border，为盒子的真实宽高，无论border和padding设置为多少，这个盒子永远是200px的宽高-->
box-sizing:border-box
}

三、背景

1、背景图片

不作为内容撑起块元素（块元素没有宽高就不显示，若是图片铺不满夸元素就多次显示铺满背景）

针对平铺：background-repeat：repeat-x（这里是指水平平铺）

norepeat(不平铺)、repeat-x（水平）、repeat-y（竖直）

.box{
background-image:url('../jk.jpg'),url('../kkk.jpg')
/*图片无上限，按照顺序平铺显示，若第n张比前面都要高或者宽，那就会替代前面平铺*/
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKfYzZas-1600922604310)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200718210443981.png)]

2、background-size属性

cover：对背景图片拉伸铺满背景

contain：对某一个方向拉伸，到达指定宽或者高就不再拉伸（保持图片的宽高比）

百分比：一般两个（background-size：30% 50%）宽度整个块的30%，高度真个块高的50%

直接设置值：300px 300px

3、background-position

设置图片在水平竖直方向上的位置（相对于这个块元素的坐标系）

具体像素：background-position：300px 300px;

固定关键字：top left right bottom center

如果position只设置一个位置，那另外一个默认center

4、背景图片永远居中展示（无论浏览器和屏幕解析度）

方案一

body{
margin:0;
padding:0;
}
.box{
background-image: url();
background-position: center 任意；
/*水平居中上下就任意了*/
}

方案二(通过相对位置去实现)

    <style>
        .one img{
            /* 图片先向左移动宽度一半，然后包含图片的区块在向右移动块宽度的一半 ，这样就能实现无论浏览器如何显示都能实现图片居中显示*/
            position: relative;

            left: -960px;
            /* 图片向左移动默认宽度一半 */

            
            /* transform: translate(-50%);这个是相对一img本身左移50%，等于left-960px */

            /*  向右移动父元素的一半*/
            margin-left: 50%;
        }
    </style>
</head>
<body>
    <div class="one">
        <img src="../image/duokuai.png" alt="5555">
    </div>
</body>

5、background-attachment

三个取值：

scroll：背景图片随缘素一起滚动（默认
loacl：背景图片跟随元素以及元素内容一起滚动
fixed:背景图片相对于浏览器窗口固定

.bxo{
 width:200px;
 height:200px;
 background-image:url();
 
 background-attachment:local;
 overflow:auto
}

<div class="bxo">
救援队还带来了捐赠的救援物资——成箱的矿泉水、泡面、大米、菜油，物资抵达后，村支书李昌青趿着拖鞋，裤腿高卷，正在安排村里的男性青壮年在“码头”接收搬运。

对被围困在龙口村的村民们来说，救援队给他们带来了出行的便利。最热闹的时候，在水面上接驳往返蒲塘村、李家村、邹家村、爱民村之间的舟艇达到十余艘——有从村外要进“孤岛”帮忙的村民亲戚，也有需要出村办事或者采购的本村村民。

救援队的联系方式，被张贴在每个村子的入口处，即便是入夜后，也有值班的救援队员可以执行紧急的运输任务。

余姚战狼救援队负责人张东辉发现，鄱阳湖水域的危险，暗藏在看似平静的浑黄水面下。比如，倒掉的电线杆大半截淹埋在洪水中，只露出一小节尖锐顶部，若操作不当便会割破橡皮艇。

50岁的韩建忠是浙江省余姚市马渚镇菁江渡村治调主任，也是战狼救援队的队员之一。他通常是站在舟艇尾部担任冲锋舟操机手的人。站在船尾，韩建忠无法完全看到船头水下的障碍物，同船的观察员成为他的“眼睛”，两人在船身一前一后保持沟通，才能确保舟艇行驶中及时调整方向和速度。

每一次当舟艇行进至渔网周围，韩建忠都必须熄火，等到同船的队员利用手划桨推开网状物并划行出该区域，他才会重启发动机，“一旦有异物被卷入发动机内，慢速行驶中可能会导致骤停，快速行驶时还有覆艇的危险。”因此，出于安全考虑，每一次的行船路线都是固定重复的，不能随意更换。

尽管，在几支救援队陆续赶到之前，龙口村倚靠自身完成了大部分村民安置，有惊无险地度过了水位暴涨的时期，但村里救援物资和人员有限， “好几天了，恐慌得很，见到你们来了，心里才算有了底。“公羊救援队的队长王斌至今记得第一次进村时，一位村民对他掏心窝子的话。

“天打湿，天晒干，有来的时候，就有走的时候”

7月15日，天气预报中的雷阵雨迟迟没来。

对龙口村的村民来说，不再继续下雨便是好事。邹家村曾是龙口村受灾最严重的村庄，随着水位下降，村民家中的积水渐渐退去，只有村中地势低洼处还泡在水中外。村中主路也从水中露出，被裹上一层晒干后的黄泥沙。

离湖面较近的邹道池家，是四间联排的平房，打开房屋的后门，是一片略低于门槛的积水。屋主正在屋旁的积水中清理厚厚的漂浮垃圾。

几乎每户人家的房门口，都清扫出好几堆混合着枝干、玻璃瓶、塑料袋和木板的洪水垃圾。村民们达成了共识，为了保护鄱阳湖生态，这些垃圾不允许抛回湖水中，干燥后的树枝可以焚烧，其余垃圾全部要统一清运出村。


</div>

6、background缩写属性

image、position/size、repeat、attachment、color

size可以省略，不省略的话必须紧跟position后面，其他顺序无所谓

7、background-image和image选择取舍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9iiSgAq-1600922604312)(C:\Users\Prince\AppData\Roaming\Typora\typora-user-images\image-20200719001839859.png)]

四、CSS-sprite

1、简介

css图像合成技术，将各种小图片合并到一个图片上，然后利用css背景图定位到对应图片部分

好处：减少网页http请求量，加快网页响应速度，减轻服务器压力，减收图片大小，解决图片命名困扰

2、练习京东的多块好省

<style>
        /* reset.css 重置属性一般放到一个文件里*/
        body,p,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
 

        /* common.css 基本的也要放到一个css文件里*/
        .wrap{
            margin: 0 auto;
            width: 1000px;
        }


        .one ul li,h5,p{
            display: inline-block;
        }
        .one ul li{
            margin-left: 20px;
            margin-right: 20px;
        }
        .one ul li p{
            height: 42px;
            line-height: 42px;
            font-weight: 700;
            font-size: 18px;
        }

        .one ul li h5{
            width: 36px;
            height: 42px;

            vertical-align: middle;
            /* 文本缩进 */
            
            text-indent: -9999px;
            background-image: url("../image/duokuai.png");
            /*图片位置http://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/img/23f3ddf914b1b527d0429a3d713cfe3a.png*/
        }
        .duo{
            background-position: 0 -192px;
        }
        .kuai{
            background-position:  -41px -192px
        }
        .hao{
            background-position:  -82px -192px
        }
        .sheng{
            background-position:  -123px -192px
        }
    /*不一定非得一个一个写，还可以使用伪类nthchild*/
    </style>
</head>
<body>
    

    <div class="one wrap">
        <ul class="wrap">
            <li>
                <h5 class="duo">多</h5>
                <p>品类齐全，轻松购物</p>
            </li>
            <li>
                <h5 class="kuai">块</h5>
                <p>多仓直发，极速配送</p>
            </li>
            <li>
                <h5 class="hao">好</h5>
                <p>正品行货，精致服务</p>
            </li>
            <li>
                <h5 class="sheng">省</h5>
                <p>天天低价，畅选无忧</p>
            </li>
        </ul>
    </div>
</body>

3、京东底栏

    <style>
        body,ul,a{
            margin: 0;
            padding: 0;
        }
        .wrap{
            margin: 0 auto;
        }

        .one{
            text-align: center;
        }
        .one a{
            background-image: url("../image/duokuai.png");
            text-decoration: none;
            display: inline-block;
            text-indent: -999px;
            float: left;

            width: 100px;
            height: 35px;
        }
        a:hover{
            color:aqua;
        }
        a:nth-child(1){
            background-position: -205px -111px;
        }

        a:nth-child(2){
            background-position: -205px 0;
        }
        a:nth-child(3){
            background-position: -205px -35px;
        }
        a:nth-child(4){
            background-position: -205px -70px;
        }
        a:nth-child(5){
            background-position: -205px -140px;
        }
    </style>
</head>
<body>


    <div class="one wrap">
            <a href="#">w</a>
            <a href="#">k</a>
            <a href="#">w</a>
            <a href="#">5</a>
            <a href="#">5</a>
    </div>
</body>

五、其他CSS属性和元素补充

1、css-隐藏元素的另外一种方法visiblity属性

两个值visible（显示元素）、hidden（隐藏元素）

跟display的区别：display：none的隐藏是将整个区域和内容隐藏，留白部分由其他元素补上。而这个visiblity是隐藏区域内部内容，该区域空白显示

2、css-针对元素内容溢出属性overflow

visible:溢出内容继续显示

hidden：溢出内容隐藏

scroll：溢出内容被隐藏，但能通过滚动条去查看（滚动条会额外占据宽高）

auto：自动根据溢出内容自动设置是否隐藏还是滚动显示（有超出部分就滚动，没有就算了正常显示）

还有overflow-x/overflow-y分别设置水平垂直方向，单独对某一个轴设置处理

<head>
<style>
    .45{
        overflow:auto;
        width:400px;
        height:50px;
    }
    </style>
</head>
<body>
<div class="45">
   <img src="../img/jpg.jpg" alt="">
    </div>

</body>

3、元素之间空格（行内级元素）

编译时行内级元素的换行会被解析成空格，无论几个换行都一个空格

消除空格解决方式：

元素代码直接不换行
每行后面加注释
对body进行设置：font-size：0 但是这样的话每个文字都要自己设置文字大小否则不出现（苹果浏览器不支持）
给元素加上浮动float（可以消除基线对齐？）

4、元素嵌套一般规律

块级元素、行内块级元素（inline-block）可以嵌套任何元素
行内元素不要嵌套块级元素
行内元素一般只能包含行内元素

5、css属性-word-break对于多个字符连在一起没有换行，被当成一个单词导致内容溢出

word-break：break-all（一般英文字母需要遇到）

6、行内非替换元素注意点（重要）

对行内级非替换元素不起作用的属性：width 、height、 margin-top、 marigin-bottom
对行内非替换元素效果比较特殊：padding-top、padding-bottom、上下方向的border(能显示但是不会额外占据空间就rongyi导致，下面的元素会可能显示到padding里)
```
span{
background-color:red;
padding: 0 20px;
padding-bottom:10px;
}

<span>122222</span>
<div>div</div>
```
解决方式： display:inline-block

7、水平居中（重要）

普通文本居中：text-align：center;

行内元素居中：text-align：center;

行内替换元素（图片：text-align：center;

inline-block元素：text-align：center;

块级元素在块级元素内居中（块级元素是占据整行的，你调高度宽度他还是占据整行只是不显示一）：在子块级里设置margin：0 auto（前提position的left=0，right=0或者值一样也行）；

<style>
.bxo{
    width: 100px;
    height: 200px;
    background-color: aquamarine;
    
<!--若是块级元素，这个text-align: center依据继承原则会被继承到子块元素内-->
    
    text-align: center;
}
.b2{
    background-color: lawngreen;
    display: inline-block;
}
.b3{
    background-color: lightcoral;
    width: 50px;
    height: 50px;
    margin: 0 auto;
}
    </style>
</head>
<body>
    <div class="bxo">
        <!-- <!-- <p>55555</p>普通文本 -->

        <!-- <strong>\\\</strong> 行内元素--> 
        <!-- <div class="b2">55555</div>  inline-block元素-->

        <!-- 块级元素 -->
        <div class="b3">5555</div>
    </div>
</body>

重要margin： 0 auto居中原理

auto虽然默认是0但是，拿左右方向举例，左侧margin设置完毕后右侧为auto时，当系统会默认自动分配剩余的像素，比如margin-left：auto；margin-right：0；，是将块元素以float：right形式显示，因为右侧margin为0而左侧为auto系统自动分配剩余像素。

而margin：0 auto是缩写属性，默认right和left为auto，所以左右的marin会被系统平均分配

.bxo{
    width: 100px;
    height: 200px;
    background-color: aquamarine;
    text-align: center;
}
.b2{
    background-color: lawngreen;
    display: inline-block;
}
.b3{
    background-color: lightcoral;
    width: 50px;
    height: 50px;

<!--相当于这个-->
    margin-left: auto;
    margin-right: auto;
}
    </style>
</head>
<body>
    <div class="bxo">
        <!-- <!-- <p>55555</p>普通文本 -->

        <!-- <strong>\\\</strong> 行内元素--> 
        <!-- <div class="b2">55555</div>  inline-block元素-->

        <!-- 块级元素 -->
        <div class="b3">5555</div>
    </div>
</body>

nline-block元素–>

    <!-- 块级元素 -->
    <div class="b3">5555</div>
</div>

```

重要margin： 0 auto居中原理

而margin：0 auto是缩写属性，默认right和left为auto，所以左右的marin会被系统平均分配

.bxo{
    width: 100px;
    height: 200px;
    background-color: aquamarine;
    text-align: center;
}
.b2{
    background-color: lawngreen;
    display: inline-block;
}
.b3{
    background-color: lightcoral;
    width: 50px;
    height: 50px;

<!--相当于这个-->
    margin-left: auto;
    margin-right: auto;
}
    </style>
</head>
<body>
    <div class="bxo">
        <!-- <!-- <p>55555</p>普通文本 -->

        <!-- <strong>\\\</strong> 行内元素--> 
        <!-- <div class="b2">55555</div>  inline-block元素-->

        <!-- 块级元素 -->
        <div class="b3">5555</div>
    </div>
</body>