文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS 块元素、内联元素、内联块元素

仅供学习，转载请注明出处 块元素、内联元素、内联块元素 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。...块元素 块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为： 支持全部的样式 如果没有设置宽度，默认的宽度为父级宽度100%...那么下面有一个想法，就是div这个块元素能不能设置为同一行呢？ 方法当然是有的，就是转化为 行内块元素，如下： ?...这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。...DOCTYPE html> div{

3.8K20

CSS样式块级元素，行内元素，行内块级元素

前言 HTML元素按布局属性可以分为三种类型：块级元素、行内元素、行内块元素 这篇文章梳理一下他们的区别与联系 一、区别 1.块级元素 属性 默认独占一行 如果不设置宽度，默认是父级的宽度。...即使设置的宽度，也会占用一行 可以设置全部属性 2.行内元素 属性 不会独占一行，可以与其他非块级元素同行 不是全部属性都生效。margin的上下，padding的上下，宽度，高度都不可以设置。...行内元素里面不可以嵌套块级元素 3.行内块元素 属性 不会独占一行，可以与其他非块级元素同行 可以设置全部属性 代码换行时，会出现间隔。...二、联系 可以通过css的display的属性来转换 block 块级元素 inline 行内元素 inline-block 行内块级元素 display: block; // 设置元素为块级元素...display: inline: // 设置元素为行内元素 display: inline-block; // 设置元素为行内块元素 三、常见标签 1.块级元素 div,p,ul,li(列表)

2.1K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】CSS 总结 ② ( CSS 字体文本样式 - 大小 字体 粗细 斜体 颜色 对齐 | CSS 标签显示模式 - 块级元素 行内元素 行内块元素 ) ★

    一、CSS 字体文本样式 1、CSS 字体设置 CSS 字体设置 : 大小设置 : font-size 属性值 的单位 推荐使用 px 像素 , Google 浏览器默认文字大小 16 像素 ; font-size...font-style font-weight font-size/line-height font-family;} 示例 : body { font: italic 400 16px "宋体" } 3、CSS...文本样式 CSS 文本样式 : 文本颜色 : color 属性 可以 定义 文本颜色 , 其颜色值有三种表示方式 : 预定义颜色 : 直接使用 颜色的英文名称 , blue , red , green... span { /* 行内元素 转换为 块级元素 */ display: block; } 行内元素 -> 块级元素 : 在 CSS 样式中设置属性值... 块级元素、行内元素 -> 行内块元素 : 在 CSS 样式中设置属性值 display: inline-block; , 可以 将 块级元素 或 行内元素 转换为 行内块元素 ;

    1.9K10

    你不知道的 CSS 之包含块

    你不知道的 CSS 之包含块 一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。...但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。 好吧，如果你对包含块的知识一无所知，那么系好安全带，咱们准备出发了。...包含块英语全称为 containing block ，实际上平时你在书写 CSS 时，大多数情况下你是感受不到它的存在，因此你不知道这个知识点也是一件很正常的事情。...好了，到这里，关于包含块的知识就基本讲完了。 我们再把 CSS 规范中所举的例子来看一下。...如果你全都能看明白，以后你还能跟别人说你是看过这一块知识对应的 CSS 规范的人。 另外，关于包含块的知识，在 MDN 上除了解说了什么是包含块以外，也举出了很多简单易懂的示例。

    13010

    【CSS】标签显示模式 ② ( 行内元素 | 行内块元素 )

    文章目录 一、行内元素 1、行内元素简介 2、行内元素特点 3、代码示例 二、行内块元素 1、行内块元素简介 2、行内块元素特点 3、代码示例 一、行内元素 ---- 1、行内元素简介 行内元素...DOCTYPE html> 块级元素 <base...---- 1、行内块元素简介 行内块元素 标签 是 特殊的标签 , 可以在 一行内显示多个 , 但是同时也可以为其设置 宽高属性 和 对齐属性 ; 图片标签 : 表单标签 : 单元格标签 : , 表格 table 中的 行 tr 标签 中的 单元格 标签 ; 2、行内块元素特点 行内块元素特点 : 显示样式 : 行内块元素 默认 都在一行中显示 , 每个元素之间会自动添加间隔...; 宽高设置 : 行内块元素 的 默认宽高 是 元素本身的宽高 , 但是也可以设置宽高 ; 样式设置 : 行内块元素 可以 设置 宽度 , 高度 , 内边距 , 外边距 , 行高 等属性 ; 3、代码示例

    1.5K10

    【CSS】标签显示模式 ① ( 标签显示模式 | 块级元素 )

    文章目录 一、标签显示模式 ( 块级元素 | 行内元素 ) 二、块级元素 1、块级元素简介 2、块级元素特点 3、文字块级元素 4、代码示例 一、标签显示模式 ( 块级元素 | 行内元素 ) ---...- 标签显示模式 : 指的是 标签显示的方式 , 标签类型有很多 , 不同的情景使用不同类型的标签 ; 块级元素 : div 标签 独占一行显示 , 对应 块标签 ; 行内元素 : span 标签可以...在一行放置多个进行显示 , 对应 行内标签 ; 二、块级元素 ---- 1、块级元素简介 块级元素 可以 独占一行显示 , 常见的 块级元素 标签 : 标题标签 : , , … ,... ; 段落标签 : ; 块标签 : ; 列表标签 : , , ; 上述标签都会 独占一行显示 ; 2、块级元素特点 块级元素 特点 : 独占一行...100% 宽度 ; 容器特点 : 块级元素 作为 容器 , 可以在其中 放置 块级元素 和 行内元素 ; 3、文字块级元素 特殊的块级元素 : 存放文字内容的 块级元素 , 只能包含文字内容 , 不能包含其它块级元素

    1.8K30

    理解CSS布局和块格式化上下文

    [image.png] 在进行html布局及css编写的时候，你是否遇到过这样的问题： 子元素设置浮动脱离文档流后，父元素无法将其完全包裹 子元素浮动实现两栏布局时，另一个子元素与浮动子元素重叠 垂直方向的外边距...通常我们使用块级格式化上下文（BFC）就能解决。 什么是BFC？...块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。...解决这个问题，使父元素包含浮动元素 .outer { overflow: auto; } [enter image description here] BFC防止垂直外边距重叠 外边距折叠的规则是：当两个块级元素相邻并且在同一个块级格式化上下文时... css .float{ float: left; } [enter image description here] 这时候如果不想要右侧文字环绕浮动文字盒子，在左侧div

    2.1K30

    Java——代码块（普通块、构造块、静态块）

    代码编写中，使用{}声明的程序块就属于代码块，而根据其出现的位置，及声明关键字的不同，分为四种：普通代码块、构造块、静态块、同步代码块（多线程中涉及） 1、普通代码块 在方法中使用{}定义起来的一段代码...将普通代码块中提取到类中使用，就形成了构造代码块。...3、静态代码块 如果代码块中使用了static关键字定义，则该代码块为静态代码块： 在非主类中定义的； 在主类中定义的； 【举例】：非主类中定义的静态块 protected void onCreate...System.out.println("构造块"); } static { //静态块 System.out.println("静态块"); }...以上可以发现，静态块优于主方法先执行。 4、总结 代码块对于现阶段开发意义不大，了解即可。

    2.2K10

    CSS 面试要点：BFC(块级格式化上下文)

    # 常见定位方法 普通流 元素按照其在 HTML 中的先后位置自上而下布局 行内元素水平排列，直到当行被占满后换行 块级元素则会被渲染为完整的一个新行 除了特殊指定外，所有元素默认是普通流定位，即普通流中元素的位置由该元素在...效果与印刷排版中的文本环绕相似 绝对定位 元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响 元素的具体位置由绝对定位的坐标决定 # BFC 格式化上下文（Formatting Context）指页面中的一块渲染区域...块级格式化上下文（Block Formatting Context）属于普通流，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响外面的元素，并且 BFC 具有普通容器所没有的一些特性

    37020

    CSS进阶04-块格式化上下文BFC

    BFC是Web页面的可视化CSS渲染的部分，是块级盒布局发生的区域，也是浮动元素与其他元素交互的区域。 2....BFC生成 CSS2.2文档中注明，满足下列条件之一，会为其内容建立新的块格式化上下文BFC： 浮动，即float的值不为none。...这里只讨论CSS2.2中所列条件，当然CSS2.2中root默认也会生成BFC（不过我一直没找到文档中的出处，如果有找到的同学还请不吝赐教），但是body默认是不生成BFC的。 3....BFC渲染规则 CSS2.2中规定BFC具有如下特征： 在一个块格式化上下文中，盒从包含块顶部开始一个接一个地垂直摆放。两个同胞盒间的垂直距离取决于 margin 属性。...Visual Formatting Model CSS规范 > 10 视觉格式化模型详述 Visual Formatting Model Details CSS > 译文：理解CSS中的块级格式化上下文

    60030

    【CSS】通过定位修改 display 显示模式 ( Display 显示模式转换 | inline-block 改块元素为行内块元素示例 | 为块元素设置浮动 | 为块元素设置定位 )

    一、Display 显示模式转换 ---- display 显示模式 , 可以分为 行内显示模式 ; 块内显示模式 ; 行内块显示模式 ; 将 元素 的显示模式修改为 行内块显示模式 的方法 : 使用...inline-block 可以改变显示模式 , 将 元素的显示模式 改为 行内块 显示模式 ; 使用 浮动 , 也可以 将 块内元素 改为 类似于行内块的显示模式 , 浮动是脱标的 , 不占用标准流元素的位置... 显示效果 : 三、inline-block 改元素为行内块元素示例 ---- 将块级元素 转为 行内块元素 , 行内块元素 如果不设置宽度 , 默认宽度与元素内容宽度一致... 展示效果 : 四、为块元素设置浮动 ---- 将块级元素 设置为 浮动元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : 显示效果 : 五、为块元素设置定位 ---- 将块级元素 设置为 绝对定位元素 , 也能达到与行内块元素相同的效果 ; 代码示例 : <!

    1.2K30

    【CSS】标签显示模式 ③ ( 标签显示模式转换 | 行内元素转换为块级元素 | 块级元素转换为行内元素 | 块级元素、行内元素转换为行内块元素 )

    文章目录 一、标签显示模式转换 1、行内元素转换为块级元素 2、块级元素转换为行内元素 3、块级元素、行内元素转换为行内块元素 一、标签显示模式转换 ---- 1、行内元素转换为块级元素 在 CSS...在 CSS 样式中设置属性值 display: block; , 可以将 行内元素 转换为 块级元素 ; span { /* 行内元素 转换为 块级元素 */ display... 块级元素 展示效果 : 没有设置 display: inline; CSS 样式属性 : 设置 display: inline;...CSS 样式属性 : 3、块级元素、行内元素转换为行内块元素 在 CSS 样式中设置属性值 display: inline-block; , 可以将 块级元素 或 行内元素 转换为 行内块元素 ;...样式属性 : 设置 display: inline-block; CSS 样式属性 : 设置后 , 可以设置 行内块元素 的 宽高 属性 , 其它 边距 对齐 等属性也可以设置 ;

    1.5K10

    java_自由块（静态块和非静态块）

    java中的自由块分为两种： 静态块和非静态块 静态块： 1 public class Test { 2 static int x = 10; 3 //静态块:静态块的执行时机是在class...文件装载的时候;静态块只会执行一次 4 //多个静态块的时候，按出现顺序执行 5 static{ 6 x+=5; 7 } 8 } 非静态块： 1 public class...Test { 2 //非静态块:每次初始化一个对象，都会导致一次非静态块的执行;在构造函数执行之前执行 3 //继承关系：父类的非静态块->父类的构造函数->自己的自由块->自己的构造函数...静态块的执行时机是在class文件装载的时候;静态块只会执行一次 5 //多个静态块的时候，按出现顺序执行 6 static{ 7 x+=5; 8 }...每次初始化一个对象，都会导致一次非静态块的执行;在构造函数执行之前执行 21 //继承关系：父类的非静态块->父类的构造函数->自己的自由块->自己的构造函数 22 { 23

    1.1K20

    普通代码块 静态代码块 构造代码块......傻傻分不清

    代码块的定义 在Java中，使用{ }括起来的代码被称为代码块。 代码块的分类 根据其位置和声明方式不同: ?...代码块的作用 认识了这么多代码块,你是不是也和我一样在好奇它们的适用场景都是什么那?...因此就有了局部代码块 构造代码块 作用在类的定义Body中，作用是给类的部分字段统一初始化： public class Apple { private String size; //构造代码块...也就是说，构造代码块中定义的是不同对象共性的初始化内容。所以理所当然的，构造代码块在构造函数之前执行。...同步代码块 我们把有synchronized修饰符修饰的语句块,称为同步代码块,主要用于解决多线程下的安全问题 synchronized(Object o ){} 现在,你明白它们的作用和使用场景了吧

    95220

    【CSS】图片底部空白缝隙处理 ( 使用居中对齐 顶部对齐 底部对齐 | 将行内元素 行内块元素转为块级元素 )

    一、图片底部空白缝隙问题 在上一篇博客中 , 使用默认的基线对齐 , 会发现 行内块级元素 中的 图片与文字 默认的对齐方式下 , 图片下方有一条缝隙 ; 出现这条缝隙的原因就是 图片的底部 与...keji.jpg" alt="" class="four"> 底线对齐 : 图片底部与文字底线对齐 显示效果 : 下图中 基线对齐 方式 , 图片底部有一块缝隙..., 其它三种对齐方式底部都没有缝隙 ; 三、图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ) ---- 使用 vertical-align 垂直对齐 方式 的前提是 作用对象必须是...行内元素 / 行内块元素 , 如果作用对象不是上述元素 , 则垂直对齐不生效 , 也就是基线对齐不生效 ; 代码示例 : <!...margin: 20px; } .one { /* 基线对齐 : 底部存在缝隙 */ vertical-align: baseline; } .two { /* 转换为块级元素

    2K50

    关于java中普通代码块、构造代码块与静态代码块

    ; { 　　System.out.println("这里是普通代码块B"); } } 执行结果：这里是普通代码块A 　　　　　这里是普通代码块B 2.静态代码块与构造代码块 在java...2 静态代码块不能直接访问静态实例变量和实例方法，需要通过类的实例对象来访问。 构造块：直接在类中定义且没有加static关键字的代码块称为{}构造代码块。...("这里是静态代码块"); } } 执行结果： 这里是静态代码块//优先于主函数 这里是普通代码块A 这里是普通代码块//类中的对象被创建时执行，每创建一次执行一次，在加一句new structure...1"); } { System.out.println("这里是A中的普通代码块2"); } } 执行结果： 这里是静态代码块 这里是普通代码块A 这里是A中的普静态代码块1 这里是A中的普通代码块...1 这里是A中的普通代码块2 这里是普通代码块B 优先级总结：静态代码块>Main()>构造代码块

    1.4K30
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券