css进阶（一）

「已注销」

已于 2022-10-15 12:26:25 修改

阅读量80

点赞数 3

分类专栏： css 前端文章标签： css 前端 html

于 2022-10-14 22:56:00 首次发布

本文链接：https://blog.csdn.net/deartors/article/details/127288632

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

浮动布局

浮动属性

float：left；元素靠左浮动。float：left；元素靠右浮动。float：none；不浮动。

浮动作用：定义网页中其他文本如何环绕该元素显示，让竖着的东西横着来。

clear：none；允许浮动，clear：right；不允许右边有浮动对象，clear：left；不允许左边有浮动对象，clear：both；不允许有浮动，清除浮动只是改变了元素的排列方式，该元素还是漂浮着的，不占据文档位置。

盒子模型

设置前记得使用margin和padding将默认值清零

盒子模型的内边距——padding

padding:npx；四个方向的值一样。

padding:npx upx；n控制上下两个方向的值，u控制左右两个方向的值。

padding:npx npx npx；按顺序控制上左右下

paddin g:npx npx npx npx；按顺序控制上右下左

也可以通过padding-right等属性设置。

盒子模型的边框——border

一般来说三个属性，边框大小，边框样式和边框颜色。

eg：border：2px solid red；

边框样式支持：solid，double，dashed。

同时和pading属性一样支持四个方向单独设置，top，left，bottom。

还支持单独设置border-width/-color/-style的属性值，顺序也是上右下左。

盒子模型的外边距———margin

支持单一设置，支持按顺序设置一个至四个，支持单独设置任一方向。支持负值

margin：0 auto；自动适应

盒子模型溢出属性——overflow

overflow:

auto

visible默认值，溢出内容会显示在元素之外；

/hidden(溢出内容隐藏)

scroll（滚动，溢出内容以滚动的方式显出）/auto(如果有溢出会添加滚动条，没有溢出正常显示自动)/inherit（规定应该遵从父元素overflow属性的值）

overflow-x：x轴方向溢出 overflow-y：y轴方向溢出x轴和y轴有滚动条。

盒子模型溢出省略号——white-space

可选属性值：normal（默认值，空白会被忽略）/narmal（文本不会换行，直到遇见br标签）/pre（显示空格和回车，不换行）/pre-wrap（显示空格回车换行）/pre-line（换行符号留下了，没有空格）/inherit

超出部分显示省略号

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

实践案例：

<!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>
        @import url(/css/a.css);
    </style>
</head>
<body>
    <div id="box">
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
        <div class="info">
            <div class="samr">
                <p class="price">$100.00圆</p>
                <p class="date">有效期至:2021-5-1</p>
            </div>
            <p class="category">[店铺类][商城类]</p>
        </div>
    </div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
#box{
    width: 890px;
    height:290px;
    background-color: bisque;
    margin: 0 auto;
    overflow: auto;
    
}
.info{
    width: 162px;
    height: 112px;
    border: 1px solid #808080;
    float: left;
    /* 盒子往右浮动 */
    margin-right: 48px;
    margin-bottom: 20px;

}
.info:hover div{
    background-color: rgb(88, 119, 223);
}
.info:hover .price{    
    color: #ffffff;
}
.info:hover .date{    
    color: #ffffff;
}
.info:hover .category{    
    color: #2f2fc8;
}

.samr{
    width:162px;
    height:84px;
    background:#cccccc;
    font-size:12px; 
}
.info .price{
    height: 63px;
    line-height: 63px;
    padding-left: 21px;
    color: rgb(164, 164, 164);
}
.info .date{
    color: rgb(164, 164, 164);
    padding-left: 21px;
}
.info .category{
    text-align: center;
    background-color: #ffffff;
    height: 28px;
    line-height: 28px;
    color: #000;
    font-size: 12px;
}

效果图