<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <span style="background-color:#FF0000;">行内元素正常状态</span> <span style="background-color:#FF99FF; width:1000px; height:1000px;">行内元素设置宽高没效,width:100px; height:1000px;</span> <span style="background-color:#99FFCC; margin-left:100px; margin-right:100px; margin-top:200px; margin-bottom:200px;">行内元素设置margin-top,margin-bottom无效, margin-left, margin-right有效</span> <br /> <span style="background-color:#CCCC00; line-height:100px;">行内元素设置line-height:100px;有效</span> <span style="background-color:#99FFCC; display:block;">行内元素变成块状,display:block;</span> <span style=" background-color:#FF00FF; display:block; height:200px; width:200px;">行内元素变成块状,display:block,设置宽高:width:200px; height:200px;</span> <span style="background-color:#33FF66; display:inline-block; width:600px; height:200px; line-height:100px; text-align:center; margin:40px;">设置为内联块状inline-block,行内元素既可以设置宽度和高度,也可以设置line-height,text-align,margin</span> <span style="background-color:#33FF66; display:inline-block; width:600px; height:200px; line-height:100px; text-align:center; margin:40px;">设置为内联块状inline-block,行内元素既可以设置宽度和高度,也可以设置line-height,text-align,margin</span> <div>margin重叠问题,上下重叠</div> <div style="width:100px; height:100px; background-color:#003366; margin-bottom:40px; overflow:hidden;">margin-bottom和margin-top重叠</div> <div style="width:100px; height:100px; background-color:#009900; margin-top:40px;">margin-bottom和margin-top重叠</div> <div>margin重叠问题,父子元素重叠</div> <div style="width:1000px; height:100px; background-color:#CCCC00; margin-top:40px;"> <div style="width:500px; height:50px; background-color:#00CC00; margin-top:40px;"> 子元素的margin-top:40px和父元素的maragin-top:40px重叠 </div> </div> <div style="width:1000px; height:100px; background-color:#CCCC00; margin-top:40px; overflow:hidden;"> <div style="width:500px; height:50px; background-color:#00CC00; margin-top:40px;"> 解决方式,父元素加overflow:hidden; </div> </div> </body> </html>
相关推荐
对HTML中的各种元素进行分类,初学者不至于弄混行内元素和块元素
元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: 1、总是在新行上开始 2、宽度的默认为width+margin-left+margin-right+padding-left+padding-right刚好...
想起之前工作面试时,面试官问的一个问题:行内元素有哪些,和块级元素有什么区别?这是一道蛮基础的面试题,但是很多初学者平时只注重标签语义,忽视了标签行内和块级的特性, 因此对于上述问题很有可能答不上来...
关于块级元素和行内元素的一些小知识点的总结
NULL 博文链接:https://maoting.iteye.com/blog/1722563
精品资料欢迎下载
将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范; 2.将块级元素转换行内元素(通过设置display:inline)后再...
前端日记01_行内元素和块级元素欢迎大家来跟胖胖一起xio习!基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习! Hey,这里是胖胖的博客,目前正在学有关前端的知识,有时候会把一些遇到...
HTML+CSS中完全的行内元素(inline element)和块元素(block element) 完整的
文章目录元素的显示方式和转换块级元素行级元素行内块级元素显示方式之间的转化 元素的显示方式和转换 块级元素 块级元素(inline): 块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 ...
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
第三:行内元素与padding,margin 复制代码代码如下: span{ padding:200px; } 影响左右,不影响上下 如何实现 复制代码代码如下: <ul> 第一</li> 第一</li> 第一</li> </ul> 中的li在同一行显示并有上下边距呢, ...
所有的行内、块级元素分类
网友设计与开发中的块元素与行内元素详解,需要的下载看看。
HTML块级元素行内元素学习
行内元素的盒模型 --不支持设置宽度高度 --可以设置padding但垂直方向的padding不会影响布局 --可以设置border、margin同上 --di
行内元素只占内容的宽度,块元素不管内容多少都要占全行,下面为大家介绍下常见的行内元素及块元素有哪些,感兴趣的朋友可以参考下,希望对大家有所帮助
一、常见块级元素有哪些: button,div , dl ,dt ,form , h1 ,h2 ,h3 , h4 ,h5 ,hr ,li ,ul ,table系列,button;...(4)padding和margin一样只有左右有效,上下无效,但是不一样的是元素的范围增大了,但
给行内块元素设置行高无法垂直居中 https://mp.csdn.net/mdeditor/101070653#