css笔记 - 张鑫旭css课程笔记之 padding 篇

padding

一、padding与容器尺寸之间的关系

padding会影响元素的尺寸(增加/挤压内容区域)

对于block元素 1.没宽度设置的情况:垂直向外扩张,水平向内挤压 上下padding会增加元素占据的尺寸(即看上去高度在增加),左右因为元素宽度已经auto,不会变化。但是内容区域会在水平元素上被挤压。 2.不管有没有高度设置:垂直方向的向外扩张 也不会挤压垂直方向的内容区域。只会增加垂直方向的占据尺寸。 3.有宽度的情况:四个方向均向外扩张 上下padding会增加元素占据的宽、高尺寸,因为宽度固定,不会挤压内容区域的尺寸,增加的padding只会扩张元素的疆土。就像一个人吃胖了。 介于没有宽度设置就不会影响宽度,只会向内挤压,所以在设置宽度的基础上实验: 4.有宽度、有box-sizing的情况:垂直方向向外扩张,水平方向向内挤压。 现象同第一点,但仔细想想,原理和第1点一样,固定了宽度就像第一点中,block元素没有宽度,那就是屏幕的宽度。也是一种有宽度的情况。外部尺寸盒子宽度不变,内部容器盒子加padding组成整个外部尺寸盒子的宽度。padding增加,内部容器盒子响应的就得减少。可以理解为有宽度不设置box-sizing的时候,外部尺寸盒子与内部容器盒子是一体的,用了box-sizing后让二者成了包裹关系,加上固宽,才会有这个现象。 但是第4点同第1点一样的现象是,padding值过大,单方向的padding值(比如padding-left)大于元素的宽度的50%,宽度的值会被增加,内收过头就成了外扩的现象。 5.有宽度、没box-sizing的情况: 四个方向均向外扩张,同第3点。 扩张表现:上边向下,左边向右,右边向左,下边向上。向内挤压式的扩张。

padding在内联元素的表现 1.不做任何设置的表现:水平padding影响尺寸,垂直padding不影响尺寸。但是会影响背景色区域(占据的空间) 左右padding会撑开水平方向占据的尺寸,拉开与相邻元素的距离,上下padding也会撑开占据的尺寸,但是不会顶走上下相邻的block元素,对block没有威胁,对inline元素有威胁。会顶走相同的inline元素。 2. 在block元素中,block设置宽度与否,padding均不能影响到父元素的尺寸表现。只会向外扩张自己的尺寸, 扩张表现:不是向四周扩张,左边向右边扩张,上向上、下向下、右向右方向扩张,左边界在原来的位置不动 2.设置宽度?有用吗?当然没用! 3.设置box-sizing能行吗?不能行。感觉box-sizing是针对有宽度的block类型元素的

padding撑开尺寸的用途: 做一个常见的右边线效果:登录 | 注册

二、padding负值和百分比值

padding负值报错 padding百分比值均是相对于宽度计算的,同margin

利用padding:50%;实现一个正方形效果: 是可自适应式的额。如果写成固定值也是可以的,但是不能根据屏幕变化自适应。 原理可以想象田字格,兼容性也很好。 block元素,可以直接padding 50%加上背景色实现一个正方形 inline元素,还要设置font-size为0,不然高度会比宽度高出字体的高度。即使是空的div没有文字的情况下。 内联元素的上下padding会穿透,被上下元素挤压,尽量别用。

空inline元素+padding宽高不相等 <span class="dot"></span> .dot{ background: green; padding: 20px; /* 这样,元素宽40,高61。即使是一个空文本。因为文字高度还占21,设置font-size:0就没事了。 */ }

三、padding断行现象

四、padding的一些小知识

所有浏览器input/textarea输入框都有内置padding 1-2像素的 所有浏览器button按钮内置padding 可以直接设置padding:0取消padding 但是火狐下要单独处理:button::-moz-focus-inner{padding:0;} ie7下文字越多,padding左右值越大:给按钮设置overflow:visible;即可正常。 所以建议是,不要使用button标签,能不用就别用。 非要用button,可以用label曲线救国:button#btn(display:none;或者z-index=-1) label for="btn" 部分浏览器(如火狐)下拉select有padding值,比如firefox、ie8+可以设置padding 所有浏览器的radio、checkbox单复选框无内置padding,设置也没用

五、padding应用:

右边小竖线 正方形效果 两栏等高布局 两栏自适应布局(左头像右文字) padding绘制小icon(三条杠、游泳圈)

2018.07.26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

7款让人惊叹的HTML5粒子动画特效(转载)

这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就...

5742
来自专栏菜鸟前端工程师

html+css学习笔记015-H5新选择器0文字阴影

1121
来自专栏向治洪

flexbox基本原理

新版的flexbox规范分两部分:一部分是container,一部分是 items。 flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`fl...

1867
来自专栏别先生

jQuery的简单入门练习

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery的练习</title> ...

2417
来自专栏前端知识分享

第133天:移动端开发的一些总结

640 * 1136的图片能不能在iphone5上完全展示? iphone5分辨率640*1136

1052
来自专栏HTML5学堂

HTML5视音频-解决全屏下出现的控制栏

HTML5学堂:HTML5视音频-解决全屏下的控制栏。HTML5可以简简单单的实现视频、音频的播放功能,功能虽好用,但是它的默认样式有点淡淡的忧伤,问题虽存在,...

3356
来自专栏性能与架构

CSS选择器的性能优化

CSS选择器的性能排名(从最快者开始): (1)识别器:#id (2)类:.class (3)标签:div (4)相邻兄弟选择器:a + i (5)父类选择器:...

3087
来自专栏前端小叙

css如何实现一个元素高度固定宽度按比例显示?

用padding-top百分比可以实现宽度固定高度按比例展示,现在的需求是对一个video视频的盒子div高度是固定的,宽度如何按比例展示?

1371
来自专栏WebDeveloper

那些经常使用的 CSS3属性

892
来自专栏GIS讲堂

"GIS讲堂"第八课—结合UDIG实现图层样式的定制

在本节课程中,分别讲述了三种类型的点的样式,包括:简单点样式、组合点样式、图标点样式。

1124

扫码关注云+社区