day04-CSDN博客

本文链接：https://blog.csdn.net/Cmaningyuan/article/details/131639757

元素转换

如果要对行内元素设置宽、高，则需要将其转换为行内块元素。

        span {
            width: 300px;
            height: 300px;
            display: inline-block;   //展示为行内块元素
            background-color: aqua;
        }

display: block;   //转换为块元素           
display: none;    //隐藏该元素（脱离文档流）

文本样式

        div{
            width: 300px;
            height: 50px;
            text-align: center;    //水平居中
            line-height: 200px;    //设置行高（当行高=height时，可以实现垂直居中）
            background-color: aqua;
        }

        a{
            text-decoration: none;
        }   //去除默认样式（通常是链接的下划线）

边框

border-radius: 50%;           //设置边框弧度
border-top-left-radius: 40%   //设置左上方边框弧度

table{
      border-collapse: collapse;  //合并相邻单元格的边框
}

阴影

box-shadow: -20px -20px 10px 10px black;  //盒子阴影
text-shadow: red 5px 5px;                 //文本阴影

防拖拽

textarea{
         resize: none;         //防止文本拖拽
         vertical-align: top;  //默认为bottom，改变与文字的对齐方式
}
<textarea name="" id="" cols="30" rows="10"></textarea>

轮廓线

        input[type="text"] {
            outline: none;           //去除默认轮廓线
            outline-style: groove;   //设置轮廓线样式
        }

隐藏元素

.box1 {
      display: none;   //隐藏盒子（原来的位置不再保留）
}

      visibility: hidden;  //隐藏盒子（保留原来的位置）

      opacity: 0;    //设置透明度为0

元素的定位

绝对定位

position: absolute   //不保留原来位置（被移出正常文档流）
position: relative   //保留元素放置在未添加定位时的位置，再在不改变布局的前提下调整元素位置。

  top: 20px;
  left: 20px;       //设置偏移量

固定定位

position: fixed;  //元素会被移出正常文档流

粘性定位

.one{
     position: sticky;
     top: 0px;
}

盒子模型

边框是整个盒子的边界。
盒子大小：content + padding + border

默认时，盒子和页面边界有一定的距离（即外边距不为0），且盒子的文本内容与盒子边界无间距。

padding: 20px;          //各个方向
padding-top: 20px;   
padding-left: 200px;
padding-bottom: 200px;

注意，当改变内边距时，盒子的大小会改变
padding只有一个值时，对四周都分配边距。
padding的赋值顺序：上、左右、下（三个值）
padding的赋值顺序：上、右、下、左（四个值）

ul的例子

        ul li{
            list-style: none;
            background-color: pink;
            margin-bottom: 30px;
        }

span的例子

        span{
            display: inline-block;
            background-color: pink;
            width: 50px;
            margin-right: 10px;
        }

外边距塌陷

        .father {
            width: 800px;
            height: 800px;
            background-color: aqua;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin-bottom: 20px;   //该盒子底部与其它盒子间距为20px
        }

    </style>
</head>

<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
    </div>

如果对son1添加margin-top

        .son1 {
            margin-top: 300px;
        }

第一个子元素的margin-top值会被父元素抢走。

解决方法：

1.给父元素添加边框：

border: 1px solid red

2.给父元素添加padding值：

padding:

3.使用溢出隐藏：

overflow: none

解决文本溢出

当内容较多时，可能会发生溢出，那么可以使用：

            overflow: auto;
            /* hidden */

样式继承

    <style>
        a{
            text-decoration: none;
        }
        div span,
        div a {
            font-size: 40px;
        }
  
    </style>
</head>

<body>
    <div>
        dsjfiodjoisdjgosigjsoigj<br>
        <span>sofjdiofjsdogjsogj</span><br>
        <a href="#">sojoisfjosijos</a>
    </div>

或：

div {
    font-size: 40px;
    color: #807474
}

发现超链接未继承父元素的部分样式。所以，如果要对超链接设置样式，那么单独设置。
对于其它的元素，只继承父元素中对布局无影响的样式。

解决影响盒子大小的padding

div{
            width: 300px;
            height: 300px;
            background-color: pink;
            padding: 40px;
        }

box-sizing: border-box;

此时盒子的大小与未设置padding时的大小相同

margin: 40 30  //上下、左右
margin: 40 30 20 //上、左右、下
margin:auto;    //平均分配左右外边距（盒子水平居中）

flex布局

    .father {
            width: 800px;
            height: 100px;
            background-color: pink;
            display: flex;  //使用flex布局
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
      
    </style>
</head>

<body>
    <div class="father">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
    </div>
   
</body>

如果不使用flex属性：

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

主轴布局：

justify-content: space-between;

justify-content: space-around;

测轴布局：

            align-items: center;
            align-items: end;
            align-items: start;   //默认

默认外边距

在设置CSS样式之前，要将所有的默认边距设置为0

        * {
            margin: 0;
            padding: 0;
        }

2d转换

transform: translate(40px, 50px);

transform: translate(70px);

transform: translateY(70px);

transform: scale(2)   //缩放（放大2倍）

transform: translate(100px, 100px) scale(1.5) rotate(45deg)

transform: translate(40px, 50px);

transform: translate(70px);

transform: translateY(70px);

transform: scale(2)   //缩放（放大2倍）

transform: translate(100px, 100px) scale(1.5) rotate(45deg)