CSS样式基础归纳总结一

最新推荐文章于 2024-10-02 15:35:50 发布

Maaazhi1

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量125

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Maaazhi/article/details/126710963

版权

1.盒子模型之边框

 <style>
        div {
            width: 300px;
            height: 200px;
            /* 边框粗细 */
            /*border-width: px ;*/
            border-width: 5px;
            /* 边框样式*/
            /* solid： 实体线条 */
            /*  dashed : 虚线 */
            /*  dotted : 点线 */
            border-style: dotted ;
            /* 边框颜色 */
            border-color: pink;
        }

    </style>

2.边框复合写法

<style>
        div {
            width: 300px;
            height: 200px;
            /*border-width: 5px;
            border-style: solid;
            border-color: red;*/
            border: 5px solid pink;
        }
    </style>

3.边框会影响到盒子的实际大小

 <style>
        div{
            /*我们需要200*200*/
            /* 边框会影响盒子的实际大小 */
            width: 180px;
            height: 180px;
            background: pink;
            border: 10px solid red;
        }
    </style>

4.内边距

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 内边距   */
            padding: 20px;
        }
    </style>

<div>盒子的内容盒子的内容盒子的内容盒子的内容盒子的内容盒子的内容盒子的内容</div>

5.内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*padding-left: 5px;
            padding-top: 5px;
            padding-right: 5px;
            padding-bottom: 5px;*/

            /*padding: 5px;*/
            /* 10 上  20左右 */
            /*padding: 10px 20px;*/
            /*padding: 5px 10px 20px 30px;*/
        }

    </style>
</head>
<body>
<div>
    盒子的内容  盒子的内容  盒子的内容  盒子的内容  盒子的内容
    盒子的内容  盒子的内容  盒子的内容  盒子的内容  盒子的内容
    盒子的内容  盒子的内容  盒子的内容  盒子的内容  盒子的内容
    盒子的内容  盒子的内容  盒子的内容  盒子的内容  盒子的内容
</div>
</body>
</html>

6.内边距会影响盒子的实际大小

<style>
        div{
            width: 160px;
            height: 160px;
            background-color: pink;
            padding: 20px;
        }
    </style>

7.行内元素或者行内块级元素水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            width: 900px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            text-align: center;
            /* 行内元素或者行内块级元素 水平居中
             为父元素 添加 text-align: center; */
        }
    </style>
</head>
<body>
<div class="header">
    <span>这是div中的span中的内容</span>
</div>
<div class="header">
    <img src="./images/photo-2.jpg"/>
</div>

</body>
</html>

8.外边距合并-相邻块级元素垂直外边距合并

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div_1,.div_2{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .div_1{
            margin-bottom: 100px;
        }
        .div_2{
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div class="div_1">
        这是一个DIV
    </div>
    <div class="div_2">
        这是二个DIV
    </div>
</body>
</html>

9.外边距合并-嵌套块级元素垂直外边距塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 溢出处理 隐藏 */
            overflow: hidden;
        }
        .son{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 100px;
        }

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

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

10.圆角边框的常用写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .styleA{
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
        }
        .styleB{
            width: 300px;
            height: 100px;
            background-color: pink;
            border-radius: 50px;
        }
        .styleC{
            width: 200px;
            height: 200px;
            background-color: pink;
            /*border-radius: 10px 20px 30px 40px;*/
            /*border-radius: 10px 40px;*/
            border-top-left-radius: 20px;
        }
    </style>
</head>
<body>

<!--  圆形 -->
<div class="styleA">

</div>
<!-- 圆角矩形 -->
<div class="styleB">

</div>
<!--  不同的圆角 -->
<div class="styleC">

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

11.盒子阴影

<style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            /*box-shadow: 10px 10px;*/
        }
        div:hover{
            /*<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
                <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
                <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
                <length>④： 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
                <color>： 设置对象的阴影的颜色。 */
            box-shadow: 10px 10px 10px -4px rgba(0,0,0,0.3);
        }
    </style>

12.文字阴影

<style>
        div{
            font-size: 50px;
            color: orange;
            font-weight: 700;
            /*<length>①： 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
            <length>②： 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
            <length>③： 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
            <color>： 设置对象的阴影的颜色。 */
            text-shadow: 5px 5px 6px rgba(0,0,0,0.3);
        }
    </style>

13.块级元素浮动

<style>
        div{
            /* 浮动 */
            float: left;
            width: 150px;
            height: 200px;
            background-color: pink;
            /*display: inline-block;*/
        }
    </style>