0.inline元素中的padding

大家都知道padding对于block元素和inline-block元素的影响,而对于inline元素,padding只会在水平方向产生影响,垂直方向不会产生影响。

这么说其实不准确,给inline元素设置垂直方向的padding,不会改变元素的高度,也不会影响其他元素,但是会改变他自身的背景的高度。

<div class="wrap">
这是一小段文字,但是在这段文字当中有一个inline元素span,<span class="con">这就是span</span>,垂直方向上的padding不会影响其他元素,但是同样会改变他自身的背景大小
</div>
* {margin:; padding:;}

.wrap {
width: 400px;
height: 500px;
margin: 50px auto;
border: 1px solid #ccc;
}
.con {
padding: 8px;
background-color: #f32;
}

效果图:

1.百分比值的padding

对于inline-block元素和block元素,当元素的padding值为百分比的时候,其实际的padding值等于父元素的宽度*百分比值;

对于绝对定位元素而言,实际padding值等于第一个相对定位的父元素的宽度*百分比。

通过这个特点,我们可以实现一些比较有意思的效果,比如通过inline-block元素来实现响应式的正方形。

<div class="wrap">
<div class="con red"></div>
<div class="con green"></div>
<div class="con yellow"></div>
<div class="con blue"></div>
</div>
* {margin:; padding:;}

.wrap {
width: 400px;
height: 800px;
margin: 50px auto;
border: 1px solid #ccc;
font-size:;
}
.con {
display: inline-block;
padding: 25%;
}
.red {background-color: red;}
.green {background-color: green;}
.yellow {background-color: yellow;}
.blue {background-color: blue;}

CSS属性之padding的更多相关文章

  1. CSS 内边距 padding 属性

    CSS padding 属性定义元素边框与元素内容之间的空白区域. ㈠padding(填充) ⑴当元素的 padding(填充)内边距被清除时,所释放的区域将会受到元素背景颜色的填充. ⑵单独使用 p ...

  2. animate支持的css属性

    支持下列CSS 样式 * backgroundPosition * borderWidth * borderBottomWidth * borderLeftWidth * borderRightWid ...

  3. css属性的选择对动画性能的影响

    现在手机的占比越来越高,各种酷炫页面层出不穷,这些特效都离不开css动画.说到css动画,主流的情况也就无非这两大类:位移和形变.而我们在写一个动画特效的过程中,如何去提升它的性能呢?当然首先我们需要 ...

  4. css属性编写顺序+mysql基本操作+html细节(个人笔记)

    css属性编写顺序: 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等) 自身盒模型的属性(比如:width ...

  5. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

  6. CSS 属性 - position讲解

    postion 属性定义了一个元素在页面布局中的位置以及对周围元素的影响.该属性共有5个值: 1. position: static2. position: inherit3. position: r ...

  7. 标准化css属性顺序

    前言 对于css文件而言,选择器的写法有它的讲究,如—— 1> 不要用ID选择器 2> 不要用通配符*选择器 3> 选择器的层级 ...... 对于属性值的写法也有他的讲究,如—— ...

  8. css属性简写集合

    作为一个前端攻城狮,CSS那绝对是基础,可是基础也有掌握不牢的时候.今天就来总结一下容易写错的CSS属性简写问题. 1.background 背景颜色:background-color         ...

  9. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

随机推荐

  1. leetcode-209-长度最小的子数组

    题目描述: 给定一个含有 n 个正整数的数组和一个正整数 s ,找出该数组中满足其和 ≥ s 的长度最小的连续子数组.如果不存在符合条件的连续子数组,返回 0. 示例: 输入: s = 7, nums ...

  2. 线索二叉树的理解和实现(Java)

    线索二叉树的基本概念 我们按某种方式对二叉树进行遍历,将二叉树中所有节点排序为一个线性序列,在该序列中,除第一个结点外每个结点有且仅有一个直接前驱结点:除最后一个结点外每一个结点有且仅有一个直接后继结 ...

  3. error occurred during initialization of vm

    虚拟机无法进行如下分配 : -Xmx2048m -XX:MaxPermSize=512m 原因是我的老爷机总共内存只有3G: settings - > 搜索VM ->找到Compiler ...

  4. 对 云寻觅贴吧(http://tieba.yunxunmi.com/)的简要分析

    1. 云寻觅的用户需求:一方面是很多用户有很多问题,需要高质量的答案,但是搜索引擎无法满足这种需求,百度知道做得不够好,所以用户需要一个平台可以解决他们的问题:另外一方面,又有很多经济良好,时间较为充 ...

  5. Docker 拷贝文件

    1.从容器里面拷文件到宿主机? 答:在宿主机里面执行以下命令 docker cp 容器名:要拷贝的文件在容器里面的路径       要拷贝到宿主机的相应路径 示例: 假设容器名为testtomcat, ...

  6. PHP操作sqlserver乱码解决

    将捕获的参数编码转换为GB2312即可 function ($string){ returen iconv("UFT-8","GB2312//IGNORE",$ ...

  7. java常量类的实现方式_枚举类_项目实践

    前言 众所周知,系统里有很多比如订单状态.审核状态:性别.结算方式.交易类型等属性,这些属性只有几个值,一般用0.1.2.3等的数字标识存入数据库,每次对这些属性所属对象的增删改操作,都会在代码里给状 ...

  8. 创建自己的加密货币MNC——以太坊代币(二)

    创建一个基于以太坊平台的分红币MNC,根据持有的代币数量,进行分红的算法.github地址: https://github.com/lxr1907/MNC 1.使用以太坊根据比例换购token MNC ...

  9. javascript中的function 函数名(){} 和 函数名:function(){}有什么不同

    function functionName(){};这是定义一个函数 functionName:function(){};是设置一个对象的方法. 下面举一个例子: <html> <h ...

  10. PHP之string之implode()函数使用

    implode (PHP 4, PHP 5, PHP 7) implode - Join array elements with a string implode - 将一个一维数组的值转化为字符串 ...