CSS的三大特性、盒子模型

qq_52822043

于 2022-02-24 21:21:32 发布

阅读量435

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_52822043/article/details/123108260

版权

1. CSS的三大特性

1.1 层叠性

1.2 继承性

子标签会继承父标签的某些样式，如文本颜色和字号，即子承父业。

<style>
        div {
            color: pink;
            font-size: 16px;
        }
</style>

<body>
    <div>
        <!-- p标签的样式，继承来自父元素的样式 -->
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>

子元素可以继承父元素的样式：text,font-,line-这些元素开头的可以继承，还有color属性。
继承性口诀：龙生龙，凤生凤，老鼠生的孩子会打洞

行高的继承性

<style>
        body {
            color: pink;
            /* font:16px/24px 'Microsoft YaHei'; */
            font: 16px/1.5 'Microsoft YaHei';
        }
        div {
            color: red;
            /* 子元素继承了父元素的行高 1.5 */
            /* 行高：当前文字大小的1.5倍 所以行高为14*1.5=21px */
            font-size: 14px;
        }
</style>

<body>
    <div>行高的继承性</div>
    <p>行高的继承性</p>
</body>

行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高为1.5
此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5，这样写的最大优势是子元素可以根据自己的文字大小自动调整行高

1.3 优先级

当同一个元素指定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

<style>
        /* 父亲的类选择器权重是100 */
        #father {
            color: red;
        }
        
        /* 继承的权重是0 */
        /* 元素选择器的权重是1 */
        /* 1>0，所以p显示为绿色 */
        p {
            color: green;
        }

        body {
            color: pink;
        }
        /* a链接浏览器默认制定了一个样式 a { color = blue; } */
        /* 要想改变这个元素选择器的样式，则需要自己手动修改样式 */
        a {
            color: orange;
        }
</style>

<body>
    <div id="father">
        <p>继承的权重</p>
    </div>

    <a href="#">单独的样式</a>

</body>

权重叠加：复合选择器，权重虽然会叠加，但是永远不会进位

<style>
        /* 复合选择器会有权重叠加的问题 */
        /* 权重虽然会叠加，但是永远不会进位 */

        /* 权重：0，0，0，1 + 0，0，0，1 = 0，0，0，2  2*/
        ul li{
            color: red;
        }
        /* 权重：0，0，0，1    1*/
        li {
            color: green;
        }
        /* 权重：0，0，1，0 + 0，0，0，1 = 0，0，1，1   11 */
        /* 11>2>1  所以最终显示为blue */
        .nav li {
            color: blue;
        }
</style>

<body>
    <ul class="nav">
        <li>叠加1</li>
        <li>叠加2</li>
        <li>叠加3</li>
    </ul>
</body>

2. CSS盒子模型

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

2.1 边框border

边框（border）：边框宽度（粗细）、边框样式、边框颜色

    <style>
        div {
            width: 300px;;
            height: 200px;
            /* 边框粗细 */
            border-width: 5px;
            /* 边框样式 实线边框：solid 虚线边框：dashed 圆点边框：dotted */
            border-style: solid; 
            /* border-style: dashed; */
            /* border-style: dotted; */
            /* 边框颜色 默认为黑色 */
            border-color: pink;
            
            /* 边框的复合写法*/
            border:5px solid red;

            /* 上边框*/
            border-top:5px solid red;
            /* 下边框*/
            border-bottom:10px dashed purple;
        }
    </style>

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

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

   <style>
        table {
            width: 500px;
            height: 250px;
        }
        table,
        th,
        td {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 16px;
            text-align: center;
        }
    </style>

<body>
    <table align="center" cellspacing="0">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>进入搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
    
            <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                    <td>3</td>
                    <td>西游记</td>
                    <td><img src="up.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                    <td>1</td>
                    <td>鬼吹灯</td>
                    <td><img src="down.jpg"></td>
                    <td>456</td>
                    <td>123</td>
                    <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
        </tbody>           
        </table>
</body>

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

2.2 内边距padding

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

padding属性可以有一到四个值。

    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 内边距 */
            /* padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px;
            padding-bottom: 5px; */

            /* 简写 */
            /* 1.代表上下左右都是5px内边距 */
            /* padding: 5px; */
            /* 2.代表上下、左右的内边距为5px、10px */
            /* padding: 5px 10px; */
            /* 3.代表上、左右、下的内边距为5px、10px、15px */
            /* padding: 5px 10px 15px; */
            /* 4.代表上、右、下、左的内边距为5px、10px、15px、20px ->顺时针*/
            padding: 5px 10px 15px 20px;
        }
    </style>

<body>
    <div>内边距padding、内边距padding、内边距padding、内边距padding、内边距padding、内边距padding、内边距padding、内边距padding、内边距padding、</div>
</body>

指定盒子宽度、高度之后+padding会撑开盒子，解决：宽度-padding-leftpadding--right，高度-padding-top-padding-bottom
没有指定盒子宽度、高度+padding不会撑开盒子

2.3外边距margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 外边距 */
            /* margin-left: 5px;
            margin-right: 5px;
            margin-top: 5px;
            margin-bottom: 5px; */

            /* 简写 */
            /* 1.代表上下左右都是5px外边距 */
            /* margin: 5px; */
            /* 2.代表上下、左右的外边距为5px、10px */
            /* margin: 5px 10px; */
            /* 3.代表上、左右、下的外边距为5px、10px、15px */
            /* margin: 5px 10px 15px; */
            /* 4.代表上、右、下、左的外边距为5px、10px、15px、20px ->顺时针*/
            margin: 5px 10px 15px 20px;
        }
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
    </style>

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

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

<style>
        .nav {
            width: 500px;
            height: 500px;
            background-color: #000;
            margin: 0 auto;
            /* margin: auto; */
            /* margin-left: auto;  margin-right: auto;*/
        }
</style>

<body>
    <div class=".nav"></div>
</body>

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

外边距合并
嵌套块元素垂直外边距的塌陷

    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: purple;
            margin-top: 50px;
            /* 1、定义上边框 */
            /* border-top: 1px solid #000; */
            /* border: 1px solid transparent; */
            /* 2、定义上内边距 */
            /* padding: 1px; */
            /* 3、添加overflow:hidden */
            overflow: hidden;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: pink;
            /* 上外边距和.father合并 50px+100px=150px */
            margin-top: 100px;
        }
    </style>

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

清除内外边距

qq_52822043

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的三大特性、盒子模型

1.CSS的三大特性1.1 层叠性1.2 继承性子标签会继承父标签的某些样式，如文本颜色和字号，即子承父业。<style> div { color: pink; font-size: 16px; }</style><body> <div>  ..
复制链接

扫一扫