2.10-CSS基础--盒子模型（下）

已于 2022-07-27 20:09:20 修改
阅读量124 收藏
点赞数
分类专栏： CSS 文章标签： css 前端
于 2022-07-27 15:23:28 首次发布
本文是秋枫 ~原创文章，转载请附上博文链接！
本文链接：https://blog.csdn.net/weixin_43472938/article/details/126014738
版权
本文详细介绍了CSS中的外边距（margin）属性，包括取值方式（单一值、双值、三值、四值），以及如何设置单方向外边距。同时，讨论了外边距折叠现象，特别是在行内元素中的表现，指出垂直方向上的margin在行内元素中通常无效。此外，还提到了水平方向的margin和padding在布局中的应用。
摘要由CSDN通过智能技术生成

目录

外边框（margin）-取值

  • 作用：设置边框以外，盒子与盒子之间的距离
  • 属性名：margin
    • 常见取值：
取值示例含义
一个值margin：10px;上右下左设置为10px
两个值margin：10px 20px;上下设置为10px、左右设置为20px
三个值margin：10px 20px 30px;上设置为10px、左右设置为20px、下设置为30px
四个值margin：10px 20px 30px 40px;上设置为10px、右设置为20px、下设置为30px、左设置为40px
  • 规则：从上开始赋值，顺时针赋值

外边框（margin）-单方向设置

方向属性效果
水平方向margin-left让当前盒子往右移动
水平方向margin-right让右边盒子往右移动
垂直方向margin-top让当前盒子往下移动
垂直方向margin-bottom让下面盒子往下移动

外边距折叠现象

在这里插入图片描述

行内元素的 margin 和 padding 无效情况

  • 场景：给行内元素设置margin和padding时
  • 结果：
    • 水平方向的margin和padding布局中有效
    • 垂直方向的margin和padding布局中无效

在这里插入图片描述

秋枫 ~
关注
专栏目录
javaEE -17（ 12000 字 CSS3 入门级教程 ）
weixin_73232539的博客
12-16 2273
12000字 CSS3 入门级教程
从前端到全栈-基础能力-css-常用属性
weixin_48292956的博客
05-06 150
1. css颜色属性 1.1. 字体颜色 字体颜色相关属性设置： color：red color：#f90 color:rgb(250,250,0) color:rgba(r,g,b,透明度（0-1）) 1.2. 背景颜色 背景颜色相关属性设置： background:#f90; background:rgb(255,255,0); background:red; background:rgba() 2. 页面布局相关属性 2.1. display display block 设置元素为块状元素 <d
css--浮动、定位、BFC
小白小白从不日别的博客
06-05 985
目录 一、浮动 1.1 Display 1.2 文档流 1.3 浮动 1.4 常见的清除浮动的几种方式 二、定位 2.1 概述 2.2 z-index 2.3 利用定位实现下拉列表效果 2.4 利用定位实现--图片上面定位文字 一、浮动 1.1 Display 可以修改元素的类型， 让块级元素和内联元素相互转换 值 描述 none 此元素不会被显示 block 此元素将显示为块级元素 inline 此元素会被显示为内联元素 i.
第二部分----CSS的基础语法
weixin_30417487的博客
08-06 314
PART-1 CSS的基础常识 一、什么是CSS？ W3C标准中，倡导有3：其一为内容与表现分离，其二为内容与行为分离，其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言。 二、CSS应用的三种方式： 1. 行内样式表 ...
HTML-CSS
qq_30075075的博客
10-16 1196
HTML知识 1. html概念 html全称HyperText Markup Language，翻译为超文本标记语言，它不是一种编程语言，是一种描述性的标记语言，用于描述超文本内容的显示方式。比如字体、颜色、大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：H...
粉阿吉整理(2)之------CSS
王阿星的博客
01-26 313
css基础整理
小K的H5之旅-CSS基础（一）
weixin_30908941的博客
03-04 79
一、什么是CSS W3C标准中，倡导有3：其一为内容与表现分离，其二为内容与行为分离，其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用来表现HTML等文件样式的计算机语言。 二、CSS应用的三种方式 1. 行内样式表 行内样式表将CSS样式与HTML代码完全杂糅在一起，不符合W3C...
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3612
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
WEB前端学习:CSS学习_CSS盒子模型
Dream_ruins的博客
03-24 822
CSS盒子模型 文章目录CSS盒子模型盒子模型一、主要属性1.外边距（margin）1.1、margin（简写属性）2.边框（border）2.1、border-width（简写属性）：边框的宽度2.2、border-top：边框顶部2.3、border-bottom：边框底部2.4、border-right：边框右边2.5、border-left：边框左边2.6、border-style：边框的...
《CSS设计彻底研究》【中文PDF＋源代码】
05-22
《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用了“探索式”的讲解方法，对于一个问题，例如标准流、浮动、定位等规律，均通过一系列动手实验，使读者自己就能够非常自然...
CSS基础知识：可变、流动与弹性宽度的圆角框设计
CSS的盒子模型描述了元素的边框、内填充和内容区域，影响元素的尺寸和布局。 2.6 盒子的浮动与定位 浮动元素允许元素脱离文档流，定位则可以精确控制元素在页面上的位置。 2.7 文字与图像 CSS可以控制文本样式，如...
重温前端基础（一） HTML、CSS、H5C3
←か淡定☆ ヾ 的博客
10-10 1702
目录0. WEB 标准构成1. HTML1.1 HTML概念1.2 超文本含义1.3 页面语言1.4 字符集1.5 标签语义化1.6 常用标签1.7 图像标签 img1.8 链接标签1.9 锚点定位 0. WEB 标准构成 构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。 标准 说明 结构 结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS
HTML5、CSS、JS基础
qq_49101841的博客
03-03 2321
学习笔记
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1394
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
CSS彩虹按钮设计demo
m0_53253682的博客
10-09 640
【代码】CSS彩虹按钮设计demo。
CSS——文字打字机效果
懒羊羊大王的博客
10-06 1588
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
CSS弹性布局
2401_82561004的博客
10-09 1219
Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex布局。
【CSS3】css开篇基础（2）
最新发布
Easonmax的博客
10-10 951
常见的行内元素有、、、、、、、、、等,其中标签是最典型的行内元素。常见的块元素有~、、、、、等,其中 标签是最典型的块元素。网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页，这时候就要用到元素显示模式。子元素选择器是 CSS 中的一种选择器，用于选择某个元素的直接子元素。
CAMS2.10-R0121 升级步骤详解
"CAMS2.10-R0121 升级指导说明书" 本文档是华为3Com技术有限公司发布的"CAMS2.10-R0121 升级指导说明书"，旨在为用户详细说明如何从CAMS1.20-R3105和CAMS2.10-R0119及其补丁版本升级到CAMS2.10-R0121。CAMS，全称为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秋枫 ~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值