`
zzc1684
  • 浏览: 1224701 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

行内元素和margin叠加问题

阅读更多

 

<!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>

 

分享到:
评论

相关推荐

    行内元素的盒模型1

    3. `inline-block`:结合了行内元素和块级元素的特性,元素在行内排列,但可以设置宽度和高度。 4. `table`:使元素呈现为表格,适用于创建简单的表格布局。 5. `none`:元素将不会在页面上显示,但依然保留其在DOM...

    css中padding、margin两个重要属性的详细介绍及举例说明

    - **行内块元素(Inline-Block Element)**:具有块级元素和内联元素的特点,可以在同一行显示多个元素,同时也能设置宽度和高度。 #### 三、`margin`属性详解 `margin`属性用于控制元素周围的空白区域,它不会占用...

    HTML与CSS面试题.docx

    2. HTML5行内元素和块级元素的区别: 块级元素的display属性是block/table,具有独占一行的特点,可以设置宽高,当不设置宽高时,内容自动撑满。常见的块级元素有div、h1~h6、table、p、ul、ol、audio、video等。...

    div+css浏览器兼容问题解决方法

    /* IE6下解决margin叠加问题 */ } ``` #### 4. `float`元素间的间距问题 在IE中,`float`元素之间的间距可能会出现问题,尤其是在设置了`margin`的情况下。可以采用以下CSS来解决: ```css #box { float: left;...

    2022HTML与CSS面试题.docx

    在布局中,margin的叠加和负值是常见的问题。相邻元素的顶部和底部margin会合并,而负值margin可以用来调整元素的位置。例如,负的`margin-left`会使元素向左移动,而负的`margin-bottom`会使得下方元素上移。 BFC...

    css基础(对应博客内容)

    主要的显示模式有`block`(块级元素)、`inline`(行内元素)和`inline-block`(行内块元素)。块级元素会占据一整行,而行内元素则只占据自身内容的宽度。`display`属性可以用来改变元素的显示模式,从而实现不同...

    css 关于空白叠加

    文档流分为块级元素流和行内元素流两种,块级元素独占一行,行内元素则在行内显示,不会独占一行。 在块级元素中,如果两个元素的上下外边距相邻,则这两个外边距会叠加在一起。这种叠加遵循一定的规则:如果两个...

    css面试题.docx

    外边距塌陷是指两个或多个元素的外边距叠加在一起时,实际占用的空间小于每个元素的外边距之和。解决方法包括使用margin-collapse、padding、border等。 3. 清除浮动的方法 浮动(float)可以使元素脱离文档流,但...

    CSS外边距叠加的问题,CSS教程

    在CSS布局中,外边距叠加(Margin Collapsing)是一个关键的概念,它涉及到元素间的间距处理。当两个或多个垂直外边距相遇时,它们不会简单地相加,而是只保留其中最大的那个,这就是所谓的外边距合并。这一特性在...

    javascript面试题

    **24、行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?** - **行内元素**:和其他元素在同一行显示,不能设置宽度和高度。 - **块级元素**:独占一行显示,可以设置宽度和高度。 - ...

    浏览器兼容问题汇总v1.0

    当相邻元素的`margin`值在垂直方向上发生合并时,就会出现`margin`折叠问题。 **触发条件**: - 元素之间必须是毗邻的,且没有被非空内容、`padding`、`border`或`clear`所分隔。 - 元素必须处于正常流中(非浮动...

    css ref

    - `padding`和`margin`: 控制元素内部和外部的空白。 四、层叠与继承 CSS的“级联”特性意味着不同来源的样式可以叠加,优先级由重要性、特异性及来源顺序决定。继承则允许子元素从父元素继承某些样式,但并非所有...

    CSS中的元素定位方法详解

    常见的值有block(块级元素,如div)、inline(行内元素,如span)、inline-block(同时具备块级和行内元素特性)、none(隐藏元素,不占用空间)等。此外,还有flex和grid值,用于创建弹性布局和网格布局。 3. ...

    DIVCSS模板_css_

    综上所述,"DIVCSS模板"是网页设计中的一个重要工具,结合了HTML `div`元素和CSS样式,旨在提供可复用的布局方案,帮助开发者快速搭建美观且功能完善的网页。通过理解和掌握这些模板,可以显著提高开发效率,同时...

    web前端笔试面试

    HTML5不仅包含了HTML4的所有功能,还引入了新的元素和特性,如拖拽功能、离线存储、多媒体标签等。 **9. HTML语义化的理解?** - 使用具有明确含义的标签(如`&lt;article&gt;`, `&lt;section&gt;`),使页面结构更清晰,有利...

    前端面试题

    **18、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?** - 这些特性共同作用于元素的布局和显示方式,具体表现取决于它们之间的组合关系。 **19、对BFC规范(块级格式化上下文...

    css2.0 css3.0 样式表滤镜手册 经典手册工具

    1. **选择器增强**:新增伪元素和伪类,如`:before`、`:after`、`:hover`、`:active`、`:focus`等,使得样式更具表现力。 2. **多列布局**:通过`column-count`、`column-gap`等属性实现多列布局,简化复杂布局。 3....

    HTML CSS 网页 代码

    3. **盒模型**:包括内容、内边距(padding)、边框(border)和外边距(margin),影响元素尺寸和位置。 4. **布局**:流式布局(block)、行内布局(inline)、浮动(float)、定位(position)等,用于控制元素的...

    css入门笔记

    注意:大部分行内元素不能修改 span,a,i,u,b,s 3.溢出处理 当内容多,元素区域小的时候,会产生溢出的效果,默认都是纵向溢出 属性:overflow,overflow-x,overflow-y 取值: 1.visible 可见的,默认值,溢出...

    CSS2.0中文手册CSS学习好帮手

    - CSS2.0引入了流体布局(block layout)和行内布局(inline layout),以及浮动(float)和定位(positioning)的概念,使开发者能够实现复杂的页面布局。 4. **背景与边框** - 背景:可以设置元素的背景颜色、...

Global site tag (gtag.js) - Google Analytics