元素类型知多少

元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。

块元素

也称为行元素,布局中常用的标签如:div p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:

  a、支持全部的样式

  b、如果没有设置宽度,默认宽度为父级宽度的100%

  c、盒子占据一行、即使设置了宽度

内联元素(行内元素)

布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为:

  a、支持部分样式(不支持宽、高、margin上下、padding上下)

  b、宽高由内容决定。

  c、盒子并在一起

  d、代码换行,盒子之间会产生间距。

  e、子元素是内联元素,父元素可以用text-align属性设置子元素的水平对齐方式,用line-height属性值设置垂直对齐方式

解决内联元素间隙的方法:

  a、去掉内联元素之间的换行

  b、将内联元素的父级设置font-size为0,内联元素自身再设置font-size

内联块元素

也叫行内块元素,是新增的元素类型,现有元素没有归于此类别的,img和input元素的行为类似这种元素,但是也归类于内联元素,我们可以用dispaly属性将块元素或者内联元素转换为这种元素。它们在布局中的表现行为:

  a、支持全部样式

  b、如果没有设置宽高,宽高由内容决定

  c、代码换行,盒子会产生间距

  d、子元素是内联块元素,父元素可以用text-align属性设置子元素水平对齐方式,用line-height属性值设置子元素的垂直对齐方式。

这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接将内联元素,而不用块元素转化了。

display属性

用来设置元素的类型及隐藏,常用的属性有:

  a、none 元素隐藏且不占位置

  b、block 元素以块元素显示

  c、inline 元素以内联元素显示

  d、inline-block 元素以内联块元素显示。

元素类型实际应用

时间: 2024-10-12 10:06:00

元素类型知多少的相关文章

CSS的元素类型

前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素.行内元素和行内块元素.本文总结这三种显示方式的特征和区别. 1 写在前面 最近在整理cnblogs上页面的样式,默认右侧[随笔分类]中的标签是每行显示一个,而我想把右侧[随笔分类]中的标签设置为一行显示多个标签,至于显示多少个则随标签的大小而定,并且每个标签在鼠标放上去的时候会有背景颜色的变化.效果如下图. 下面我们就来分析一下如何让左边的标签显示方式变为右边这样的吧 2 块元素

Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "</url-pattern>" 终止

1.错误描述 严重: Parse Fatal Error at line 41 column 24: 元素类型 "url-pattern" 必须由匹配的结束标记 "</url-pattern>" 终止. org.xml.sax.SAXParseException; systemId: jndi:/localhost/SpringMVCH/WEB-INF/web.xml; lineNumber: 41; columnNumber: 24; 元素类型 &qu

浅谈html中的元素类型

一.元素的分类 根据css显示分类,XHTML元素被分为 三种类型:块状元素,内联元素,可变元素 1.块级元素特点 a.块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域, B:默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象:默认情况下,块状元素会按顺序自上而下排列. C:块状元素都可以定义自己的宽度和高度. D:块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素.我们可以把这种容器比喻为一个盒子. 2.内联元素(inlin

js:给定两个数组,如何判断他们的相对应下标的元素类型是一样的

题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array.prototype.sameStructureAs ,会有下面的结果: [1,1].sameStructureAs([2,2]) // true [1,[1,1]].sameStructureAs([2,[2,2]]) // true [1,[1]].sameStructureAs([[2],2]

元素类型

元素类型 一.XHTML元素分类根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element) 1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等: 2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象:默认情况下,块状元

xhtml三种元素类型

xhtml三种元素类型:块级元素/内联元素/可变元素 块级元素:独占一行.可自定义自己的宽度和高度.作为其他元素的容器,可容纳其他内联元素和块级元素,喻做一个盒子.内联元素:始终以行内逐个显示.不能设置宽高,宽高由内容支撑.可定义padding/margin/border/background.可变元素:根据上下文确定是块级元素还是内联元素.注:不同的元素类型之间可以通过display属性来实现转换. 举例:块级元素:div/h1/p/form/hr/ifrom/......内联元素:span/

selenium判断元素类型

在做级联的下拉框时发现第一次选择了下拉框(如省份),第二个下拉框可能是输入框,也可能是下拉框,这个时候就需要判断他的元素类型,来做判断 图1 图2 原理很简单:获取控件的html文件内容,拿到内容后在做判断 图1的html元素为: <input type="text" name="province" class="choiceCountry inputText long js_choiceState" value=""&

《Programming WPF》翻译 第5章 4.元素类型样式

原文:<Programming WPF>翻译 第5章 4.元素类型样式 命名样式非常有用,当你得到一组属性并应用到特点的元素上.然而,如果你想要应用一个统一的样式到所有确定元素类型的实例,设置TargetType而不用一个Key,如示例5-16所示. 示例5-16 <!-- no Key --> <Style TargetType="{x:Type Button}">   <Setter Property="FontSize"

MyBatis 元素类型为 &quot;configuration&quot; 的内容必须匹配 &quot;.....

修改MyBatis配置文件时,添加typeAliases节点,报了一个BuilderException: org.apache.ibatis.exceptions.PersistenceException: ### Error building SqlSession. ### Cause: org.apache.ibatis.builder.BuilderException: Error creating document instance. Cause: org.xml.sax.SAXPars