盒子模型的介绍

最新推荐文章于 2024-10-16 11:23:07 发布

第六天MW

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量60

点赞数

分类专栏： html 文章标签： visual studio code 前端 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_58156478/article/details/129048548

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章详细介绍了CSS中的盒子模型，包括内容区、内边距、边框和外边距，以及W3C盒子和IE盒子的区别。此外，还讨论了如何使用box-sizing属性改变盒子尺寸的计算方式，以及如何通过text-decoration属性取消a标签的下划线。最后，提到了使用display和visibility控制元素的显示与隐藏及其区别。

摘要由CSDN通过智能技术生成

一、

盒子模型组成部分：标准盒子

从内向外

1.内容区：content：分内容的

2.内边距：padding：设置内容与边框的距离

3.边框：border：设置区分盒子内外

4.外边距：margin：设置元素与元素之前的距离，设置元素的位置

用法与padding基本一致

二、

盒子模型的理解：组成部分及各自的含义

盒子模型的分类：

标准盒子/W3C盒子：元素默认设置的宽度和高度是指内容区域

IE盒子/怪异盒子：元素默认设置的宽度和高度是指内容区域+内边距+边框

box-sizing:设置盒子尺寸，设置width和height作用的对象

默认值：content-box：内容盒

border-box：边框盒：这时设置的宽度和高度=border+padding+content

三、

取消a标签的下划线： text-decoration: none;

1、padding属性定义元素边框与元素内容之间的空间

padding: 上右下左

padding: 上右/左下

padding: 上/下左/右

padding: 上下左右

padding-top:单独设置上内边距

2、border：粗细样式颜色

border-style:上右下左

取值顺序与padding相同

可选值：

solid:实线

dashed：虚线

double：双线

dotted:点线

浏览器默认边框是2像素黑色，没有样式

border-top/right/bottom/left:单独设置上、右、下、左的边框样式

border-box:边框盒：border+padding+content

边框

<!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>
        p {
            width: 200px;
            height: 40px;
            /* 单行文本垂直居中 */
            line-height: 40px;
            border: 3px solid red;
            /* 设置边框弧度 */
            border-radius: 30px;
        }

        /* 设置圆：width=height
                border-radius=半径=一半的宽高 */
        div.cri {
            background-color: pink;
            width: 200px;
            height: 200px;
            /* 50%:是指当前元素的宽高的50% */
            border-radius: 50%;
            border-radius: 50% 50% 50% 50%;
        }

        /* 设置半圆：上半圆 */
        div.cri1 {
            width: 200px;
            height: 100px;
            background-color: yellowgreen;
            /* 左上和右上=》大小应该是半径 
               border-radius的值=半径*/
            border-radius: 100px 100px 0 0;
        }

        /* 设置四份之一圆  左上*/
        div.cri2 {
            width: 100px;
            height: 100px;
            background-color: gold;
            border-radius: 100px 0 0 0;
            border-radius: 100% 0 0 0;
        }
        /* 通过边框设置三角形：
           注意：1.元素宽高设置为0
                 2.通过透明色要设置 */
        .squ {
            /* width: 10px;
            height: 10px; */
            width: 0;
            height: 0;
            border: 20px solid red;
            border-color: red yellowgreen blue gold;
            border-color: transparent transparent blue transparent;

            /* border-width: 0 0 20px 0; */
        }
    </style>
</head>

<body>
    <!-- 1.边框弧度
         border-radius：左上 右上 右下 左下 -->
    <p>让害毒，身变。</p>
    <div class="cri"></div>
    <div class="cri1"></div>
    <div class="cri2"></div>
    <br>
    <hr>
    <!-- 小三角形 -->
    <div class="squ"></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>

</html>