padding、margin百分比

当margin或者padding取值是百分比的时候，无论是left，right或者top，bottom，都是以父元素的width为参考的

<!DOCTYPE html>
<html><head><style>#parent{position: relative;width: 400px;height: 300px;margin: 200px;padding: 100px;box-sizing: content-box;}#child {width: 50%;height: 50%;margin: 10%;padding: 10%;box-sizing: content-box;}</style></head><body><div id="parent"><div id="child">this is child</div></div></body>
</html>

padding、margin百分比相关推荐

margin百分比，重叠和auto
一. margin百分比 1. 普通元素的百分比margin都是相对于容器的宽度计算 2. 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed) ...
微信小程序border padding margin
微信小程序border padding margin 1.padding 定义元素边框与元素内容之间的空间. 可能的值 auto: 浏览器计算外边距 length:规定以具体单位计的外边距值,比如像素 ...
图解CSS的padding,margin,border属性
图解CSS的padding,margin,border属性(详细介绍及举例说明) 图解CSS的padding,margin,border属性 W3C 组织建议把所有网页上的对像都放在一个盒(box)中 ...
padding+margin的百分比
.fa {width: 400px;height: 300px;background-color: red;padding-top: 1px;}.sn {width: 200px;height: 20 ...
CSS padding margin border属性讲解
把所有网页上的对象都放在一个盒(box)中 ,设计师可以通过创建定义来控制这个盒的属性,这些对象包括段落.列表.标题.图片以及层. 盒模型主要定义四个区域: 内容(content) 内边距(paddi ...
CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
CSS的Padding, Margin, Border 的区别
HTML的元素 HTML语言定义了一系列的标签元素, 比如div, hr , ul , a 等等.粗略来分, 有以下几种类型: 块状元素: 以块的形式显示一个矩形区域, 可以定义自己的高度和宽度, 可 ...
android padding margin的区别,如何正确使用padding和margin
原标题:如何正确使用padding和margin 前面两期我们学习了LinearLayout线性布局的方向.填充模型.权重和对齐,那么本期我们来学习LinearLayout线性布局的内边距和外边距. ...
前端常见笔面--CSS
css 10. 概念 10.1 继承相关 css的继承:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元 ...

padding、margin百分比

padding、margin百分比相关推荐

最新文章

热门文章