03CSS属性

输出机器

已于 2022-03-15 20:21:51 修改

阅读量316

点赞数

分类专栏： CSS 文章标签： css html 开发语言前端 html5

于 2022-03-15 14:13:49 首次发布

本文链接：https://blog.csdn.net/qq_44974028/article/details/123501474

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

属性

1. 字体、文本

font-size：字体大小

color：文本颜色

text-align：对齐方式

line-height：行高

2. 背景

background：

3. 边框

border：设置边框

4. 尺寸

width：宽度

height：高度

5. 盒子模型：控制布局

margin：外边距

padding：内边距

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

box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

float：浮动

left 左浮动

right 右浮动

其他的属性看文档

<!DOCTYPE html>
<html>
    <head>
        <title>
            03CSS属性
        </title>
        <style>
            p{
                color:aqua;
                font-size: 30px;
                text-align: center;
                line-height: 200px;
                border: 2Px solid blue;
            }
            div{
                border: 3px solid yellow;
                width:100px;
                height:100px;
                background-color: aquamarine;
                float:left;
            }
            .div1{
                border: 3px solid yellow;
                width:100px;
                height:100px;
                background-color: aquamarine;
                margin: 50px;
            }
            .div2{
                border: 3px solid yellow;
                width:400px;
                height:400px;
                background-color: rgb(255, 185, 127);
                /* 加了内边距，盒子的大小会被改变 */
                padding: 100px;
                /* 设置盒子的属性，让盒子的大小固定，不再被其他因素干扰盒子的大小 */
                box-sizing: border-box;
                float:right;
            }
            .div3{
                border: 2px solid red;
                width: 100px;
                height:100Px;
                float: right;
            }
            .div4{
                border: 2px solid rgb(137, 197, 40);
                width: 100px;
                height:100Px;
                float:left;
            }
            .div5{
                border: 2px solid rgb(29, 25, 219);
                width: 100px;
                height:100Px;
                float:right;
            }
        </style>
    </head>
    <body>
    <p>字体属性</p>
    <div>空白的</div>
    
    <div class="div2">
        <div class="div1"></div>
        
    </div>


    <div class="div3">
        浮动1
    </div>
    <div class="div4">
        浮动2
    </div>
    <div class="div5">
        浮动3
    </div>
        
    </body>
</html>

运行结果：