CSS基础（阴影，浮动，属性顺序）

最新推荐文章于 2023-06-13 21:55:17 发布

Isco也是O型腿

最新推荐文章于 2023-06-13 21:55:17 发布

阅读量267

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_53926719/article/details/114657302

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS圆角边框

CSS3中，新增圆角边框，盒子可以变圆角

border-radius：..px
/*也可以是百分比*/
/*圆角矩形做法：设置为高度的50%*/

在这里插入图片描述
简写属性：上左上右下右下左（以左上为上，类似padding）

CSS盒子阴影

用box-shadow为盒子添加阴影
在这里插入图片描述
默认外阴影outset，但不可以写这个单词，否则阴影无效。
盒子阴影不占空间，不会影响其他盒子布局。
拓展：
鼠标经过盒子时才显示阴影，结合之前的案例

.box:hover{
            box-shadow: 10px 10px 10px 10px #965a5a;
        }
        /*所有盒子都可以用hover*/

文字阴影

了解即可。text-shadow
在这里插入图片描述

CSS浮动

标准流
标签按规定默认方式排列
在这里插入图片描述
为什么需要浮动

而浮动可以改变元素标签默认的排列方式。最典型应用:让多个块级元素一行内排列显示。
网页布局第一准则：多个块级元素纵向排列标准流，多个块级元素横向排列用浮动。

什么是浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘初级包含块或另一个浮动框的边缘。
在这里插入图片描述
两个div盒子float后，会在水平方向上合并。
浮动特性

浮动的元素会脱离标准流（脱标），即为不受原排版的控制，浮在网页上，移动到指定位置上则停止。
浮动的盒子不再保留原先的位置。让其他标准流占有。
浮动的元素会一行内显示且元素顶部对齐，一行内元素满了自动换行，缩小屏幕时作用。
浮动的元素具有行内块的特性，等于加了display：inline-block，如果是块元素改变后，不设置宽度，宽度则随内容变化

浮动元素经常和标准流父级搭配使用
先用标准流盒子确定位置，再用浮动内部对齐
在这里插入图片描述
范例

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .box{
            width: 1226px;
            height: 285px;
            background-color: royalblue;
            margin: 0 auto;
        }
        .box li{
            width: 296px;
            height: 285px;
            background-color: salmon;
            margin-right: 14px;
            float: left;
        }
        /* 必须写.box .last，不然权重不足以覆盖上边的样式 */
        .box .last{
            margin-right: 0;
            /* 最后一个不需要右外边距 */
        }
    </style>
</head>
<body>
    <ul class="box"> 
        <li></li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>
</body>
</html>

网页布局案例2：
综合运用浮动和盒子阴影
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box{
            width: 1226px;
            height: 615px;
            background-color:pink;
            margin: 0 auto;
        }
        .left
        {
            float: left;
            width: 225px;
            height: 615px;
            background-color: salmon;
        }
        .right{
            float: left;
            width: 992px;
            height: 615px;
        }
        .small{
            width: 234px;
            height: 300px;
            background-color: sienna;
            float: left;
            margin:0 0 14px 14px;
            /* margin不会撑大盒子，高度已经固定 */
        }
        .small:hover{
            box-shadow:7px 7px 15px 6px rgb(142, 146, 150);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
        </div>
    </div>
</body>
</html>

页面布局案例3
在这里插入图片描述
由于需要再浏览器中全面布局，所以上下两个盒子不需要设置宽度，自适应浏览器的宽度，称为通栏。若在一个大盒子中，则设置宽度。（注释掉的部分为在一个盒子中布局）。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            padding: 0;
            /* ul自带padding，需清空 */
        }
        /* .box{
            width: 500px;
            height: 500px;
            border:1px solid steelblue;
            margin:0 auto;
        } */
        .top{
            margin:5px auto;
            /* width: 480px; */
            height: 50px;
            background-color: steelblue;
        }
        .banner{
            margin: 10px auto;
            width: 720px;
            height: 95px;
            background-color: steelblue;

        }
        li{
            list-style: none;
        }
        .zhong{
            width: 720px;
            height: 80px;
            margin: auto; 
        }
        .zhong li{
            background-color: steelblue;
            width: 177px;
            height: 75px;
            margin-right: 4px;
            float: left;
        }
        .box .last,
        .box .last2{
             margin-right: 0%;
        }
        .xia{
            width: 720px;
            height: 105px;
            margin:10px auto;
        }
        .xia li{
            width: 177px;
            height: 100px;
            background-color: steelblue;
            float: left;
            margin-right: 4px;
        }
        .foot{
            /* width: 480px; */
            height: 120px;
            background-color: steelblue;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box">
       <div class="top"></div>
       <div class="banner"></div>
       <ul class="zhong">
           <li></li>
           <li></li>
           <li></li>
           <li class="last"></li>
       </ul>
       <ul class="xia">
           <li></li>
           <li></li>
           <li></li>
           <li class="last2"></li>
       </ul>
       <div class="foot"></div>
    </div>
</body>
</html>

浮动布局注意：
一个元素浮动了，理论上其余兄弟元素也要浮动。
浮动的盒子只会影响盒子后面的标准流，不影响前面的标准流。如有3个盒子，第一个不浮动，第二个浮动，则不会浮到第一个上面。第一，三个浮动，第二个不浮动，则第二个在第一个盒子下面，但第三个还在第二个盒子后面

思考：
所有大盒子必须设置高度吗？
不一定，如果像一个产品界面，产品很多很多，或者新闻页面不知道有多少文字不方便给高度，这时则不需要设置高度，让子盒子撑开父亲。
但是像下图，两个盒子浮动后为同一行，已经脱标，则父元素没有被撑大，高度也就为0.
在这里插入图片描述
所以，在父盒子很多的情况下，不方便给高度，但是子盒子浮动又不占位置，导致父盒子高度为0，影响下面的标准流盒子，这就需要清除浮动。

清除浮动
本质就是消除浮动带来的影响
在这里插入图片描述
额外标签法
是W3C推荐的做法。是通过在浮动元素末尾添加一个空的标签例如 div style=”clear:both” /div（新增盒子必须是块级元素，才能占最后一行撑开盒子），或则其他标签br等亦可。

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化较差。

父级添加overflow
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
优点：代码简洁
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

after伪元素法
为空元素额外标签法的升级版，好处是不用单独加标签了
CTRL C+CTRL V使用

/*同样是父盒子调用*/
.clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
  
    /* IE6、7 专有 */
    .clearfix {
        *zoom: 1;
    }

双伪元素清除浮动
同上

 .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
       *zoom: 1;
    }

PS切图

图层切图
在这里插入图片描述
切片切图

插件切图
选中web，选择导出路径，就可一键导出。多个图层则多选。

CSS属性书写顺序

在这里插入图片描述

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

Isco也是O型腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础（阴影，浮动，属性顺序）

CSS圆角边框CSS3中，新增圆角边框，盒子可以变圆角border-radius：..px/*也可以是百分比*//*圆角矩形做法：设置为高度的50%*/简写属性：上左上右下右下左（以左上为上，类似padding）CSS盒子阴影用box-shadow为盒子添加阴影默认外阴影outset，但不可以写这个单词，否则阴影无效。盒子阴影不占空间，不会影响其他盒子布局。拓展：鼠标经过盒子时才显示阴影，结合之前的案例.box:hover{ box-shadow
复制链接

扫一扫