CSS-盒子模型三

最新推荐文章于 2024-07-22 13:45:23 发布

@浩轩

最新推荐文章于 2024-07-22 13:45:23 发布

阅读量137

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/HAOXUAN_/article/details/106852698

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            /*
            padding:10px    一个值相当于四个方向的值相同
            单独一个边距
            padding-top:10px;
            padding-right:10px;
            padding-bottom:10px;
            padding-left:10px;
            多个边距,按照方向进行展开
            padding:10px 20px;  两个值，相当于上下/左右
            padding:10px 20px 30px; 第一个上，第二个右，第三个下，第四个默认和第二个相同
            padding：10px 20px 30px 40px;
            */
            padding: 10px 20px 30px 40px;
            /*
            按照三要素    border：边框
            border-width    边框宽度
            solid：实线     边框样式    border-style
            border-color    边框颜色
            按照方向
            border-left:10px solid blue;
            border-left:10px solid blue;
            border-left:10px solid blue;
            border-left:10px solid blue;
            border-width:20px;
            border-style:solid(实线）/dashed（虚线）/dotted/double;
            border-color:red green blue pink;
            */
            border: 10px solid brown;
            background-color: rgb(110, 219, 107);
        }
        
        input {
            /*去掉边框*/
            border: none;
        }
        
        .box2 {
            /*使用方法同border*/
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
            /*文字水平居中*/
            text-align: center;
            /*文字垂直居中，设置行高跟高度一样*/
            line-height: 200px;
            /*整个盒子水平居中,设置auto会自动平分*/
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>

<body>
    <!--
        绝大多数标签都可以看成一个盒子，有宽高，或者放内容
        盒子模型    width/height/padding/border/margin
        width   宽度，指的是内容宽度    不是盒子真是宽
        height  高度，指的是内容的高度  不是盒子真是高
        padding 内边距，指的是内容到边框的距离
        border  边框
        margin  外边距  元素与元素之间的距离
            margin:0 auto;  可以让有宽度的块级元素水平居中
    -->
    <div class="box">
        233
    </div>
    <input type="text">
    <div class="box2">皮卡丘</div>
</body>

</html>

@浩轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-盒子模型三

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
复制链接

扫一扫