首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS】盒子模型外边距 ② ( 盒子模型水平居中 | 盒子内文字、行内元素、行内块元素居中对齐 )

文章目录 一、盒子模型水平居中 1、盒子水平居中设置 2、未居中的代码示例 3、居中的代码示例 - 分别设置左右边距 4、居中的代码示例 - 复合写法设置左右边距 5、居中的代码示例 - 复合写法设置左右边距...2 二、盒子内文字、行内元素、行内块元素居中对齐 一、盒子模型水平居中 ---- 1、盒子水平居中设置 如果要 一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 : 盒子模型...- 复合写法设置左右边距 外边距复合写法 : 设置 1 ~ 4 个 值 , 单位 像素 px ; 设置 1 个值 : 设置 上下左右 外边距 ; 设置 2 个值 : 设置 上下、左右 外边距 ; 设置...3 个值 : 设置 上、左右、下 外边距 ; 设置 4 个值 : 设置 上、右、下、左 外边距 ; 使用 margin: auto; , 四个边距都设置为 auto , 此时左右边距自动就是 auto...px ; 设置 1 个值 : 设置 上下左右 外边距 ; 设置 2 个值 : 设置 上下、左右 外边距 ; 设置 3 个值 : 设置 上、左右、下 外边距 ; 设置 4 个值 : 设置 上、右、下、左

1.1K20

【原创】CSS中的盒子模型以及设置元素居中

盒子模型: css中每个元素都是一个盒子,它由最内侧“内容区(content)”内侧“内边距(padding)”外侧“边框(border)”,以及最外侧“外边距(margin)”组成 内容区(content...): 设置方法: 1.分别设置内边距的上下左右; padding-top: 设置内边距上端属性值 padding-bottom: 设置内边距下端属性值...20px 30px; c)设置两个属性值,两个属性值分别为 上下 左右,如: padding: 10px 20px; d)设置一个属性值...块级元素左右居中(居中整个块级元素,非块级元素文字): 选中需要左右居中的元素,然后设置左右外边距值为“auto”即margin:0,auto; 注意:需要设置左右居中的块级元素,必须设置宽度属性,且不能脱离文档流...元素上下左右居中(使用相对定位是实现。)

95720
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    盒子模型(Box Model)「建议收藏」

    所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。...= 内容的宽度和高度 + 内边距 + 边框 ---- padding不影响盒子大小情况 如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子。...margin就是控制盒子盒子之间的距离 块级盒子水平居中 可以让一个块级盒子实现水平居中必须: 盒子必须指定了宽度(width) 然后就给左右的外边距都设置为auto, 常见的写法,以下下三种都可以...- margin-left: auto; margin-right: auto; - margin: auto; - margin: 0 auto; 文字居中盒子居中区别 盒子内的文字水平居中是...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站立刻删除。

    67020

    【CSS】CSS 总结 ⑤ ( CSS 盒子边框 | CSS 盒子模型内边距 | CSS 盒子模型外边距 | CSS 盒子模型圆角边框 | CSS 盒子模型阴影 ) ★

    一、CSS 盒子边框 1、盒子模型 HTML 的 一个布局 可以看做一个 矩形的 盒子模型 , 该 盒子模型 是一个用于 容纳 标签元素 的容器 ; 盒子模型 组成 : 由内到外顺序如下 : 内容 Content...设置 border-collapse: collapse; CSS 样式 , 可以 相邻的边框 合并在一起 ; 二、CSS 盒子模型内边距 概念 内边距 是 盒子 的 边框 与 内容 之间的 间隔长度...auto , 此时左右边距自动就是 auto , 也可以实现水平居中 ; /* 盒子水平居中 */ margin: auto; 使用 margin: 0 auto; , 将上下边距设置为 0 像素 ,...左右边距设置为 auto ; /* 盒子水平居中 */ margin: 0 auto; 3、盒子水平居中设置 如果要 一个 块级元素 的 盒子模型 设置为 水平居中 样式 , 需要设置以下两项 :...盒子模型 的 宽度 必须设定 , 也就是 width 属性 ; 盒子模型 的 左外边距 和 右外边距 必须 设置为 auto 值 ; 如果没有设置宽度 , 块级盒子自动充满父容器 , 因此 如果要设置水平居中

    31910

    CSS快速入门(三)

    (0-1)*/ /*文字对齐*/ text-align: center; /*居中展示,是对于标签所占多大,来居中,不是占浏览器中间*/ /*文字装饰(重点)*/ text-decoration: line-through... ---- 盒模型 在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着,理解这些“盒子”的基本原理,是我们使用CSS实现准确布局、处理元素排列的关键; 块级盒子(Block...如果一个盒子对外显示为 inline,那么他的行为如下: 盒子不会产生换行。 width 和 height 属性将不起作用。...我们通过对盒子display 属性的设置,比如 inline 或者 block ,来控制盒子的外部显示类型; display属性 行内和块级标签强行改变 div { display...为了增加一些额外的复杂性,有一个标准的和替代(IE)的盒模型; 盒模型的各个部分 CSS中组成一个块级盒子需要: Content box: 这个区域是用来显示内容,大小可以通过设置 width 和 height

    1.3K20

    大型编程电视剧连载 | CSS知识点硬核整理归纳(二)

    最后把网页元素比如文字图片等等,放入盒子里面。 5.1、盒子模型(Box Model) 所谓盒子模型,就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。...属性 作用 margin-left 左外边距 margin-right 右外边距 margin-top 上外边距 margin-bottom 下外边距 5.4.1、块级盒子水平居中 可以让一个块级盒子实现水平居中必须...} 5.4.2、文字居中盒子居中区别 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐 块级盒子水平居中 左右margin 改为 auto text-align...所以我们尽量给只给一个盒子添加margin值。 ?...浮动:让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。 定位:盒子定在浏览器的某一个位置——CSS 离不开定位,特别是后面的 js 特效。

    1.8K20

    【前端网页】CSS样式表进阶之盒子模型

    本期介绍 本期主要介绍CSS样式表进阶之盒子模型 文章目录 1. 什么是盒子模型 2. 边框:border(回顾) 3. 内边距:padding 4. 外边距:margin 5. ...单元素-水平居中 7. 相邻元素-外边距合并 8. 父子元素-外边距塌陷 1. 什么是盒子模型 所有的 HTML 元素,我们都可以看成一个四边形,即一个盒子。...用 CSS 来设置元素盒子的 内边距、边框 和 外边距 的样式的方式, 相当于设置盒子的样式,所以我们将其称之为 盒子模型 2. ...dashed dotted) 颜色 solid: 实体线 double: 双实体线 dashed: 虚线 dotted: 点虚线 示例: 通用性设置: 一次性设置上下左右边框样式...只有一个,设置所有。 6. 单元素-水平居中 通过设置左右 外边距自动计算,我们可以控制元素居中

    64330

    10.9 块级盒子的内外边距:如何使用box-sizing重新定义盒子模式?

    块级盒子的内外边距:如何使用box-sizing重新定义盒子模式? 外边距 margin margin 属性为给定元素设置所有四个(上下左右)方向的外边距属性。...指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。 指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的外边距。 外边距的作用:使块级元素居中?...:如何查看盒子尺寸?...: 使用box-sizing重定义盒子模式 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。...也就是说,如果你一个元素的width设为100px,那么这100px会包含它的border和padding,内容区的实际宽度是width减去(border + padding)的值。

    82810

    【融职教育】Web前端学习 第2章 网页重构6 盒子模型

    一、盒子模型概述 我们可以把一个网页分解成一个个区域,大的区域内部可以嵌套小的区域,就像融职教育的首页一样。...每个区域都可以看做一个盒子一个网页就是由一个个大大小小的盒子嵌套而成。...盒子之间或内外是有边距的,通过以下属性控制盒子的边距 margin:外边距 padding:内边距 盒子模型还会涉及到我们之前学过的一个属性 border:设置元素的边框 二、盒子模型属性讲解 margin...关于margin属性还有一个常用的技巧,可以块元素水平居中展示(关于块元素的更多内容,会在下一节讲解)。...*/ 6 margin:0 auto; 7 } 左右外边距的值设置为auto,元素就会根据其父级容器的实际宽度,元素左右两边的外边距设置为相同的值,这样元素就实现了水平居中的效果。

    33520

    【融职培训】Web前端学习 第2章 网页重构6 盒子模型

    一、盒子模型概述 我们可以把一个网页分解成一个个区域,大的区域内部可以嵌套小的区域,就像融职教育的首页一样。...每个区域都可以看做一个盒子一个网页就是由一个个大大小小的盒子嵌套而成。...盒子之间或内外是有边距的,通过以下属性控制盒子的边距 margin:外边距 padding:内边距 盒子模型还会涉及到我们之前学过的一个属性 border:设置元素的边框 二、盒子模型属性讲解 margin...关于margin属性还有一个常用的技巧,可以块元素水平居中展示(关于块元素的更多内容,会在下一节讲解)。 定义一个class为box的div,设置样式如下: ?...左右外边距的值设置为auto,元素就会根据其父级容器的实际宽度,元素左右两边的外边距设置为相同的值,这样元素就实现了水平居中的效果。

    34020

    Web前端学习 第2章 网页重构6 盒子模型

    一、盒子模型概述 我们可以把一个网页分解成一个个区域,大的区域内部可以嵌套小的区域,就像融职教育的首页一样。...每个区域都可以看做一个盒子一个网页就是由一个个大大小小的盒子嵌套而成。...盒子之间或内外是有边距的,通过以下属性控制盒子的边距 margin:外边距 padding:内边距 盒子模型还会涉及到我们之前学过的一个属性 border:设置元素的边框 二、盒子模型属性讲解 margin...关于margin属性还有一个常用的技巧,可以块元素水平居中展示(关于块元素的更多内容,会在下一节讲解)。...*/ 6 margin:0 auto; 7 } 左右外边距的值设置为auto,元素就会根据其父级容器的实际宽度,元素左右两边的外边距设置为相同的值,这样元素就实现了水平居中的效果。

    31900

    盒子模型(CSS重点)

    所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。...盒子模型(Box Model) 所有的文档元素(标签)都会生成一个矩形框,我们成为元素框(element box),它描述了一个文档元素在网页布局汇总所占的位置大小。...值的个数 表达意思 1个值 padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素 2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px;...外边距实现盒子居中 可以让一个盒子实现水平居中,需要满足一下两个条件: 必须是块级元素。...盒子水平居中 左右margin 改为 auto text-align: center; /* 文字居中水平 */ margin: 10px auto;  /* 盒子水平居中 左右margin

    1.6K10

    【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )

    按钮宽高 120x36 像素 左右上下 各有 1 像素边框 各减去 2 像素 最终内存尺寸为 118x34 像素 */ width: 118px; height: 34px; /* 上下左右...按钮宽高 120x36 像素 左右上下 各有 1 像素边框 各减去 2 像素 最终内存尺寸为 118x34 像素 */ width: 118px; height: 34px; /* 上下左右...10px; } /* Banner 条右侧 课程表 无序列表 列表项样式 */ .course-bd li { /* 列表项高度是 60 像素, 文字与顶部有 10 像素间隔 这里列表项设置成..., 其中间隙 15 像素 228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 ,...按钮宽高 120x36 像素 左右上下 各有 1 像素边框 各减去 2 像素 最终内存尺寸为 118x34 像素 */ width: 118px; height: 34px; /* 上下左右

    4.2K30

    CSS盒子模型

    ; 设置圆角 borde-radius:值; 一个值控制的上左 上右 下右 下左; borde-radius:50% 内边距padding padding的取值可以是1-4个 一个值:控制整个上下左右...,并不会对盒子的大小造成影响(特殊情况例外) 3.行内元素也不要给上下的margin 4 auto 实现块级元素水平居中显示 margin: 0 auto; eg: <!...background-color: red; margin: 0 auto; } 盒子水平居中...text-align和margin区别 两者都可以是实现水平居中 text-align是控制盒子内部的文字或者内部的行内块 margin:0 auto的不同 前者控制的是盒子本身 实现清除内外边距...在实际工作中,我们很难直接得到盒子的内容的大小,所以我们会直接整个盒子量出来,在后续如果需要添加padding的情况下 一定要减掉 padding。

    75830

    前端知识点总结(html+css)(上)

    文章分为上(html,css)中(js)下(vue)三部分。 html篇 html应该是前端中最简单的知识点了,标签用着用着就熟记于心,在面试过程中对html的提问更是少之又少,话不多说,上干货。...float不为none position不为static或者relative display属性为inline-block、flex、table-cell等 BFC作用 可以避免外边距重叠的问题,两个元素放在不同的...高度塌陷 原因 很多情况父盒子不方便给高度,子盒子浮动脱离文档流不占位置,使父盒子高度为0 解决方案 在浮动元素末尾加一个空标签,设clear:both 父级添加overflow:hidden 使用...13. div水平垂直居中的几种方式。...子元素未知:display:flex;justify-content: center;align-items: center 子元素用绝对定位,上下左右为0,margin:auto,父:relative

    29510
    领券