内联元素的盒模型

最新推荐文章于 2023-11-17 15:27:26 发布
最新推荐文章于 2023-11-17 15:27:26 发布
阅读量349 收藏 2
点赞数 1
分类专栏： html+css笔记 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45821251/article/details/109264383
版权

内容区：
内联元素不能设置内容区的width和height(img和iframe除外)

水平方向内边距
内联元素可以设置水平方向的内边距还会影响布局

垂直方向内边距
内联元素可以设置垂直方向内边距，但是他不会影响页面布局，他只是显示效果发生变化(img和iframe除外)
在这里插入图片描述
span设置了上下内边界，但是上面的超过了上边页面边界隐藏进去了，下面的还把div覆盖住了

边框
内联元素也可以设置边框，但是他的边框也是只能影响水平方向的布局，不能影响垂直方向的布局，就跟上面的内边距一样

外边距
内联元素也是只支持水平方向的外边距设置，不支持垂直方向的外边距的设置(img和iframe除外)。
水平方向的外边距不会重叠，而是求和

你好牛蛙
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
内联盒模型基本概念
liuhao9999的博客
03-23 431
（1）内容区域（content area）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子 （character box）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些 元素，内容区域可以看成元素自身。 （2）内联盒子（inline box）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒 子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。
内联元素的盒子模型
wuxiao18的博客
06-12 391
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ background-color: #bfa; ...
前端学习 -- Css -- 内联元素的盒模型
A08110123的博客
04-24 108
内联元素不能设置width和height； 设置水平内边距,内联元素可以设置水平方向的内边距：padding-left，padding-right； 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局； 为元素设置边框,内联元素可以设置边框，但是垂直的边框不会影响到页面的布局； 水平外边距内联元素支持水平方向的外边距； 内联元素不支持垂直外边距； 为右...
CSS中内联元素的盒子模型特点？行内元素，块元素，行内块元素之间的相互转换
王春燕的博客
04-11 345
行内元素的盒模型 从这几点分析：内容区、内边距 、边框 、外边距 1: 不能设置width和height，被内容撑开 2: 可以设置padding，但垂直方向padding不会影响页面的布局，不会挤别人 3: 可以设置边框，但是垂直的边框不会影响到页面的布局，不会挤别人 4: 可以设置水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和，但不支持垂直外边距 display 用来设置元素显示的类型 可选值： ...
CSS 盒模型、块状元素与内联元素、CSS选择器
09-25
### CSS盒模型、块状元素与内联元素、CSS选择器 #### 一、CSS盒模型 CSS盒模型是理解CSS布局的关键概念之一。它定义了网页元素如何根据其CSS属性进行渲染。盒模型主要由四个部分组成： - **内容（Content）**：这...
定义内联元素span的最小高度问题
09-28
这是因为内联元素默认不会形成一个盒模型，它们只占据包含文本的实际宽度，高度则由内容决定，无视额外指定的宽度和高度值。 当面临给`span`定义宽度和高度的需求时，我们需要调整`span`的行为，使其表现出类似块级...
网页设计学习教程 CSS盒模型
09-25
**内联元素的盒模型**：虽然内联元素（如`<span>`、`<a>`）不像块级元素那样默认占据整行，但它们也有盒模型。内联元素的宽度由内容决定，可以有内边距和边框，但外边距只会影响同一行内的元素，不会引起换行。 ...
CSS教程之CSS盒模型
09-27
4. **内联元素的盒模型** - 内联元素如`span`和`a`不占据整行，它们的宽度由内容决定，内边距和边框对布局的影响比块级元素小。内联元素的外边距不会产生水平间距，但会产生垂直间距。 5. **Firebug工具** - ...
css---内联元素的盒子模型
chen_zan_yu_的博客
05-01 415
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: red; } .box1{ wi...
html 盒子模型基础（内联元素的盒模型）（二）
余正源的博客
02-07 1462
1.内联元素的盒子模型 .box1 { width: 100px; height: 100px; background-color: yellowgreen; } .s1 { /*设置背景颜色*/ background-color: yellow; /*设置宽和高*/ /*width:
CSS的盒模型及元素分类（块级元素、内联元素、内联块状元素）
AlexYBB的专栏
09-12 2306
CSS的盒模型及元素分类（块级元素、内联元素、内联块状元素）
CSS内联样式盒模型
一李
10-15 330
内联元素的盒子 内联元素不能设置width和height(没用） 可以设置水平方向的内边距。 可以设置垂直方向的内边距，但是不会影响页面的布局。 可以设置边框，但是垂直方向的边框不会影响布局。 支持水平方向的外边距（水平方向的不会重叠，会求和），不支持垂直方向的外边距。 .s1{ width:200px; height: 200px; /*padding...
Web前端学习笔记——内联元素的盒模型
weixin_43121163的博客
02-21 180
1、盒模型的分类 内容区（content）、内边距（padding）、边框（border）、外边距（margin） 内容区：内联元素不能设置width和height。 内边距：内联元素可以设置水平方向的内边距；内联元素可以设置垂直方向的内边距，但是不会影响页面的布局。 边框：内联元素可以设置边框，但是垂直的边框不会影响到页面的布局。 外边距：内联元素支持水平方向的外边距，水平方向的外边距不会重叠，...
CSS第三章：6.内联元素的盒子模型；display属性
要思考，要努力
04-28 352
总览1.内联元素不能设置宽度和高度2.内联元素在垂直方向上，padding、border、margin都不会影响其布局3.内联元素可以被设置成块元素4.内联元素的盒子模型，在水平方向上marigin是不能叠加的，这和块的盒子模型在垂直方向上margin的叠加机制不同。 一、内联元素盒子模型 · 实操 1.HTML代码： 2.CSS代码： 3.显示效果： 二、display 属性 1.功能： 1.1 可以让 内联元素 和 块元素 相互转换 1.2 可选值： · inline：将元素设置为 内联元
内联样式的盒模型
qq_36400089的博客
12-02 222
盒模型：内边距，外边距，边框，内容区 先看效果 内边距：可以设置左右内边距 上下内边距可以设置但是不改变页面布局 外边距：左右外边距可以设置 上下外边距不可以设置 不能设置width height 不独占一行 ...
css_盒子模型:块级盒子/内联盒子_显示类型/盒模型border可见性
xuchaoxin1375的博客
01-09 1562
文章目录块级盒子（Block box） 和 内联盒子（Inline box）内部和外部显示类型(display属性) 块级盒子（Block box） 和 内联盒子（Inline box） 块级盒子（Block box） 和 内联盒子（Inline box） 在 CSS 中我们广泛地使用两种“盒子” —— 块级****盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流（page flow）和元素之间的关系方面表现出不同的行为: block盒子会表现出以下行为:
内联元素的盒模型、文档流、浮动和定位
summer199605的博客
03-26 309
我真的不知道我是不是第一个发博客整理css中position的人，也不是在说自己很厉害的样子，就是想知道谁会整理这么简单的东西啊！！可是谁能想到我会被问这么简单的问题啊！！！！！而且谁又能想到我确确实实不会啊！！！！！！！！！！！ 我都说了css不记得了你还问，结果我回答不上来了吧！！！去你妈的！！！！！ 所有主流浏览器都支持 position 属性。 注释：任何的版本的 Internet Exp...
css之内联元素和块元素、盒子模型
最新发布
noveto的博客
11-17 157
1.内联元素和块元素。2.内联元素的盒模型。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值