深入css中的margin

【深入css中的margin】的更多相关文章

深入理解css中的margin属性

深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况第一部分:margin--基础知识要介绍margin的基础知识,我们不可回…

深入css中的margin 第一:margin-top css代码(元素没有任何定位的情况下,并且元素默认为block) <style type="text/css"> /*这里值得注意的一点是: 所以当inner元素设置margin-top的时候它margin的对象是我们的body 而不是我们的outer元素要控制我们的inner 只能使用我们的padding: 或则把inner改成是inline-block: */ .inner{ width:100px; heig…

解说css中的margin属性缩写方式

<html> <body> <div style="border: 1px solid red;"> <div style="border: 1px solid blue; margin: 20px;"> margin: 20px;(上.下.左.右各20px.) </div> </div> <div style="border: 1px solid red;">…

深入理解CSS中的margin

1.css margin可以改变容器的尺寸元素尺寸可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo…

CSS中上下margin的传递和折叠

CSS中上下margin的传递和折叠 1.上下margin传递 1.1.margin-top传递为什么会产生上边距传递? 块级元素的顶部线和父元素的顶部线重叠,那么这个块级元素的margin-top值会传递给父元素. 示例代码:给inner盒子设置margin-top: 20px;. .reference { width: 100px; height: 100px; background-color: #f00; color: #fff; } .box { width: 200px; heig…

CSS中的margin、border、padding区别

CSS padding margin border属性详解图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin…

CSS中设置margin:0 auto; 水平居中无效的原因分析

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题,margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应,其实就是水平居中的意思,在这里说两个典型的错误引起的不能居中的问题: 1.没有设置宽度 <div style="margin:0 auto;"></div> 看看上面的代码,根本没有设置DIV的宽度,如何根据宽度自适应呢?新手比较容易忽略的问题. 2.没声明DOCTY…

[html]CSS中的margin、border、padding区别

图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互影响.…

CSS中的margin、border和padding的区别

aaarticlea/gif;base64,R0lGODlhuQEbAbMAAP8AM8zMzGZmYszMmZmZZkIP/5qE/8zM/wICApmZmf//zP///wAAAAAAAAAAAA…

CSS中的margin和padding的用法和区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10px; 四边统一内边距 (6)padding:10px 20px; 上下.左右内边距 (7)padding:10px 20px 30px; 上.左右.下内边距 (…

xaml与CSS中的Margin顺序不同

XAML中 Margin:左上右下 CSS中 Margin:上右下左…

深入理解CSS中的margin负值

前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单,实际上却蛮复杂,本文就margin负值作详细介绍和梳理 [注意]关于margin部分的基础知识移步至此表现虽然margin可以应用到所有元素,但display属性不同时,表现也不同 [1]block元素可以使用四个方向的margin值 [2]inline元素使用上下方向的margin值无效 […

CSS中关于margin的理解误区

思考一在以前,我对于margin的理解是这样的,此处用margin-top举例:指的是离相邻元素之间的距离. 但是实际是:相对于自身原来的位置偏移. 举个例子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <!-- 规定字符集的编码为u…

css中常见margin塌陷问题之解决办法

塌陷问题当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <div class="box1">box1</div> 4 <div class="box2">box2</div> 5 </body> 6 /*CSS部分*/ 7 <style> 8 *{ 9 margi…

css中的margin（外边框）、border（边框）、padding（填充）的区别

Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. Content(内容) - 盒子的内容,显示文本和图像. 直接上图:最上方的导航栏,右下角的模型图:导航栏的肉色对着右下角的肉色,代表的是margin(外边框).依次如下.…

使用CSS中margin和padding的基础和注意事项

在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备以后使用. 一.首先了解CSS盒模型 Box Model 通过这个CSS盒模型模型就很容易理解Margin.padding和Border.. W3C定义的盒模式如下: width和height定义的是Content部分的宽度和高度,padding border margin的宽度依次加在外面.背景会…

CSS 中，用 float 和 position 的区别是什么？

CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和position这两者并没有孰好孰不好的问题,两者按需使用,各得所需的效果.float从字面上的意思就是浮动,这种在印刷排版之类中可能解释的更加贴切.float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.并且float这也是目前使用最多的网页布局方式.不过需要注意…

【深入BFC】关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 简单来讲,我们可以把它理解为,我们在进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,该元素成为一个隔离了的独立容器,元素内部元素会垂直的沿着其父元素的边框排列,和外部元素互不影响 .比如浮动元素会触发BFC,浮动元素内部的子元素主要受到该浮动元素的影响,而两个浮动元素之间是互不影响的. 在…

CSS中margin和padding的区别

在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和margin常用的用法一.padding 1.语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 (3)padding-top:10px; 上内边距 (4)padding-bottom:10px; 下内边距 (5)padding:10…

html/css 盒子布局 Margin 、Padding 、border 以及清除浮动的知识（学习HTML过程中的小记录）

html/css 盒子布局 Margin .Padding .border 以及清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽度"的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. Height 是"高度"的意思,CSS中height指的是内容的高度,而不是盒子的高度 Padding 是"内边距"的意思 Border 是"边框" Marg…

css中margin:0 auto没作用

很多初学制作网页的朋友,可能会遇到的一个常见问题,就是在CSS中加了margin:0 auto;却没有效果,不能居中的问题!margin:0 auto;的意思就是:上下边界为0,左右根据宽度自适应!其实就是~~水平居中的意思.下面我就列举集中居中没作用的情况: 1:没有设置宽度.margin:0 auto居中是要设置宽度滴. 2:没声明DOCTYPE:DOCTYPE是document type(文档类型)的简写,在web设计中用来说明你用的XHTML或者HTML是什么版本.要建立符合标准的网页,…

CSS中padding和margin以及用法

CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyofnet.com/news/35.html…

css中设置div水平居中，margin:0px auto无用的情况

在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置width时,解释器不知道你的宽度,当然就不会居中.就会到左边去,所以设置width就好了.…

CSS中margin边界叠加问题及解决方案(转)

边界叠加简介边界叠加是一个相当简单的概念.但是,在实践中对网页进行布局时,它会造成许多混淆.简单地说,当两个垂直边界相遇时,它们将形成一个边界.这个边界的高度等于两个发生叠加的边界的高度中的较大者. 当一个元素出现在另一个元素上面时,第一个元素的底边界与第二个元素的顶边界发生叠加,见图: ◆元素的顶边界与前面元素的底边界发生叠加当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界也发生叠加,见图: ◆元素的顶边界与父元素的顶边界发生叠加尽管初看上去有点儿奇…

css中padding与margin

CSS padding margin border属性详解图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,paddin…

CSS中padding、margin、bordor属性详解

一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).内边距(padding).边框(border)和外边距(margin).对于初学者,经常会搞不清楚margin,background-color,background-image,padding,content,border之间的层次.关系和相互…

css中元素的auto属性值是什么意思，比如margin:0 auto表示什么？

auto 你可以理解为一种自动/自适应的概念比如现在项目需要一个宽度为960px的整体布局居中根据用户浏览器大小不同你将需要使用margin:0 auto;来实现. 无论用户浏览器宽度为多少.960px的定位宽度永远居中. css中的auto是自动适应的意思,而在css中auto往往都是默认值. 正如margin:0 auto,意思就是上下边距为0,左右边距为auto,就是自动适应.但是,如果要使用他的话,就必须给标签配上指定的宽度,如下:<div class="center&q…

CSS中margin属性

css中margin块级元素的垂直相邻外边距会合并,比如方框的上下外边距并不是2px,而是合并为1px了. 设置float属性就可以避免这种同级元素边距合并…

css中设置div水平居中，margin:0px auto没用的情况

在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0,左右根据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置width时,解释器不知道你的宽度,当然就不会居中,就会到左边去,所以设置width就好了. http://blog.csdn.net/liang5630/article/details/39030799…

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

http://www.x6x8.com/IT/199.html 本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键. 注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用汉语词语代替其来解释的话, 到了实际应用时容易混…