CSS_属性1与CSS_属性2_盒子模型

CSS_属性1

　　　　属性

　　　　　1.字体、文本

　　　　　　　　　font- size ：字体大小

　　　　　　　　　color：文本颜色

　　　　　　　　　line - height：设置行高　

　　　　　　　　　text-align：文本对齐方式

　　　　　　　　　　

　　　　　2.背景

　　　　　　　　background：

　　　　　3.边框

　　　　　　　　border：设置边框，符合属性　　

　　　　　4.尺寸

　　　　　　　　width：宽度

　　　　　　　　height：高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
            <!--字体属性-->
    <style>
        p{
            /*字体大小*/
            font-size: 30px;
            /*字体颜色*/
            color: rebeccapurple;
            /*设置行高*/
             line-height: 200px;
            /*文本对齐方式*/
            text-align: center;
            /*
               border  边框
                　border：设置边框，符合属性　　
            */
            border:  1px red solid;
        }
        div{
               /*
                    尺寸
                        width：宽度
　　　　　　　　          height：高度
               */
            border: 1px darkred solid;
            width: 200px;
            height: 150px;
            
            /*设置背景图片*/
            background: url("img/regbtn.jpg") no-repeat center;
        }
    </style>
</head>
<body>
    <p>萤火之光怎敢与皓月争辉</p>

    <div>王耀</div>
</body>
</html>

CSS_属性2_盒子模型

　　　　　　盒子模型：控制布局

　　　　　　　margin：外边距

　　　　　　　padding：内边距　　

　　　　　　　　　　　　默认情况下内边距会影响整个盒子的大小

　　　　　　　　　　　　box-sizing：border-box；设置盒子的属性，让width和heigth就是最终盒子的大小

　　　　　　

 　　　　　　　　　　float：浮动

　　　　　　　　　　　　　left：左

　　　　　　　　　　　　　rigth  右

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>
    <style>
        div{
            border: 1px solid red;
        }
        .div1{
            width:100px;
            height:100px;
               /*外边距*/
            /*margin: 50px;*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*
                设置盒子大小的属性，让width和heigth就是最终盒子大小
            */
            box-sizing: border-box;
        }
        /*浮动
            左浮动 left
            右浮动 rigth
        */
        .div3{

            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: right;
        }
    </style>

</head>
<body>
    <div class="div2">
            <div class="div1"></div>
    </div>
<div class="div3">abc</div>
<div class="div4">def</div>
<div class="div5">ghi</div>
</body>
</html>

 

 

 

　　

posted @ 2022-11-16 17:00  zj勇敢飞，xx永相随  阅读(18)  评论(0)  编辑  收藏  举报