margin:0 auto 表示什么意思 margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right 因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)…
一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 padding-left:长度|百分比 padding-right:长度|百分比 margin:元素外边距,指的是元素外边框到父元素的距离. 用法: margin:长度|百分比 margin-top:长度|百分比 margin-bottom:长度|百分比 margin-left:长度|百分比 mar…
一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.…
css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个 看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2.用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间: p…
在进行前端页面开发时,width(width,offsetWidth,scrollWidth,clientWidth)height(height,offsetHeight,scrollHeight,clientHeight)是我们最容易搞混乱的 这里就特别记录一下: 1.offsetWidth width+padding+border) 当前对象的宽度. style.width也是当前对象的宽度(width+padding+border). 区别:1)style.width返回值除了数字外还带有…
用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的margin,将得到20px的空白. 何时应当时用padding: 需要在border内测添加空白时. 空白处需要背景(色)时. 上下相连的两个盒子之间的空白,希望等于两者之和时.如15px + 20px的padding,将得到35px的空白. margin是用来隔开元素与元素的间距:padding…
<!-- 类比礼品盒里装方块月饼.月饼的食用部分(我们把它称之为月饼肉身)要装在小包装盒里,月饼肉身即为content.月饼肉身与直接包裹它的小包装盒(我们把它叫做月饼的衣服)之间的距离叫padding.其中月饼的衣服厚度叫border.月饼的衣服与月饼礼品盒之间的距离叫margin.--><!-- css中的width和height指的是content的宽度和高度 --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S…
开篇提示:以下内容都经个人测试,参考API文档总结,但还是不能保证完全正确,若有错误,还请留言指出_______________________________________________________________________________________ offset[Parent/Width/Height/Top/Left] 测试代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-…
本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Note that in a horizontal flow, percentages on 'margin-top' and 'mar…
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西(content):而填充(padding)就是怕 盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框(border)就是盒子本身了:至于边界(margin)则说明盒子摆放的时候的不 能全部堆在一起,要留一定空隙保持通风,同时也为了方便取…