padding详解

tomener 发布于2019-08-29 12:27 / 1413人阅读

padding属性指定了盒的padding区的宽度。"padding"简写属性一次性设置四周的padding，而其它padding属性只设置它们各侧的

padding与元素的尺寸

padding与block和inline元素尺寸

最后一个例子是用padding实现高度可控的分隔线

padding与百分比值

padding百分比值与block元素

padding百分比值与inline元素

在inline元素中,padding:50%产生的不是一个正方形,原因是根据CSS规范,inline元素的垂直padding会让strut出现,strut本质上是一个inline文本,出现在content area区域,为了消除它,要使用font-size:0

标签元素的内置padding ol/ul列表的内置padding

ol/li元素内置padding-left，但是单位是px不是em；

Chrome浏览器下是40px；

所以如果字号很小，间距就会很开；字号很大，序号会爬到容器外面

开发过程中为使序号与其他内容对齐，文字大小12px或14px，padding-left为22px至25px

表单元素的内置padding

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

所有浏览器button按钮内置padding

部分浏览器select下拉内置padding，如FireFox IE8+可以内置padding

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

button在各大浏览器中去除空隙

button在不同浏览器中高度不同现象及解决方案

我们使用button以及label标签,将button使用绝对定位或者z-index隐藏,然后让label标签for="btnid"指向button的id

padding与图形绘制

三道杠以及眼睛效果

对于三道杠效果来说,透明区域是padding实现的,第一道杠使用border-top,第三道杠使用border-bottom,第二道杠使用background-color:currentColor,为了控制第二道杠不覆盖padding背景色,使用CSS3属性background-clip:content-box

第二个例子同上

padding与布局

移动端1:1头图布局

div{padding:50%;}

配合margin实现等高布局

等高布局

两栏自适应布局

分别在容器上和子元素的两栏自适应布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111914.html

border-sizing属性详解和应用

摘要：用于更改用于计算元素宽度和高度的默认的盒子模型。它有和三种取值。和属性包括内容，内边距和边框，但不包括外边距。所以，的解释很符合常理。使用建议使用建议根据项目中的使用经验和的建议，推荐将属性设置为。个人网站原文链接属性详解和应用 box-sizing用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。它有content-box、border-box和inherit三种取值。inheri...

Batkid 2019-04-23 13:30 评论0 收藏0
详解css盒模型与外边距重叠

摘要：如图所示代表，代表，代表。以上例子中，和之间的折叠产生的，是个相邻折叠的结果。将其值分为两组正值，，负值，，根据有正有负时的计算规则，正值的最大值为，负值中绝对值最大的是，所以，最终折叠后的应该是。盒模型的构成之前写了一篇关于如何解决css的外边距重叠问题,可是后来发现,我有些本末倒置了,对于一个问题的正确的处理流程就应该是先发现问题,分析问题,解决问题,所以我在这篇文章中就对下c...

roundstones 2019-08-29 13:18 评论0 收藏0
详解css中的display属性（行内元素和块级元素）

摘要：在中，和就是典型的行内元素元素。内联元素不单独占一行，给他设置宽高是没有用的。在中和就是块级元素。此元素会根据上下文作为块级元素或内联元素显示。此元素会作为块级表格来显示类似，表格前后带有换行符。 display属性首先，所有主流浏览器都支持 display 属性。其次，我们都知道display 属性规定元素应该生成的框的类型。默认值：inline 我们常用的display属性值...

figofuture 2019-08-28 17:58 评论0 收藏0
CSS实例详解：Flex布局

摘要：本文由云社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下布局是如何解决布局问题。通过对比其他的实现方式，可以看出使用布局可以优雅地实现相同的布局问题。本文由云+社区发表本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。一．垂直居中这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式...

RobinQu 2019-08-02 13:55 评论0 收藏0