CSS基础知识三

最新推荐文章于 2024-06-07 19:12:10 发布

师玉幺叔

最新推荐文章于 2024-06-07 19:12:10 发布

阅读量101

点赞数

分类专栏： web前端知识

本文链接：https://blog.csdn.net/weixin_45663954/article/details/118360259

版权

web前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS的盒子模型

1.盒子模型(重点)
2.PS基本操作
3.综合案例
4.圆角边框(重点)
5.盒子阴影(重点)
6.文字阴影(了解即可)

1.盒子模型(重点)

页面布局的三大核心：盒子模型、浮动、定位

1.1 网页布局的本质

1）准备相关的网页元素
2）利用CSS设置好盒子样式，然后摆放到相应的位置
3）往盒子里装内容

1.2 盒子模型(Box Model)组成

CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，盒子模型包括：border边框、content内容、padding内边距、margin外边距

1.3 边框的复合写法：border: xxx xxx xxx; 没有顺序

1.4 表格的细线边框

1）border-collapse属性控制浏览器绘制表耳边框的方式，它能控制相邻单元格的边框
2）border-collapse: collapse; 表示将相邻边框合并在一起

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之边框</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            border-top: 5px solid red;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

1.5 边框会影响盒子的实际大小

1）测量时不包含边框
2）测试时包含边框，width/height需要减去边框宽度(左右/上下都有需要减双倍)

1.6 内边距(padding)对盒子大小的影响

内边距(padding)，也会影响盒子大小，使用width/height减去内边距大小即可(左右/上下都有需要减双倍)
简写方式：

值的个数	表达意思
padding: 5px	1个值，代表上下左右都有5个像素内边距
padding: 5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding: 5px 10px 20px	3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding: 5px 10px 20px 30px	4个值，代表上内边距是5像素，右内边距是10像素，下内边距是20像素，左内边距是30像素，顺时针

注意：
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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; */
            /* padding: 5px 10px; */
            /* padding: 5px 10px 20px; */
            padding: 5px 10px 20px 30px;

        }
    </style>
</head>

<body>
    <div>
        CSS盒子模型的本质就是一个盒子，封装周围的HTML元素，盒子模型包括：border边框、content内容、padding内边距、margin外边距
    </div>
</body>

</html>

1.7 外边距(margin)

1.7.1 外边距用于设置外边框，即控制盒子与盒子之间的距离

1.7.2 简写方式与padding一致

简写方式：

值的个数	表达意思
margin: 5px	1个值，代表上下左右都有5个像素外边距
margin: 5px 10px	2个值，代表上下外边距是5像素，左右外边距是10像素
margin: 5px 10px 20px	3个值，代表上外边距是5像素，左右外边距是10像素，下外边距是20像素
margin: 5px 10px 20px 30px	4个值，代表上外边距是5像素，右外边距是10像素，下外边距是20像素，左外边距是30像素，顺时针

1.7.3 外边距可以让块级盒子水平居中，但必须满足两个条件：
1)盒子必须指定了宽度(width)
2)盒子左右的外边距都设置为：auto

例如： margin: 0 auto;

1.7.4 行内元素、行内块元素居中对齐，给其父元素添加 text-align: center 属性即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型之外边距</title>
    <style>
        div {
            /* display: inline-block; */
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin-left: auto;
            margin-right: auto; */
            margin: 0 auto;
            
        }

        /* .one {
            margin-bottom: 2s0px;
        } */

        .two {
            margin-top: 20px;
        }
    </style>
</head>

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

</html>

1.8 外边距合并

1.8.1 相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，那么他们之间的垂直外边距不是margin-bottom，下面的元素有上外边距margin-top，那么他们之间的垂直外边距不是margin-bottom与margin-top之和，取两个值中较大者这种现象被称为相邻块元素垂直外边距的并—避免的方法：只给其中一个盒子指定垂直(上/下)外边距即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻块元素垂直外边距的合并</title>
    <style>
        .liu,
        .yang {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .liu {
            margin-bottom: 100px;
        }

        .yang {
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="liu">刘若英</div>
    <div class="yang">杨幂</div>
</body>

</html>

1.8.2 嵌套块元素垂直外边距的塌陷
对于两个嵌套关系(父子关系)的块元素，父元素有上外边距的同时，子元素也有上外边距，此时父元素会塌陷较大的外边界值

解决方案：
1)可以为父元素定义外边框
2)可以为父元素定义内边距
3)可以为父元素添加 overflow: hidden; --较常用的避免外边距塌陷方法
ps： 还有其他方法，比如浮动、固定、绝对定位的盒子不会有塌陷问题，后续再总结

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套块元素垂直外边距的塌陷</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 解决方法：添加外边框或内边距 */
            /* border: 1px solid transparent; */
            /* padding: 1px; */
            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>

1.9 清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局之前，首先要清除网页元素的内外边距。

语法：
* {
padding: 0; /* 清除内边距 /
margin: 0; / 清除外边距 */
}
注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换为块级元素和行内块元素就可以了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除内外边距</title>
    <style>
        * {
            /* 清除内边距 */
            padding: 0;
            /* 清除外边距 */
            margin: 0
        }
    </style>
</head>

<body>
    123
    <li>abc</li>
</body>

</html>

2.PS基本操作

1）打开图片
2）Ctrl+R打开标尺，或者视图-标尺
3）点击标尺，将单位修改成像素
4）按住空格可以移动图片
5）使用选区-矩形选框工具进行测量
6）Ctrl+D取消选区
7）吸管工具取色

3.综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航栏案例</title>
    <style>
        .nav {
            height: 41px;
            background-color: #fcfcfc;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
        }

        a {
            /* background-color: pink; */
            /* a标签属于行元素，没有高度，需要转换成行内块元素 */
            display: inline-block;
            height: 41px;
            font-size: 12px;
            text-decoration: none;
            color: #4c4c4c;
            padding: 0 20px;
        }

        a:hover {
            background-color: #edeef0;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合案例</title>
    <style>
        * {
            /* 清除内边距 */
            padding: 0;
            /* 清除外边距 */
            margin: 0
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            /* display: inline-block; */
            float: left;
            margin-right: 25px;
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
        }

        img {
            width: 298px;
            margin: 0 auto;
        }

        span {
            font-size: 14px;
            text-align: 140px;
            text-align: center;
            color: #7b7b7b;
            display: block;

        }

        .re {
            color: #c6c6c6;
        }

        .price {
            font-size: 14px;
            text-align: 140px;
            text-align: center;
            color: #ff8a3b;
            margin-top: 10px;
        }

        .price span {
            color: #c6c6c6;
            display: inline-block;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="box oneBox">
        <a href="#1"><img src="./images/1.jpg" /></a>
        <a href="#2">
            <span>Note 10 Pro</span>
        </a>
        <span class="re">天玑1100年度期间芯，VC液冷散热</span>
        <div class="price">1599元起
            <span><del>1699元</del></span>
        </div>
    </div>

    <div class="box">
        <a href="#1"><img src="./images/1.jpg" /></a>
        <a href="#2">
            <span>Note 10 Pro</span>
        </a>
        <span class="re">天玑1100年度期间芯，VC液冷散热</span>
        <div class="price">1599元起
            <span><del>1699元</del></span>
        </div>
    </div>

    <div class="box">
        <a href="#1"><img src="./images/1.jpg" /></a>
        <a href="#2">
            <span>Note 10 Pro</span>
        </a>
        <span class="re">天玑1100年度期间芯，VC液冷散热</span>
        <div class="price">1599元起
            <span><del>1699元</del></span>
        </div>
    </div>

    <div class="box">
        <a href="#1"><img src="./images/1.jpg" /></a>
        <a href="#2">
            <span>Note 10 Pro</span>
        </a>
        <span class="re">天玑1100年度期间芯，VC液冷散热</span>
        <div class="price">1599元起
            <span><del>1699元</del></span>
        </div>
    </div>



</body>

</html>

4.圆角边框(重点)

border-radius属性可以用于设置元素的外边框圆角，length越大，弧度越大

语法：
border-radius: length;

注意：
1）参数值可以是数值也可以是百分比
2）如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%
3）如果是个矩形，设置为高度的一般就可以做圆角矩形
4）该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角(顺时针)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆角边框</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            background-color: pink;
            border-radius: 10px;

        }
    </style>
</head>

<body>

    <div></div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yuanxing {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* border-radius: 100px; */
            /* 50%就是宽度和高度的一半，前提：盒子是个正方形 */
            border-radius: 50%;
        }

        .juxing {
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 圆角矩形设置为高度的一半 */
            border-radius: 50px;
        }

        .radius {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 20px 30px 40px 50px;
        }
    </style>
</head>

<body>
    1.圆形的做法
    <div class="yuanxing"></div>
    2.圆角矩形的做法
    <div class="juxing"></div>
    3.设置不同的角度
    <div class="radius"></div>
</body>

</html>

5.盒子阴影(重点)

box-shadow属性可以为盒子添加阴影

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需，水平阴影的位置，允许负值，正值往右，负值往左
v-shadow	必需，垂直阴影的位置，允许负值，正值往下，负值往上
blur	可选，模糊距离，数值越大越模糊
spread	可选，阴影的尺寸
color	可选，阴影的颜色，请参阅CSS颜色值
inset	可选，将外部阴影(outset)改为内部阴影

注意：
1）默认是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效
2）盒子阴影不占用空间，不会影响其他盒子排列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            box-shadow: 1px 10px 10px -4px rgba(0, 0, 0, .3);
        }

        p {
            font-size: 20px;
            color: orangered;
            font-weight: 700;
            text-shadow: 5px 5px 4px rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div>1.盒子阴影</div>
    <p>2.文字阴影</p>
</body>

</html>

6.文字阴影(了解即可)

text-shadow属性可以设置文本的阴影

语法：
box-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需，水平阴影的位置，允许负值，正值往右，负值往左
v-shadow	必需，垂直阴影的位置，允许负值，正值往下，负值往上
blur	可选，模糊距离，数值越大越模糊
color	可选，阴影的颜色，请参阅CSS颜色值