初识html+css 第六天

最新推荐文章于 2024-11-14 15:33:48 发布

ʚ骑牛小道士εﾟ

最新推荐文章于 2024-11-14 15:33:48 发布

阅读量134

点赞数

分类专栏： html 文章标签： html css3 flex

本文链接：https://blog.csdn.net/weixin_46087833/article/details/108294731

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

初识html+css 6

1. 阴影
盒子和文本的阴影

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box {
            /* margin: 50px;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            border: 1px solid rebeccapurple;
            background-image: url('./images/app_icons_50_10.jpg'); */
            /* box-shadow: 10px 10px 10px 10px red; */
            /* 第一个值 是x轴的距离 可以为负值  为负值是阴影向左
                第二个值 是y轴的距离 可以为负值 为负值阴影向上
                第三个值 阴影的模糊程度
                第四个值 阴影的大小
                第五个值 阴影的颜色
                第六个值 阴影的位置 默认outset  外阴影 ---可以设置为inset 不可以设置为outset
             */
            /* 分别设置四个边的阴影 */
            /* box-shadow: 0px -10px 10px 2px red ,
                    10px 0px 10px 2px blue,
                    0px 10px 10px 2px green,
                    -10px 0px 10px 2px yellow;
            } */
        }
        p {
            /* 文字阴影 */
            /* text-shadow: 5px 5px 5px red; */
            /* 第一个值 水平方向的阴影位置
           第二个值 垂直方向的阴影位置
           第三个值 阴影的模糊程度
           第四个值 阴影的颜色
            */
        }
        .box{
            margin: 20px auto;
            width: 234px;
            height: 300px;
            background-color: #fff;
        }
        .box:hover{
            box-shadow: 0px 1px 40px 10px #ccc;
        }
    </style>
</head>

<body style="background-color: #eee;">
    <!-- <div class="box">
        
    </div> -->
    <!-- <p>
        hello world
    </p> -->
    <div class="box">
    </div>
</body>

**2.css权重 **

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../通用样式.css"> -->
    <style>

        /* #box11{
            color:blue
        } */

        .container div{ 
            color: red;
        }

        .box{  
            color: pink;
        }
        /* div{  
            color: seagreen !important;
        } */
    </style>
   
</head>
<body>
    <!-- 
        选择器权重
        *{} 权重值为 0
        标签选择器 权重值为 1
        类选择器 权重值 为10
        id选择器 权重值为100
        行内选择器权重 值 为1000
        ！important 权重值最大
     -->
    <div class="container">
        <div class="box" id="box11" style="color: pink;">
            我是div标签
        </div>
    </div>
</body>

3. flex布局
flex布局相对于float更加便捷，不用担心布局父元素的塌陷问题。
主要的语句有dispaly:flex

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../通用样式.css">
    <style>
        ul{
            display: flex;
            border: 1px solid royalblue;
            box-sizing: border-box;
            flex-direction: column;
            height: 800px;
            padding: 5px;
        }
        .box1,.box2{
            width: 200px;
            height: 100px;
            background-color: rebeccapurple;

        }
        .box3{
            /* width: calc(100vw - 400px); */
            width: 200px;
            flex: 1;
            /* height: 100px; */
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="box1"></li>
        <li class="box2"></li>
        <li class="box1"></li>
        <li class="box2"></li>
        <li class="box3"></li>
    </ul>
</body>

flex-direction

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../通用样式.css">
    <style>

        ul{
            display: flex;
            /* flex-direction: row; */
            /* 默认排列方向 横向 */
            /* flex-direction: row-reverse; */
            /* 反方向 从右到左*/
            /* flex-direction: column; */
            /* 排列方向纵向 从上而下*/
            /* flex-direction: column-reverse; */
            /* 排列方向纵向 从下而上*/
            border: 1px solid red;
        }
        li{
            width: 100px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <ul>
        <li class="box1">1</li>
        <li class="box2">2</li>
        <li class="box3">3</li>
    </ul>
</body>

flex-wrap
由于flex里面的盒子不会自动换行，不设置wrap会使盒子全聚在一起，导致被压缩在一块，也改变了子元素的宽高

 <style>
        ul{
            display: flex;
            width: 500px;
            border: 1px solid red;
            /* flex-wrap: wrap; */
            /* 强制换行 */
            /* flex-wrap: nowrap; */
            /* 默认不换行 */
            /* flex-wrap: wrap-reverse; */
            /* 不太常见 反向换行 */
        }
        li{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>

justify-content

 <style>
        ul{
            display: flex;
            border: 1px solid red;
            /* justify-content: space-between; */
            /* 子元素均匀等分 两边没有空格*/
            /* justify-content: space-around; */
            /* 均匀等分子元素，两边有间隙 */
            /* justify-content: center; */
            /* 子元素居中 */
            /* justify-content: flex-start; */
            /* justify-content: flex-end; */
        }
        li{
            width: 100px;
            height: 200px;
            border: 1px solid rebeccapurple;
        }
    </style>

align-items
这里是基于flex-direction方向的垂直位置变化

<style>
        ul{
            height: 250px;
            display: flex;
            border: 1px solid red;
            flex-direction: column;
            /* align-items: center; */
            /* align-items: flex-start; */
            align-items: flex-end;
            /* 垂直于主轴的排列方式 */
            justify-content: center;
        
            /* 沿着主轴元素的排列方式，主轴就是flex-direction设置的值 */
        }
        li{
            width: 200px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>