成为前端牛马第二天

最新推荐文章于 2024-08-26 16:38:21 发布

咸鱼茄子煲OvO

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量406

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_67963390/article/details/140462211

版权

一. 行高

行高：文本行与行之间的间距，文本基线与基线之间的距离

/* 一行文本居中，行高=标签高度 */
      .box {
        height: 200px;
        font-size: 40px;
        line-height: 200px;
        background-color: pink;
      }
      /* 多行文本居中，使用padding挤开 */
      .box-1 {
        height: 200px;
        font-size: 40px;
        padding: 80px 0;
        background-color: red;
      }

二. 圆角及透明度

border-radius: 圆的半径

opacity: 盒子透明度，会影响文本

background: rgba(0,0,0,.2) 背景透明度，不影响文本

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 设置圆角 */
      .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        border-radius: 50px;
      }
      /* 不同圆角 */
      .box-1 {
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
      }

      /* 透明度 */
      .box-2 {
        width: 200px;
        height: 200px;
        /* 盒子透明 */
        background-color: pink;
        opacity: 0.6;
        /* 视觉消失，占位 */
        opacity: 0;
      }
      .box-3 {
        width: 200px;
        height: 200px;
        /* 背景色透明，不影响文本 */
        background-color: rgba(255, 192, 203, 0.6);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box-1"></div>
    <div class="box-2">pink</div>
    <div class="box-3">pink</div>
  </body>
</html>

三. 颜色值

三种写法

1.英文单词 2.十六进制 # 3.rgb()

.box{
    width:100px;
    height:100px;
    background-color:black
    background-color:#fff
    background-color:rgb(0,0,0)
}

四. 浮动

文档排版的一种方式，有左浮动和右浮动两种，主要解决块级标签独占一行的排版不便，但也会产生脱离文档流影响后面结构和父元素塌陷等问题。

      .fl {
        float: left;
      }
      .fr {
        float: right;
      }

产生影响一：脱离文档流

<style>
.box-1,.box-2 {
        width: 100px;
        height: 100px;
        background-color: skyblue;
      }
</style>

<div class="box clearfix">
      <div class="box-1">1</div>
      <div class="box-2 fl">2</div>
</div>

可以看到，浮动的2号蓝色盒子影响了后面的结构，使结构向上移动，盒子内容也受到了影响

产生影响二：父元素塌陷

<style>
    .father {
        width: 300px;
        background-color: gray;
      }
      .father .child {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
</style>

<div class="father">
      <div class="child fl">1</div>
      <div class="child fl">2</div>
    </div>

当父元素的高度是靠子元素的高度撑开时，子元素浮动时，父元素就看不见了，也就是塌陷，解决方法是给父元素添加清除浮动的属性。

/* 万能清除 */
      .father::after {
        content: "";
        height: 0;
        display: block;
        clear: both;
        zoom: 1;
      }

清除浮动方式总结

1.最常用的伪元素方法

/* 万能清除 */
      .father::after {
        content: "";
        height: 0;
        display: block;
        clear: both;
        zoom: 1;
      }

2.增加清除浮动的盒子，即挡板

<div class="father">
      <div class="child fl">1</div>
      <div class="child fl">2</div>
      <div style="clear: both"></div>
    </div>

3.父元素溢出隐藏 overflow:hidden

五. 定位

即position，多与方位属性连用

top: 上移
left: 左移
right:右移，与left属性一同出现时，以left为准
bottom:下移，与top属性一同出现时，以top为准
z-index:层级，Z轴移动

position的属性

relative 相对定位
absolute 绝对定位
fixed 固定定位
sticky 粘性定位
static 无定位

<style>
      /* 
      方位属性
        position: absolute;
        top: 600px;
        left: 600px;
        right:
        bottom:
        z-index:层级
        */

      /* 
            position的属性
            relative
            absolute
            fixed   固定定位
            sticky  粘性定位
            static  无定位
        */
      body {
        height: 2000px;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: #000;
        color: aliceblue;
      }
      .box-1 {
        width: 100px;
        height: 100px;
        background-color: pink;
        position: relative; /* 相对定位不会脱离文档流 */
        left: 60px;
      }
      .box-2 {
        width: 100px;
        height: 100px;
        position: absolute; /* 会脱离 */
        left: 120px;
        background-color: skyblue;
      }
      .box-3 {
        width: 100px;
        height: 100px;
        position: fixed; /* 标签固定在视口 */
        left: 240px;
        background-color: red;
      }
      .box-4 {
        width: 100px;
        height: 100px;
        position: sticky; /* 上移距离不会小于160px,始终会在160px */
        top: 160px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box">0</div>
    <div class="box-1">1</div>
    <div class="box-2">2</div>
    <div class="box-3">3</div>
    <div class="box-4">4</div>
  </body>