盒模型入门

最新推荐文章于 2024-09-01 21:38:19 发布
最新推荐文章于 2024-09-01 21:38:19 发布
阅读量82 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46376522/article/details/106577936
版权

盒布局

各种盒模型

盒的基本类型

在CSS3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。

例如：
div元素和p元素属于block类型；span和a属于inline类型。

  1. 1 inline-block类型
    inline-block类型是CSS2.1中追加的一个盒类型。
    inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点。

    示例：
    在div元素中分别将display设置为inline-block和inline后它们的效果一样。

    代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒的基本类型</title>
    <style>
        /*div{background: green}*/
        /*span{background: red}*/
        div{background: green;width: 50px;height: 50px}
        .div1{display: inline-block}
        .div2{display: inline}
    </style>
</head>
<body>
<h1>盒的基本类型</h1>
<div class="div1">在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<div class="div2">在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</div>
<!--<span>在css3中使用display属性来定义盒的类型，总体来说盒分为block类型和inline类型。</span>-->
</body>
</html>

  1. 2 使用inline-block类型来执行分列显示
    在CSS2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是会造成样式变复杂。
    CSS2.1中追加的inline-block类型使得并列显示多个block类型的元素变得简单。

    示例：
    block类型
    首先新建三个div元素，给前两个div使用float让其并列显示，第三个div就会显示在前两个div元素的下面，用clear属性清除因前两个高度不一造成的浮动。

    代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来执行分列显示</title>
    <style>
        div.div{
            width:400px
        }
        div.div1{
            width: 200px;
            background-color: green;
            float: left;
        }
        div.div2{
            width: 200px;
            background-color: #ff6600;
            float: left;
        }
        div.div3{
            clear: both;
            background-color: #d829ff;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div class="div">
    <div class="div1">
        inline-block类型是css2.1中追加的一个盒类型。
        inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点。
        在DIV元素中分别将display设置为inline-block和inline后他们的效果一样。
    </div>
    <div class="div2">
        在css2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，
    </div>
    <div class="div3">
        css2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，所以在CSS2.1中就追加了inline-block类型，使得并列显示多个block类型的元素操作变的很简单。
        首先新建三个div元素，给前两个DIV使用float让前两个div元素并列显示，第三个div的话就会显示在前两个div元素的下部，但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。
    </div>
</div>
</body>
</html>

inline-block类型
使用inline-block类型可以直接将两个div元素进行并列显示，不需要使用float属性，也不需要使用clear属性。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来执行分列显示</title>
    <style>

        div.div1{
            width: 200px;
            background-color: green;
            display: inline-block;
        }
        div.div2{
            vertical-align: top;
            width: 200px;
            background-color: #ff6600;
            display: inline-block;
        }
        div.div3{
            width: 400px;
            background-color: #d829ff;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来执行分列显示</h1>
<div class="div">
    <div class="div1">
        2、inline-block类型
        inline-block类型是css2.1中追加的一个盒类型。
        inline-block类型盒属于block盒的一种，但是在显示时具有inline类型盒的特点。
        例如：
        在DIV元素中分别将display设置为inline-block和inline后他们的效果一样。

        如果我们给他们都指定宽度和高度结果会是怎样？

    </div><div class="div2">
        2.2使用inline-block类型来执行分列显示
        在css2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，

    </div>
    <div class="div3">
        css2.1之前，如果需要在一行中并列显示多个block类型的元素，需要用float属性或者position属性，但是这样会让我们的样式变的复杂，所以在CSS2.1中就追加了inline-block类型，使得并列显示多个block类型的元素操作变的很简单。

        示例对比：
        block类型
        首先新建三个div元素，给前两个DIV使用float让前两个div元素并列显示，第三个div的话就会显示在前两个div元素的下部，但是因为前两个的高度不一样所以我们要使用clear属性清除浮动。



    </div>

</div>
</body>
</html>
  1. 3 使用inline-block类型来显示水平菜单
    在CSS2.1之前，如果要实现水平菜单，那么我们需要使用float属性，大多数菜单是利用ul列表盒li列表项目来显示的。li元素隶属于block类型下的list-item类型，所以要并列显示的话就要使用float属性。

使用float属性的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来显示水平菜单</title>
    <style>
        ul{
            margin:0;
            padding: 0;
        }
        li{
            padding: 10px 20px;
            background-color: #2292ff;
            border-right: solid 1px #2066c7;
            width: 100px;
            text-align: center;
            list-style: none;
            float: left;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来显示水平菜单</h1>
<ul>
    <li><a href="index1.html">首页</a> </li>
    <li><a href="index1.html">首页</a> </li>
    <li><a href="index1.html">首页</a> </li>
    <li><a href="index1.html">首页</a> </li>
    <li><a href="index1.html">首页</a> </li>
</ul>
</body>
</html>

使用inline-block类型的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用inline-block类型来显示水平菜单</title>
    <style>
        ul{
            margin:0;
            padding: 0;
        }
        li{
            display: inline-block;
            padding: 10px 20px;
            background-color: #2292ff;
            border-right: solid 1px #2066c7;
            width: 100px;
            text-align: center;
        }
        a{
            color: #fff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>使用inline-block类型来显示水平菜单</h1>
<ul>
    <li><a href="index1.html">首页</a></li><li><a href="index1.html">首页</a></li><li><a href="index1.html">首页</a></li><li><a href="index1.html">首页</a></li><li><a href="index1.html">首页</a></li>
</ul>
</body>
</html>

  1. inline-table类型
    inline-table类型是CSS2中新增的盒模型。

    示例：
    在CSS中使用table，做一个表格，前后都有文字将其环绕。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>inline-table类型</title>
    <style>
        table{
            display: inline-table;
            vertical-align: bottom;
            border: solid 3px #ccc;
        }
        td{
            border: solid 3px #898989;
        }
    </style>
</head>
<body>
<h1>inline-table类型</h1>
这里是文字内容
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
这里是文字内容
</body>
</html>
  1. list-item类型
    list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>list-item类型</title>
    <style>
        div{
            display: list-item;
            list-style-type: circle;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<h1>list-item类型</h1>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
<div>list-item类型</div>
</body>
</html>
  1. run-in类型与compact类型
    将元素指定为run-in类型或compact类型时，如果元素后面还有block类型的元素，run-in类型的元素将被包括在后面的block类型的元素的内部，而compact类型的元素将被放置在block类型的元素的左边。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>run-in类型或compact类型</title>
    <style>
        dl.run-in dt{
            display: run-in;
            border: solid 2px #d829ff;
            background-color: #cccccc;
        }
        dl.compact dt {
            display: compact;
            border: solid 2px #d829ff;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<h1>run-in类型或compact类型</h1>
<dl class="run-in">
    <dt>run-in类型</dt>
    <dd>run-in类型的元素将被包括在后面的block类型的元素的内部</dd>
</dl>
<dl class="compact">
    <dt>compact类型</dt>
    <dd>ompact类型的元素将被放置在block类型的元素左边</dd>
</dl>
</body>
</html>

效果图：
在这里插入图片描述

  1. 表格相关类型
    在CSS3中所有与表格相关的元素及其所属类型表:
元素所属类型说明
tabletable代表整个表格
tableinline-table代表整个表格可以被指定为table类型也可以是inline-table类型
trtable-row代表表格中的一行
tdtable-cell代表表格中的单元格
thtable-cell代表单元格中的列标题
tbodytable-row-group代表表格中行中的所有行
theadtable-header-group代表表格中的表头部分
tfoottable-footer-group代表表格中的脚注部分
coltable-column代表表格中的一列
colgrouptable-column-group代表表格中的所有列
captiontable-caption代表整个表格的标题

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS3中所有与表格相关的元素</title>
    <style>
        div.table{
            display: table;
            border: solid 3px #ccc;
        }
        div.table-caption{
            display: table-caption;
        }
        div.thead{
            display: table-header-group;
        }
        div.tr{
            display: table-row;
        }
        div.td{
            display: table-cell;
            border: solid 3px #898989;
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>CSS3中所有与表格相关的元素</h1>
<div class="table">
    <div class="table-caption">表格标题</div>
    <div class="thead">
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
        <div class="tr">
            <div class="td">1</div>
            <div class="td">2</div>
            <div class="td">3</div>
        </div>
    </div>
</div>
</body>
</html>

效果：
在这里插入图片描述

  1. none类型
    当元素被指定了none类型后，这个元素将不会被显示。
    利用伪类选择器实现鼠标移动上去隐藏，移开显示的效果：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>none类型</title>
    <style>
        div#a{
            width: 500px;
            height: 500px;
            background-color: #cccccc;
        }
        div#b{
            display: block;
            width: 200px;
            height: 200px;
            background-color: green;
        }
        div#a:hover div#b{
            display: none;
        }
    </style>
</head>
<body>
<h1>none类型</h1>
<div id="a">
    <div id="b"></div>
</div>
</body>
</html>
  1. 各种浏览器对各种盒模型的支持情况

在这里插入图片描述

Alonso_36
关注
css入门之盒模型
蛐蛐的博客
03-21 406
文档：盒模型 - 学习 Web 开发 | MDN 1.简介 在 CSS 中，所有的元素都被一个个盒子包围着 2.块级盒子 一个display:block的元素是块级盒子 一个块级盒子会表现出以下行为: 盒子父元素的垂直方向扩展，大数情况下盒子会和父容器一样宽 每个盒子都会换行 width 和 height 属性有用 padding , margin和border会将其他元素从当前盒子周围推开 块盒子默认宽度为父元素的100%，默认高度为0 <html>
html5盒子模型作业,HTML5盒子模型。
weixin_34526152的博客
06-05 2059
盒子模型。盒子由 margin、border、padding、content 四部分组成。margin ：外边距border：边框padding：内边距 (内容与边框的距离)content：内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外...
盒子模型——入门初级教程
weixin_48610566的博客
04-22 734
盒子模型基础讲解及属性认知
H5入门6：盒子模型
NYC的博客
06-27 761
H5入门6：盒子模型 1.什么是盒子模型 盒子模型相关属性 宽度属性 高度属性 哪些元素可以设置宽高 边框属性 边框样式 设置不同方向上的边框属性，在中间加上方向即可 padding的设置规则 注：padding 不能设置负值 外边距margin属性设置规则 注意：margin是可以为负值的 块级元素有默认外边距margin 注意： - 如果垂直方向上，两个相邻的元素都设置外边距，外边距会合并，合并后外边距的高度采用的是外边距最大的那个值； -
CSS解析：盒模型
晓风残月淡的博客
09-01 1348
在网页上实现元素布局涉及很多技术。在复杂网站上，可能会用到浮动元素、绝对定位元素以及其他各种大小的元素，甚至也会使用较新的CSS特性，比如Flexbox或者网格布局。在此之前我们要打好基础，深刻理解浏览器是如何设置元素的大小和位置的。高级的布局话题基于文档流和盒模型等概念，这些是决定网页元素的大小和位置的基本规则。我们将构建一个两列布局的网页。你可能很熟悉这个布局，因为它是一个经典的CSS入门练习，但是在完成这种布局的过程中，有一些布局中经常被忽略的一些细节。
QSS盒子模型入门指南：了解和应用基础知识
qq_46017342的博客
06-04 864
QSS盒子模型入门指南：了解和应用基础知识
前端入门之盒模型
m0_63574519的博客
04-16 485
1、什么是盒模型？ 盒模型规定了网页元素如何显示以及元素间相互关系，它本质上是一个盒子，封装周围的HTML元素。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)，这就是盒模型。 2、内容区域（content area） 内容区域可以放文字或者是图片，通过wideth、height可以改变内容区域的大小。 3、内边距（padding） 也称页边距或补白，用来设置内容到边框的距离，内边距会增加盒模型的面积。 首先我们设置一...
2.4盒模型
sid170401023的博客
01-24 460
一、盒模型基本概念 1、认识盒模型 ​ 什么是盒模型？ ​ 所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型” 2、width和height属性详解 ​ （1）width、height不是盒子总宽高。width、height表示盒模型中内容的宽度和高度 ​ （2）盒子的总宽度=width+左右padding+左右border ​ （3）盒子的总高度=height+上下padding+上下border 3、padding属性详解 ​ （1）p
HTML入门之盒模型概念
weixin_43226116的博客
02-21 766
盒模型概念 HTML页面的组成可以看作是各个部件之间的组合，如页面顶部区域，页面导航区域，图片轮播区域等等，而这些区域是被一个个“容器"所承载的，这种容器就称为”盒模型“ 盒模型简图 盒模型组成 1.盒模型可以看作是一个个盒子，每个盒子都占据一定的空间，拥有宽度和高度。 宽度：width 高度：height 2.盒子是用来存放内容的，为了能在页面中更好的布局，体现更好的视觉效果拥有内间距、外间距...
CSS基础：盒子模型详解
u013179804的博客
04-17 1495
盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。
Css盒子模型入门指导
12-17
CSS 盒子模型是网页设计中的核心概念，尤其对于使用CSS进行布局的初学者而言，理解和掌握盒子模型至关重要。在传统的HTML布局中，表格被广泛用于网页内容的排版，但随着网页技术的发展，CSS（层叠样式表）的引入带来...
CSS入门教程:计算CSS盒模型宽和高
09-27
出处：当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。#test{margin:10px;padding:10px;width:100px;height:100...
CSS 盒子模型
12-14
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model)： 不同部分的说明： Margin(外边距) – 清除边框外的区域，外边距是透明的。 Border(边框) – 围绕在内边距和...
CPA 税法 马兆瑞 基础班 第11章 偶然所得应纳税额的计算 税收优惠.pdf
10-10
CPA 税法 马兆瑞 基础班 第11章 偶然所得应纳税额的计算 税收优惠.pdf
python入门教程学习攻略总结 python就看这个章节总结
10-10
python入门 Python入门教程知识点 第一章：Python简介与环境搭建 1.1 章节知识点目录 Python的历史与特点 Python的版本选择（Python 2 vs Python 3） Python开发环境搭建（IDE介绍：PyCharm, VSCode, Jupyter Notebook） 第一个Python程序：Hello, World! 第二章：Python基础语法 2.1 章节知识点目录 变量与数据类型（整数、浮点数、字符串、布尔值） 运算符与表达式 条件语句（if...else） 循环结构（for循环，while循环） 函数定义与调用 第三章：数据结构 3.1 章节知识点目录 列表（List）与元组（Tuple） 字典（Dictionary）与集合（Set） 字符串操作 列表推导式与生成器表达式 第四章：面向对象编程（OOP） 4.1 章节知识点目录 类与对象的概念 类的定义与实例化 属性与方法 继承与多态 封装与抽象 4.2 重点内容 类是创建对象的蓝图，包含属性和方法。 对象是根据类实例化得到的实体，具有自己的状态和行为。 继承允许新类继承父类
SpringBoot+Vue电影订票系统答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
SpringBoot+Vue川剧科普平台答辩PPT.pptx
10-10
计算机毕业设计答辩PPT
OpenCV图像锐化的实现及原理介绍（包含详细的完整的程序和数据）
10-10
内容概要：本文章深入解析了使用OpenCV进行图像锐化的方法，特别是通过邻居访问运用拉普拉斯算子提高图像的边缘清晰度的技术原理。文中不仅介绍了锐化算法的工作方式，还展示了从环境搭建到编码实现再到最终成果展现的具体流程，并讨论了几种常用的边界处理手段及其在cv::filter2D函数中的应用实例。同时提到了几种潜在的研究改善方向及注意事项。 适用人群：对计算机视觉技术感兴趣的研发人员、软件工程师或相关领域的研究学者。 使用场景及目标：旨在教授如何运用OpenCV完成图像锐化，以增强图像轮廓与细节特征提取效率；帮助开发者熟悉滤波技术的实际操作方法，并理解背后的概念与设计思想。 其他说明：此资源强调动手能力，在提供理论的同时，也提供了具体执行指导，适合作为开放项目教程或实验练习的基础材料。
CPA 税法 马兆瑞 基础班 第10章-资产损失税前扣除的所得税处理-PPT-16页.pdf
最新发布
10-10
CPA 税法 马兆瑞 基础班 第10章-资产损失税前扣除的所得税处理-PPT-16页.pdf
css从入门到精通盒模型
10-13
CSS盒模型是指在网页中，每个元素都被看作是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。CSS盒模型分为两种：W3C标准盒模型和IE盒模型。 W3C标准盒模型中，元素的宽度和高度只包括内容的宽度和高度，不包括边框和内边距。而IE盒模型中，元素的宽度和高度包括了内容、内边距和边框的宽度和高度。 要想精通CSS盒模型，需要掌握以下几点： 1. 理解盒模型的概念和原理； 2. 掌握如何设置元素的宽度、高度、内边距、边框和外边距； 3. 熟悉盒模型相关的CSS属性，如box-sizing、padding、border、margin等； 4. 理解不同浏览器对盒模型的解析方式，特别是IE盒模型； 5. 掌握如何使用开发者工具调试盒模型相关的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值