CSS盒模型

最新推荐文章于 2022-04-20 17:29:37 发布

锋少的技术博客

最新推荐文章于 2022-04-20 17:29:37 发布

阅读量687

点赞数

分类专栏： WEB HTML 文章标签： html css 标签

本文链接：https://blog.csdn.net/feng2qing/article/details/73196328

版权

WEB 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 1 订阅

订阅专栏

一：元素分类

CSS中，html中的标签元素分为三种不同的类型：块状元素、内联元素（又叫行内元素）、内联块状元素

常用的块状元素有：`<div>,<p>,<h1>...<h6>,<pl>,<ul>,<table>,<address>,<blockquote>,<from>`

常用的内联元素有：`<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>`

常用内联块状元素有：`<img>,<input>`

二：元素分类—块级元素

设置`display:block`就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

块级元素特点

每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

<head>
    <meta charset="UTF-8">
    <title>内联级块元素</title>
    <style>
        div,p { color: red; }
    </style>
</head>
<body>
<div>Stevin三天三夜的专栏</div>
<p>搜索公众号:Stevin三天三夜的专栏</p>
</body>

显示效果：

这里写图片描述

三：元素分类—内联元素

块状元素也可以通过代码`display:inline`将元素设置为内联元素。如下代码就是将块状元素`div`转换为内联元素，从而使 `div` 元素具有内联元素特点。

 div{
     display:inline;
 }

内联元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

<head>
    <meta charset="UTF-8">
    <title>内联元素</title>
    <style>
        p,a,span {
            background-color: red;
        }
    </style>
</head>
<body>
<p>搜索公众号:Stevin三天三夜</p>
<a href="http:www.baidu.com">点击跳转百度</a>
<span>Hello World</span>
</body>

显示效果：

这里写图片描述

四：元素分类—内联块状元素

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，、标签就是这种内联块状标签。内联块状元素inline-block 元素特点：

1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

<head>
    <meta charset="UTF-8">
    <title>内联块状元素</title>
    <style>
        a{
            background-color: red;
            text-align: center;
            width: 100000px;
            /*为 a 元素设置了宽，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。*/
        }
    </style>
</head>
<body>
<a>百度搜索:</a>
<a>Stevin</a>
<a>三天三夜</a>
<a>专栏</a>
</body>

显示效果：

这里写图片描述

五：盒模型

这里写图片描述

六：盒模型—边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        p {
            border: 2px solid red;
            /*等效:
             border-width:2px;
             border-style:solid;
             border-color:red;
            */
        }
    </style>
</head>
<body>
<p>
    美联储此次加息在市场预料之中。美联储在14日结束货币政策例会后发表的声明中称，5月以来的信息显示美国就业市场继续强劲，失业率降到16年来的最低水平，工资缓慢上涨，近几个月家庭消费回升，企业固定资产投资继续扩张。上海社会科学院世界经济研究所研究员徐明棋表示，尽管并不十分令人满意，但总体而言，美国经济在持续温和增长，有必要将利率水平往正常水平提升。</p>

显示效果：

这里写图片描述
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（不是很常用），最常还是用象素（px）。

六：盒模型—边框（二）

设置指定方向的下划线

<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        p {
            border-bottom: 2px solid red;
            /*等效:
             border-width:2px;
             border-style:solid;
             border-color:red;
            */
        }
    </style>
</head>
<body>
<p>美联储此次加息在市场预料之中。</p>
<p>美联储在14日结束货币政策例会后发表的声明中称，5月以来的信息显示美国就业市场继续强劲，失业率降到16年来的最低水平，工资缓慢上涨，</p>
<p>近几个月家庭消费回升，企业固定资产投资继续扩张。上海社会科学院世界经济研究所研究员徐明棋表示，尽管并不十分令人满意，但总体而言，美国经济在持续温和增长，有必要将利率水平往正常水平提升。</p>
</body>

显示效果：

这里写图片描述

七：盒模型—宽度和高度

盒模型宽度和高度和平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。高度同理。

这里写图片描述

<head>
    <meta charset="UTF-8">
    <title>高度和宽度</title>
    <style>
        li {
            background-color: aqua;
            border-bottom: 2px solid red;
            width: 300px;
            height: 50px;
        }
    </style>
</head>
<body>
<ui>
    <li>彩电</li>
    <li>冰箱</li>
    <li>洗衣机</li>
</ui>
</body>

显示效果：

这里写图片描述

八：盒模型—填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：

div{padding:20px 10px 15px 30px;}

顺序一定不要搞混。可以分开写上面代码：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上、右、下、左的填充都为10px;可以这么写

div{padding:10px;}

如果上下填充一样为10px，左右一样为20px，可以这么写：

div{padding:10px 20px;}

<head>
    <meta charset="UTF-8">
    <title>高度和宽度</title>
    <style>
        #box {
            width: 150px;
            border: 2px solid red;
            padding: 30px;
        }
    </style>
</head>
<body>
<div id="box">盒感觉都泛海国际款到发货国际快递法国红酒肯定过好的晶块搞活动覆盖即可都是子</div>
</body>

显示效果：

这里写图片描述

九：盒模型—边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}

如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}

总结：padding和margin的区别：padding在边框里，margin在边框外。

<head>
    <meta charset="UTF-8">
    <title>高度和宽度</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            border: 2px solid red;
        }
        #box1 {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div id="box1">盒感觉都泛海国际款到发货国际快递法国红酒肯定过好的晶块搞活动覆盖即可都是子</div>
<div id="box2">各环节的看法和股东会更健康符合国际法韩国进口国和对方即可好几个款到发货刚开发的好高科技的复合弓</div>
</body>