CSS第三天（2）-CSDN博客

本文链接：https://blog.csdn.net/2302_80241604/article/details/136308968

盒子模型

1.边框（border）

边框有三部分组成:边框宽度(粗细) 边框样式边框颜色

边框样式 border-style 可以设置如下值：

 none：没有边框即忽略所有边框的宽度（默认值）

 solid：边框为单实线(最为常用的)

 dashed：边框为虚线

 dotted：边框为点线

请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框的练习</title>
</head>
<style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        /*层叠性，层叠了上边框*/
        border-top: 1px solid red;
    }

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

表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse;

表示相邻边框合并在一起

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.

2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

2.内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。

简单写法：

padding也会影响盒子大小：

方法：如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

应用：新浪导航栏

<!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>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            /*设置高，要转换，a为行内元素，要转换为行内块元素*/
            display: inline-block;
            height: 41px;
            padding: 0 20px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">新浪微博</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">三个字</a>
    </div>
</body>

</html>

3.外边距（margin）

外边距可以让块级盒子 水平居中 ，但是必须满足两个条件：

① 盒子必须指定了宽度（width）。

② 盒子左右的外边距都设置为 auto 。margin：0 auto；

注意： 以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

<!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>
.navvv {
    width: 940px;
    height: 200px;
    background-color: pink;
    margin: 100px auto;
    text-align: center;
}

    </style>
</head>
<body>
    <div class="navvv">
        <span>hahahahah</span>  
    </div>
    <div class="navvv">
        <img src="pic.jpeg" alt="">
    </div>
    
</body>
</html>

外边距合并：

1. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并 。

解决方案：

尽量只给一个盒子添加 margin 值。