CSS装饰

黑马程序员小张

已于 2022-04-20 19:55:22 修改

阅读量343

点赞数

文章标签： css html5

于 2022-04-20 19:54:59 首次发布

本文链接：https://blog.csdn.net/z000802/article/details/124305278

版权

1. 垂直对齐方式

解决行内/行内块元素垂直对齐问题

属性名：vertical-align

vertical-align:

baseline 默认基线对齐

top:顶部对齐

middle:中部对齐

bottom:底部对齐

(拓展)项目中 vertical-align 可以解决的问题

1. 文本框和表单按钮无法对齐问题

2. input和img无法对齐问题

3. div中的文本框，文本框无法贴顶问题

4. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题

5. 使用line-height让img标签垂直居中问题

注意点：

• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题

• 推荐优先使用浮动完成效果

 <style>
    /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
    input {
      height: 50px;
      box-sizing: border-box;

      vertical-align: middle;
    }

  </style>
</head>
<body>
  <input type="text"><input type="button" value="搜索">
</body>

 <style>
    .father {
      width: 600px;
      height: 600px;
      background-color: pink;
      line-height: 600px;
      text-align: center;
    }

    img {
      vertical-align: top;
    }
  </style>
</head>

<body>
  <div class="father">
    <img src="../images/1.jpg" alt="">
  </div>
</body>

2. 光标类型

场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见属性值：默认小箭头

手型表示可以点击

cursor: pointer;

工字形表示可以复制

cursor: text;

十字形，表示可以移动

cursor: move;

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 默认小箭头 */

            /* 手型 表示可以点击*/
            /* cursor: pointer; */

            /* 工字形 表示可以复制 */
            /* cursor: text; */

            /* 十字形，表示可以移动 */
            cursor: move;
        }
    </style>
</head>

<body>
    <div>
        div
    </div>
</body>

3. 边框圆角

属性名：border-radius

常见取值：数字+px 、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

正圆：盒子必须是正方形；border-radius：取值盒子宽高的一半

胶囊：盒子必须是长方形：border-radius：取值盒子高度的一半

 <style>
        .box {
            margin: 50px auto;
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 一个值 表示四个角*/
            /* border-radius: 50px; */
            /* 左上角 */
            /* border-top-left-radius: 100px; */
            /* 两个值  左上和右上 没有的值看对角*/
            /* border-radius: 50px 40px; */
            /* 三个值 左上和右上和右下 左下看对角就是右上  */
            border-radius: 50px 40px 30px;


        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

胶囊状圆

<style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;

            /* border-radius: 100px; */
            /* 50% 取盒子尺寸的一半 */
            border-radius: 50%;
        }

        /* 胶囊状：长方形 border-radius取值是高度的一半 */
        .two {
            width: 400px;
            height: 300px;
            background-color: skyblue;
            border-radius: 150px;
        }
    </style>
</head>

<body>jiaonang
    <div class="one"></div>
    <div class="two"></div>
</body>

4. overflow溢出部分显示效果

溢出部分显示效果：

overflow：visile 默认溢出部分可见

hidden 隐藏

scroll 显示滚动条

auto 根据是否溢出，自动显示或隐藏滚动条

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: pink;

            /* 默认值，溢出部分可见 */
            /* overflow: visible; */

            /* 溢出部分隐藏 工作中最常用 */
            overflow: hidden;

            /* 无论是否溢出，都显示滚动条 */
            /* overflow: scroll; */

            /* 根据是否溢出 自动判断显示是否显示滚动条 */
            /* overflow: auto; */
        }
    </style>
</head>

<body>
    <div class="box">
        我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果我是div，测试溢出显示效果
    </div>
</body>

5. 元素本身隐藏

visibility：hidden；占位隐藏工作中不常用

display：none；不占位隐藏常用！！！开发中经常使用display来显示隐藏

隐藏：display:none; 显示：display:block;

<style>
        div {
            width: 200px;
            height: 200px;
        }

        .one {
            background-color: pink;
            /* 占位隐藏 工作中不常用 */
            /* visibility: hidden; */

            /* 不占位的隐藏 */
            display: none;
        }

        .two {
            background-color: skyblue;
        }

        .father {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {
            display: none;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        .father:hover .son {
            display: block;
        }
    </style>
</head>

<body>
    <div class="one">one</div>
    <div class="two">two</div>

    <div class="father">
        <div class="son"></div>
    </div>
</body>

案例：导航二维码显示隐藏切换案例

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        .nav {
            height: 40px;
            border: 1px solid #ccc;
        }

        .nav ul {
            list-style: none;
            width: 1200px;
            margin: 0 auto;
        }

        .nav li {
            float: left;
            width: 20%;
            height: 40px;
            border-right: 1px solid #ccc;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
        }

        .nav .last {
            border-right: none;
        }

        .nav li a {
            /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */
            /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */
            display: block;
            text-decoration: none;
            height: 40px;
            color: #000;
        }

        .nav .app {
            position: relative;
        }

        .nav .app .code {
            position: absolute;
            left: 50%;
            top: 41px;
            display: none;
            transform: translate(-50%);
        }

        .nav li a:hover .code {
            display: block;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">我要投资</a></li>
            <li><a href="#">平台介绍</a></li>
            <li><a href="#">新手专区</a></li>
            <li><a href="#" class="app">手机微金所<img src="./images/code.jpg" alt="" class="code"></a></li>
            <li class="last"><a href="#">个人中心</a></li>
        </ul>
    </div>
</body>

6.元素整体透明度

opacity:0~1之间的的数字

1表示不透明，0表示完全透明！

是让整个元素透明，包括文字，图片等.......

 <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;

            /* 整体透明度 */
            opacity: .5;
        }
    </style>
</head>

<body>
    <div>
        <img src="./images/product.png" alt="">
        12321321
    </div>
</body>