CSS 3

2022/1/31 6:06:04

编程Tag： css 边框 width height color border 盒子

本文主要是介绍CSS 3，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

盒子模型

网页布局要学习三大核心，盒子模型，浮动和定位。学习好盒子模型能非常好的帮助我们布局页面

1.1看透网页的本质

网页布局过程：

先准备好相关的网页元素，网页元素基本都是盒子BOX
利用CSS设置好盒子样式，然后摆到相应位置
往盒子里面装内容

网页布局的核心本质：就是利用CSS摆盒子

1.2盒子模型（Box Model）组成

1.3边框（border）

border-style中常用的三种边框样式：

    <style>
        div {
            width: 300px;
            height: 200px;
            border-width: 5px;
            /* border-width 边框的粗细 一般用px */
            border-color: pink;
            border-style: solid;
            /* border-style: solid 实现边框   dashed虚线边框    dotted点线边框 */
        }
    </style>

<body>
    <div>

    </div>
</body>

边框的复合写法：

课堂小案例：设置一个200*200的盒子，设置上边框为红色，其余边框为蓝色（提示：一定要注意边框的层叠性）

        /* 正确写法1： */
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-top-color: red;
            border-left-color: blue;
            border-bottom-color: blue;
            border-right-color: blue;
        }
        /* 太复杂 */

        /* 正确写法2 */
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-color: blue;
            border-top-color: red;
        }
        /* 此时border-color在上,border-top-color在下 */

        /* 错误写法 */
        div {
            width: 200px;
            height: 200px;
            border-width: 5px;
            border-style: solid;
            border-top-color: red;
            border-color: blue;
        }
        /* 此时border-color在下,border-top与border同属一种选择器，boeder-top被层叠，上边框也为蓝色，错误 */

1.4表格的细线边框

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

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

测量盒子大小的时候，不量边框。
如果测量的时候包含了边框，则需要width/height减去边框宽度。（注意左右）

1.6内边距（padding）

1.6.1padding

1.6.2padding复合属性

padding属性（简写属性）可以有一到四个值

1.6.3padding会影响盒子实际大小

注意：

当我们给盒子指定padding值之后，发生了两件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

也就是说，如果盒子已经有了高度和宽度，此时再指定内边框，会撑大盒子。

解决方案：

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

padding影响盒子大小的好处：

一定情况下保证了文字与文字之间间距相等.（如下例）

1.6.4padding应用案例：新浪导航栏-padding影响盒子好处

参考代码：

    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
        }

        .nav a {
            text-decoration: none;
            display: inline-block;
            height: 41px;
            font-size: 12px;
            line-height: 41px;
            color: #4c4c4c;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
<body>
    <div class="nav">
        <a href="#">新浪微博</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

1.6.5 padding不会撑开盒子的情况

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

例1：

    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }

        div p {
            padding: 30px;
            background-color: skyblue;
        }
    </style>

<body>
    <div>
        <p></p>
    </div>
</body>

此时，p标签（块元素，默认宽度撑满了整个div）未指定宽度和高度，p盒子的padding没有撑开div盒子。

例2：

    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: purple;
        }

        div p {
            width: 100%;
            padding: 30px;
            background-color: skyblue;
        }
    </style>

<body>
    <div>
        <p></p>
    </div>
</body>

此时，p标签指定了宽度100%，撑大了div盒子。

1.7外边距（margin）

PS基本操作

综合案例

圆角边框

盒子阴影

文字阴影

这篇关于CSS 3的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！