margin padding自适应

巧用margin/padding的百分比值实现高度自适应

原文:https://segmentfault.com/a/1190000004231995 一个基础却又容易混淆的css知识点本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素的width为参照物的!也许你会说,left/right以父元素的width为参照物好理解,但是top/bottom为什么也是以父元素的width为参照物的呢?网上众说纷纭,关键还是看W3C的规范: Not

巧用margin/padding的百分比值实现高度自适应（多用于占位，避免闪烁）

本文依赖于一个基础却又容易混淆的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

margin/padding百分比值的计算

1.百分比介绍一般元素的宽度用百分比值表示时,元素的总宽度包括外边距取决于父元素的width,这样可能得到"流式"页面,即元素的外边距会扩大或缩小以适应父元素的实际大小.如果对这个文档设置该样式,使其子元素使用百分数外边距,当用户修改浏览窗口的宽度时,外边距会随之扩大或缩小. margin-right/margin-left的百分比值是相对于父元素的宽度来计算的,这很好理解:而margin-top/margin-bottom为什么也是以父元素的width为参照物的呢? 2.为什么呢?

css007 margin padding border

css007 margin padding border 1.理解盒模型(盒模型:就是把一些东西,包括html各种标签都包含在一个看不见的盒子里) 1/在web浏览器中任何标签都是一个盒子,内容的周围环绕着装饰盒子的不同属性 Pad ding:内容和其框线之间的距离 Margin:一个标签和另一个标签之间的距离 Border:盒子周边的直线 Background-color:填充边框内部空间的间隔 2.用margin和padding控制空间 (margin控制盒子外部和其他元素之间的空间: p

css之margin && padding讲解

margin && padding盒子模型: margin是模块与模块的空隙,padding是内容与边框的空隙注: 1.margin:边缘.空白 2.padding:填充 margin: 属性描述 margin 简写属性.在一个声明中设置所有外边距属性.[1] margin-bottom 设置元素的下外边距. margin-left 设置元素的左外边距. margin-right 设置元素的右外边距. margin-top 设置元素的上外边距. 语法结构 margin:5px auto

总结那些有默认margin,padding值的html标签

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

关于margin padding

margin padding设置百分比是以父元素的宽度作参考. 定位的left,top等取百分比则以参照定位元素的padding+width做参考 margin 四个同时设定以margin-left 和margin-top为准 left right top bottom同时设定以left top 为准 padding设置什么是什么行内元素上下margin无效,padding都有效

内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上下扩展(对比一下,块状元素设置margin或padding时,内容盒子会移动,内联元素设置左右margin和左右padding时,内容盒子也会移动),设置背景色会看到效果,但是此元素下面的块状元素在计算边距时并不考虑这个上下padding,仍然以这个内联非替换元素的内容盒子的下边作为起点.简单示例一

css 行内元素块元素替换元素非替换元素以及这些元素的width height margin padding 特性

一.各种元素的width height margin padding 特性(具体css元素的分来参看二) 1.块级元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型.例如:div 2.行内替换元素 width. height. margin的四个方向. padding的四个方向都正常显示,遵循标准的css盒模型. 例如:img 2.行内非替换元素(重点) width. height不起作用,用line-height来控制高度.

html标签默认属性值之margin;padding值

一.h1~h6标签:有默认margin(top,bottom且相同)值,没有默认padding值. 在chrome中:16,15,14,16,17,19; 在firefox中:16,15,14,16,17,20; 在safari中:16,15,14,16,17,19; 在opera中:16,15,14,14,17,21; 在maxthon中:16,14,14,15,16,18; 在IE6.0中:都是19: 在IE7.0中:都是19: 在IE8.0中:16,15,14,16,17,19; 二.dl

CSS 百分比 margin & padding

前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想法不同,就是margin-top | margin-bottom | padding-top | padding-bottom 的百分比值参照的不是容器的高度,而是宽度 . 引用标准(2.1)原来的表达: The percentage is calculated with respect to th

margin重叠现象与margin auto自适应居中

上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ width:1000px; height:100px; background:blue; margin-bottom:50px; } #test2{ width:1000px; height:100px; background:green; margin-top:20px; }</style></

margin和padding那点事及常见浏览器margin padding相关Bug

用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的margin,将得到20px的空白. 何时应当时用padding: 需要在border内测添加空白时. 空白处需要背景(色)时. 上下相连的两个盒子之间的空白,希望等于两者之和时.如15px + 20px的padding,将得到35px的空白. margin是用来隔开元素与元素的间距:padding

DIV+CSS布局重新学习之float/margin/padding

之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="

margin padding

margin and padding有时候可以实现相同的效果但是用padding的场合更多 2者的区别和用法的细节我还是没掌握好

关于行内元素的margin padding一些说明；background-color的范围

①当对行内元素使用padding时,只有左右方向(正常)有效:竖直方向上,内边距对于该行内元素有效果,但是对其他元素无任何影响. ②当对行内元素使用margin时,只有左右方向有效,竖直方向无任何效果. ③background-color的范围:这种颜色会填充元素的内容.内边距和边框区域,扩展到元素边框的外边界(但不包括外边距).如果边框有透明部分(如虚线边框),会透过这些透明部分显示出背景色.

css参考文档；官方英文说明！！ 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

css参考文档 http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接有时间可以研究下 http://www.w3.org/TR/css3-box/#margins http://dev.w3.org/csswg/css-box/#the-margin-properties http://dev.w3.org/csswg/css-box/#Calculating ) 1 http://www.ituring.com.cn/article/645

margin,padding之我见

在网页布局中,margin和padding绝对会占很重要的作用,但是在实际的项目中,很多新手前端程序员们往往不能正确的使用它们,导致会出现一些不必要的麻烦,下面是我在前几天的项目中遇到的一些问题,以及个人总结的一些方法,仅供参考. 想比margin,padding则是要乖巧的多,几乎没有让你不省心的地方,我们知道,简单的padding语法有四种: eg:1.div1{padding:1px;} (表示上下左右的内边距都是1PX) 2.div2{padding:1px 2px}; (上下边距是1

css系列教程--margin padding column(完结)

margin/margin-left/margin-right/margin-top/margin-bottom设置边距属性margin:0;--所有外边距0margin:0 1px;--margin-top/bottom为0.margin-left/right为1pxmargin:1px 2px 3px 4px;--margin-top/right/bottom/left padding与margin类似,使用啦声明内边距的.用法同上 column-count:number:用来定义显示的列数

css reset 以及哪些元素有默认margin padding值

很多网站在css reset 的时候有如下做法: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fieldset, img { margin: 0; padding: 0; border: 0; list-style: none; } 也许你有些许怀疑,上面列出的标签都有默认的 margin 和 padding 值么,是不是不管三七二十一, 就统统直接 margin:0 , padding:0 呢?

margin padding自适应

热门专题