块级获取元素宽度实际占用的宽度与它的什么属性有关

来源：蜘蛛抓取(WebSpider) 时间：2017-07-07 09:15 标签： 获取元素的宽度
Web前端入门学习（4）—— 块级元素和行内元素之特征与转换_编程语言_IT/互联网_说评课堂
你的位置： >
> Web前端入门学习（4）—— 块级元素和行内元素之特征与转换 正文
块级元素和行内元素&1.元素的定义&&&&根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。&&&&&div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子，块级元素的特征总结如下：默认独占一行&没有宽度时，默认撑满一排支持所有css命令& & &&&&&&&与之相反，像“span”、“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的，行内元素的特征总结如下：同排可以继续跟同类的标签内容撑开宽度不支持宽高不支持上下的margin和padding代码换行被解析&1.元素的转换display:block -----& 显示为块:使内联元素具备块属性标签的特性display:inline -----& 显示为内嵌:使行块属性标签具备内联元素的特性display:inline-block -----& 显示为行内块状元素行内块状元素的特征：块在一行显示；行内属性标签支持宽高；没有宽度的时候内容撑开宽度问题：1、代码换行被解析；2、ie6 ie7 不支持块属性标签的inline-&3.常见的行内元素&a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* bdo - bidi override* big - 大字体* br - 换行* cite - 引用* code - 计算机代码(在引用源码的时候需要)* dfn - 定义字段* em - 强调* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* kbd - 定义键盘文本* label - 表格标签* q - 短引用* s - 中划线(不推荐)* samp - 定义范例计算机代码* select - 项目选择* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标* sup - 上标* textarea - 多行文本输入框* tt - 电传文本* u - 下划线* var - 定义变量&4.常见的块状元素* address - 地址* blockquote - 块引用* center - 举中对齐块* dir - 目录列表* div - 常用块级容易，也是css layout的主要标签* dl - 定义列表* fieldset - form控制组* form - 交互表单* h1 - 大标题* h2 - 副标题* h3 - 3级标题* h4 - 4级标题* h5 - 5级标题* h6 - 6级标题* hr - 水平分隔线* isindex - input prompt* menu - 菜单列表* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）* ol - 排序表单* p - 段落* pre - 格式化文本* table - 表格* ul - 非排序列表补充乐园：1、vertical-align（垂直对齐）&html&&head&&meta&charset="utf-8"&&style&type="text/css"&&&&&.top&{vertical-align:text-top}&&&&.bottom&{vertical-align:text-bottom}&/style&&/head&&&&&&body&&&&&&&&&&p&这是一幅&img&class="top"&border="0"&src="#"&/&位于段落中的图像。&/p&&&&&&&&&&&p&这是一幅&img&class="bottom"&border="0"&src="#"&/&位于段落中的图像。&/p&&&&&&/body&&/html&运行结果：PS：&img&标签中，属性src没有图片的URL，请自行添加图片地址测试。2、css reset（重设）&CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。&例1：&*{padding:0;margin:0;}&这是最普遍最简单的CSS重设，将所有元素的padding核margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的“分歧”。&&例2：&*{padding:0;margin:0;border:0;}&这是在上一个重设的基础上添加了对border属性的重设，初始值为0.&&例3：&*{padding:0;margin:0;border:0;outline:0;}&在前两个的基础上，添加了outline属性的重设，防止一些冲突。&&例4：&*{&vertical-align:&ba&&&&font-weight:&&&&&font-family:&&&&&font-style:&&&&&font-size:&100%;&&&&outline:&0;&&&&padding:&0;&&&&margin:&0;&&&&border:&0;} 浓缩实用型的css reset重设，该方法出自Perishable Press。本文出自 “小倩加油站” 博客，请务必保留此出处http://cherry360./3945Web前端入门学习（4）—— 块级元素和行内元素之特征与转换原文：http://cherry360./3945
与本文相关的文章【图文】行内元素 4个重要特性详解★_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
行内元素 4个重要特性详解★
上传于|0|0|暂无简介
大小：241.50KB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢块级元素和行内元素的区别
来源：博客园
标准文档流: 是指在不使用其它的排版和定位相关的特殊CSS规则时,各种元素的排列规则,换语话说CSS规定的网页元素默认的排列方式.
 
块级元素
从页面布局和显示外观的角度看,一个页面的布局就类似一篇报纸的排版,需要分为多个区块,大的区块再细分为小区块,块内为多行逐一排列的文字、图片、超链接等内容。这些区块一般称为块级元素，而区块内的文字、图片或超链接等一般称为行级元素。页面这种布局结构，其本质上是由各种HTML标签组织完成的。
与行级元素相比，块级元素具有如下特点：
(1)、前后换行显示，块级元素比较“霸道”，默认状态下独占一整行。
(2)、块级元素常用作容器，即可以再“容纳”其它块级元素和行级元素，而行级元素一般用于组织内容，即只能用于“容纳”文字、图片、超链接等其他行级元素。
(3)、块级元素具有一定的高度和宽度，可以通过设置块级元素的width、height属性来控制。 从页面布局的角度，块级元素又可细分基本块级元素和常用于页面布局的块级元素。
 
基本的块级元素有：
1).标题标签&h1&~&h6&:表示一段文字的主题，并支持多层次的内容结构。
2).段落标签&p& :表示一段文字的内容。
3).水平线标签&hr /&：表示一条水平线。
 
常用于布局的块级元素
1).有序列表&ol&-&li&:表示多个并列的列表项，它们之间有明显的先后顺序。
2).无序列表&ul&-&li&:表示多个并列的列表项，但它们之间没有先后顺序。
3).定义列表&dl&-&dt&-&dd&:表示描述某个术语或产品的定义或解释。
4).表格&table&:表示用于描述一个表格，它使用规整的数据显示。
5).表单&form&:表示用于描述需要用户输入的页面内容。
6).分区&div&:表示用于组织小区块的内容。为了方便管理，数目众多的小区块还需要放到一个大区块中进行布局。分区标签&div&常用于页面布局时对区块的划分，它相当于一个大的容器，可以容纳无序列表、有序列表、定义列表等块级标签。同时也可以容纳段落、标题、文字、图片等内容。
在实际开发中，&div&常用来进行分区，ul-li或ol-li实现无序或有序的项目列表，dl-dt-dd实现图文混编，table-tr-td实现规整数据的显示，由此，在页面局部布局中，形成了如下四种常用的局部块状布局结构：
(1)、div-ul(ol)-li:常用于分类导航或菜单等场合
(2)、div-dl-dt-dd:常用于图文混编场合
(3)、table-tr-td:常用于规整数据的显示场合
(4)、form-table-tr-td:常用于表单布局的场合
 
行级元素
行级标签也称为内联标签、行内标签。使用块级标签为页面“搭建完成组织结构”之后，往每个小区块添加内容时，就需要使用到行级标签.
行级标签:类似文本的显示方式，按“行”逐一显示，常用的行级标签有：
(1)、图像标签&img&:表示用于在网页中显示图片.
(2)、超链接标签&a&:
(3)、范围标签&span&:表示用于标识行内的某个范围.例如:实现行内某个部分的特殊设置以区分其他内容.
(4)、换行标签&br /&:表示强制换行显示.
(5)、输入框标签&input&
(6)、多行文本域标签&textarea&
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动

我要回帖

更多关于 获取元素的宽度 的文章

 

随机推荐