本篇文章主要介绍HTML的内联元素、块级元素的分类与布局,以及dispaly属性对布局的影响。

目录

1. HTML 元素分类:介绍内联元素、块级元素的分类。

2. HTML 元素布局:介绍内联元素、块级元素的布局。

3. CSS display属性:介绍此属性对布局的影响。

1. HTML元素分类

HTML元素大题可分为内联(inline)元素和块(block)元素。

1.1 内联元素(inline)

①元素显示方式:"文本方式",1个挨着1个,不独自占有1行;

②内嵌的元素也必须是内联元素:如<a></a>,不能在里面嵌入<div></div>等块级元素;

③包含的标签有:<a>、<input>、<label>、<img> 等等;

1.2 块元素(block)

①元素显示方式:每个元素独自占有1行,相当于前后都带有换行符;

②内嵌的元素可以是内联或块级元素;

③包含的元素有:<h1>~<h6>、<div>、<hr>等等;

2. HTML 元素布局展示

2.1 默认展示(未添加width和height属性)

①HTML元素在浏览器展示的方式是:从上到下,从左到右。

②内联元素,是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区域不够,就会换至下一行。

③块级元素,根据内联元素的展示方式展示大概区域;当浏览器的宽度减少时,会自动扩充块级元素的height属性的值,以容纳内嵌元素的展示。

2.1.1 展示页面

2.2 增加了width属性的展示

2.2.1 块级元素(div)增加了width属性

2.3 结论

①当块级元素没设置width属性时,浏览器宽度的变更,会压缩块元素内嵌元素的排版。

②设置块级元素的width属性时,浏览器的width属性值变更,不会影响到块级元素里的内嵌元素的布局,他们(内嵌元素)受父级块级元素的影响。

    适用范围:导航条(导航条里有多个a标签,可放在一个div里,并给div附加width属性;以免浏览器缩小,造成导航排版乱掉);

3.CSS display属性

3.1 主要的值

1) none :此元素不被显示;
2) block :此元素按块级元素显示:前后带换行符,自己占一行。内联元素 → 块元素
3) inline :此元素按内联元素显示:1个挨着1个。块元素 → 内联元素

3.2 display:block 演示

input3 设为了display:block

3.3 display:inline

div 设为了display:inline

==================================系列文章==========================================

本篇文章:2.2  CSS HTML元素布局及Display属性

Web开发之路系列文章

 

CSS HTML元素布局及Display属性的更多相关文章

  1. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  2. 有哪些经常被误用的 HTML、JavaScript、CSS 的元素、方法和属性?

    一,以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 s ...

  3. 第一章:前端布局之display属性

    css布局学习网站:http://zh.learnlayout.com

  4. CSS学习笔记:display属性

    目录 一.display属性概述 1. 块级元素和行内元素的区别 2.常见的块级元素和行内元素 3. display属性常见的属性值 二.测试display取各属性值的效果 1. 测试inline和b ...

  5. 多栏多列布局(display:flex)

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  6. 【CSS】创建布局

    随着对分离HTML元素的语义重要性与其表现的影响的不断强调,CSS在HTML5元素布局方面的作用越来越重要. 1. 定位内容 控制内容最简单的方式就是通过定位,这允许你使用浏览器改变元素的布局方式. ...

  7. CSS的flex布局(转载)

    我们之前已经学过一些布局模型,比如说浮动,绝对定位等等,但是这些布局方式一是不够简洁,而是使用的范围确实是太窄了. flex模型拥有比较多的属性,来设置多样的布局方式,接下来我们就详细介绍各种属性对布 ...

  8. PHP.4-DIV+CSS标准网页布局准备工作(下)

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  9. 控制span的width属性及display属性值的选择

    给span设置width样式,会发现并没有改变它的宽度,但有时候我们需要给它设置固定的宽度,那么就可以设置它的display样式,改变span的显示模式就好了. span默认显示模式是inline,无 ...

随机推荐

  1. ABP文档 - 目录

    ABP框架 概览 介绍 多层结构 模块系统 启动配置 多租户 集成OWIN 共同结构 依赖注入 会话 缓存 日志 设置管理 时间 领域层 实体 值对象(新) 仓储 领域服务 工作单元 领域事件(Eve ...

  2. SSH实战 · 用spring框架下的hibernatetemplate的get方法出现的问题

    用get方法查询:      return this.getHibernateTemplate().get(Product.class, pid); 出现错误为:id to load is requi ...

  3. Yii1.1的验证规则

    在Yii1.1的数据验证是由CValidator完成,在CValidator中提供了各种基本的验证规则 <?php public static $builtInValidators=array( ...

  4. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  5. 使用Oracle官方巡检工具ORAchk巡检数据库

    ORAchk概述 ORAchk是Oracle官方出品的Oracle产品健康检查工具,可以从MOS(My Oracle Support)网站上下载,免费使用.这个工具可以检查Oracle数据库,Gold ...

  6. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  7. JavaWeb——Listener

    一.基本概念 JavaWeb里面的listener是通过观察者设计模式进行实现的.对于观察者模式,这里不做过多介绍,大概讲一下什么意思. 观察者模式又叫发布订阅模式或者监听器模式.在该模式中有两个角色 ...

  8. [数据结构]——二叉树(Binary Tree)、二叉搜索树(Binary Search Tree)及其衍生算法

    二叉树(Binary Tree)是最简单的树形数据结构,然而却十分精妙.其衍生出各种算法,以致于占据了数据结构的半壁江山.STL中大名顶顶的关联容器--集合(set).映射(map)便是使用二叉树实现 ...

  9. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  10. BPM配置故事之案例9-根据表单数据调整审批线路2

    老李:好久不见啊,小明. 小明:-- 老李:不少部门有物资着急使用,现在的审批流程太慢了,申请时增加一个是否加急的选项吧.如果选加急,金额1000以下的直接到我这里,我审批完就通过,超过1000的直接 ...