css深入理解padding

padding 中规中矩,性格温婉平和!

第一节:CSS padding与容器的尺寸——了解padding与元素尺寸之间关系

CSS padding与容器的尺寸关系复杂

对于block水平元素 没有padding的时候 .gay{width:50cm;} padding影响元素尺寸      (理解为人身体的脂肪,人和人之间的距离).gay{width:20cm;padding:0 12px;}

但是width:auto或box-sizing为border-box的时候 .gay{width:80cm;box-sizing:border-box;padding:0 15px;}

.text{width:8cm;box-sizing:border-box;padding:0 1.5cm;}这个时候padding不会影响元素尺寸,但是当padding大小超过宽高的时候,.text{width:8cm;box-sizing:border-box;padding:0 8cm; }这时候元素按内联元素最小宽度显示,此时padding同样影响了元素的尺寸。

结论:对于block水平元素

1.padding值暴走,一定会影响尺寸;

2.width:auto,padding影响尺寸;

3.width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸。

对于inline水平元素

水平padding影响尺寸,垂直padding不影响尺寸 .leader{padding:50px},但是会影响背景色(占据空间)。大到比父元素还大的时候,设置overflow:auto会出现滚动条

如何利用这一特性

高度可控的分割线

1.直接使用字符:注册|退出登录

2.inline-block控制:注册|退出登录

3.使用inline padding:注册|退出登录

注册<span></span>退出登录

span{padding:16px 6px 1px;margin-left:12px;border-left:2px solid font-size:0;}

第二节:css padding负值和百分比值——了解padding特殊值的特殊表现

1.关于padding的负值,padding不支持任何形式的负值。

2.关于百分比均是相对与宽度计算的。

如何实现这一特性,轻松实现一个正方形 div:padding:50%(相对百分比计算)

真实案例

<div class="container">

<div class="example">

<h2>你的指尖</h2>

<h4>慕课网</h4>

</div>

</div>

.container{padding:50%;background:url(exp.jpg);background-size:100%;position:relative;}  .example{position:absolute;top:0;right:0;bottom:0;left:0;}实现一个正方形的响应式布局。

3.inline水平元素的padding百分比值

1.同样相对于宽度计算

2.默认的高度宽度细节有差异

3.padding会断行

inline元素的padding断行

span{padding:50%;}

<span syle="padding:50%;">内有文字若干</span>

如果是空的inline元素,高度还是要比宽度高

设置fon-size:0px;得到一个正方形。

为何会有额外的高度

inline元素的的那个会让“幽灵空白节点”显现,也就是规范中的strut出现。content-area,可以通过font-size:0px;让他不显示。

第三节:标签元素的内置padding-这里有一些你可能不知道的小秘密

1.ol/ul列表

1.1 ol/li元素内置padding-left,但是单位是px不是em;

1.2 例如chrome浏览器下是40px;

1.3 如果字号很小,间距就会很开;

1.4 如果字号很大,序号回爬到容器外面

margin等一般em的。

2.表单元素的内置padding值

所有的浏览器input/textarea输入框内置padding

所有浏览器button按钮内置padding

部分浏览器select下拉内置padding,如firefox ie8+可以设置padding

所有浏览器radio/checkbox单选框无内置padding

button按钮元素的按钮是最难控制的。

1.chrome浏览器是没有问题的。

2.firefox浏览器  设置padding:0左右依然有padding! 需要设置button::-moz-focus-inner{padding:0;}padding才为0

3.IE浏览器 ie7文字越多,左右padding逐渐变宽。设置overflow:hidden以后就正常了。

4.padding与高度计算的不兼容

button{

line-height:20px;

padding:10px;

border:none;

}

IE7   45px;

IE8   40px;

FireFox 42px;

Chrome:  40px;

button表单按钮padding

<button id="btn"></button>

<label for="btn">按钮</label>

label{display:inline-block;inline-height:20px;padding:10px;}

让button可见性隐藏。

第四节:padding与图形绘制——利用padding来绘制图形

实现3道杠——不借助伪元素,只用一个div

实现示意

<div class="line-tri"></div>

.line-tri{

width:150px;height:30px;

padding:15px 0;

border-top:30px solid;

border-bottom:30px solid;

background-color:currentcolor;

background-clip:content-box;

}

实现一个点

<div class="eye"></div>

.eye{

width:150px;

height:150px;

padding:10px;

border:10px solid;

border-radius:50%;

background-color:currentcolor;

background-clip:content-box;

}

第五节:padding布局实战----padding在布局这块比较好的应用

1.使用百分比单位构建比较固定比例布局结构

移动端1:1头图布局

div{padding:50%;}

2.配合margin实现等高布局。

.box{overflow:hidden;resize:vertical;}

.child-orange,.child-green{

margin-buttom:-600px;

padding-bottom:600px;

}

.child-orange{

float:left;

background:orange;

}

.child-green{

float:left;

background:green;

}

3.padding实现两栏自适应布局

<div class="pbox">

<img src="mm.jpg" />

<div class="auto">

本例子实现。。。。

</div>

</div>

img{float:left;}

.auto{

padding-left:120px;

}

时间: 2024-10-12 21:37:48

css深入理解padding的相关文章

HTML CSS——margin和padding的学习

你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距 代码2-1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &

HTML CSS——margin与padding的初学

下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和padding的理解: 一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距.(用代码来说明) <!DOCTYPE

CSS深入理解之absolute(HTML/CSS)

absolute和float是同父异母的兄弟,因为它们具有相同点:包裹性与破坏性 absolute的特点 1.独立的,并且可以摆脱overflow的限制,无论是滚动还是隐藏: 2.无依赖,不受relative限制的,行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值: 3.脱离文档流: 4.具有跟随性(依据这个特点,能省很多的relative,并且扩展性更强). 骚操作:使用注释来消除空格 <!doctype html> <html> &l

CSS深入理解之line-height

以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离. 定义三问: 什么是基线? 为何是基线? 需要两行? 如图红色线即为基线 基线乃*线定义之根本! 基线的扩展知识,稍作了解.如图: 第3个问题,一行文字难道就没有行高吗?非也,一行文字也是有行高的,两行的定义已经决定了一行的表现! 所以,行高表现为,如下图:(如果试想行高为0,那么两行文字将重合) 问题:为何line-height可以让单行文本垂直居中?

CSS初步理解

最近在学习牛腩的时候遇到了网页的制作,挺新鲜的.当中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间,找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下链接. CSS基础知识 以下是对CSS理解的导图 通过上图我们也发现,CSS也很难,也容易.容易是说,学起来很快就可以上手,这中语言简单易懂,只要你具备小学英语的知识量就可以了.困难是在指学好它并不容易,因为它需要你耐心.就好比我们对word文档的排版,哪里需要主体鲜明一点,哪里需要着重突出一下,哪

CSS 内边距 padding 属性

CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 padding 属性可以改变上下左右的填充.   ⑶可能的值: ⑴length    定义一个固定的填充(像素, pt, em,等) ⑵%          使用百分比值定义一个填充 注意:padding 属性接受长度值或百分比值,但不允许使用负值.   ⑷示例1:如果你希望所有 h1 元素的各边都有

CSS深入理解学习笔记之padding

1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为border-box,同时padding值没有暴走,不影响尺寸. 对于inline水平元素:水平padding影响尺寸,垂直padding不影响尺寸,但是影响背景色.当垂直padding大到超出父容器,会影响scrollHeight. 2.padding负值和百分比值 关于padding负值:padd

css深入理解vertical-align

第一讲:vertical-align家族基本认识 了解vertical-align支持的属性值以及组成 属性: 1.inherit 2.线类 baseline,top,middle,bottom 3.文本类 text-top,text-bottom 4.上标下标类 sub,super 5数值百分比类 20px,2em,20% 共性 都带数值 20px 20em 20%,都支持负值 margin,letter-spacing word-spacing vertical-align,行为表现一致 在

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言 要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是