《CSS世界》读书笔记(十)
<!-- 《CSS世界》张鑫旭著 -->
温和的padding属性
因为默认的box-sizing是content-box,所以使用padding会增加元素的尺寸。
尺寸表现对具有块状特性的元素和内联元素而言有些许不同。
很多人会觉得内联元素的padding只会影响水平方向,不会影响垂直方向。这种认知是不准确的,内联元素的padding在垂直方向同样会影响布局,影响视觉表现。只是因为内联元素没有可视宽度和可视高度的说法,视觉上没有改变和上一行下一行内容的间距,因为给我们的感觉是垂直padding没有起作用。
如果我们给内联元素加个背景色或者边框,自然可以看到其尺寸空间确实受padding影响了。
示例见 http://demo.cssworld.cn/4/2-1.php 可以看到尺寸有效,但是对上下元素的原本布局没有影响,仅仅是垂直方向发生了重叠。
CSS中还有很多其他场景或属性会出现这种不影响其他元素布局而是出现层叠效果的现象。比如:relative元素的定位、盒阴影box-shadow以及outline等。这些层叠现象虽然看似类似,但实际上是有区别的。分为两类:一类是纯视觉层叠,不影响外部尺寸;另一类则会影响外部尺寸。盒阴影box-shadow以及outline属于前者,而这里的inline元素的padding层叠属于后者。因为父元素设置overflow: auto,会出现滚动条。
示例 http://demo.cssworld.cn/4/2-2.php 实现了利用内联元素的padding实现高度可控的分割线。
padding的百分比值
padding的百分比值无论是水平方向还是垂直方向均是相对于宽度计算的
标签元素内置的padding
(1)ol/ul列表内置padding-left,但是是px。Chrome浏览器下是40px
(2)很多表单元素都内置padding,例如:input、textarea、button等
<button>按钮元素就算我们重置padding为0,在Firefox浏览器下,左右依然有padding,可以试试使用:button::-moz-focus-inner { padding: 0; }
按钮padding与高度计算不同浏览器下千差万别
padding 与图形绘制
(1)不使用伪元素,仅一层标签实现“三道杠”分类图标效果。这里主要是background-clip属性的用法
(2)不使用伪元素,仅一层标签实现双层圆点效果。和上面例子的原理一样。
示例见 http://demo.cssworld.cn/4/2-4.php
《CSS世界》读书笔记(十)的更多相关文章
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- 《CSS世界》笔记二:盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐 写在前面 在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margin ...
- 《精通CSS》读书笔记(一)
最近新添16本书,目前开始看陈剑瓯翻译的<精通CSS——高级Web标准解决方案>(Andy Budd, CSS Mastery -- Advanced Web Standards Solu ...
- 《css世界》笔记之流、元素与基本尺寸
1. 块级元素 基本特性:就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示. 块级元素和"display 为block 的元素"不是一个概念,display:list- ...
- css 揭秘-读书笔记
css 揭秘 [希]Lea verou 著 css 魔法 译 该书涵盖7大主题,47个css技巧,是css进阶必备书籍,开阔思路,探寻更优雅的解决方案.这本书完全用css渲染出的html写成的(布局. ...
- JavaScript权威设计--CSS(简要学习笔记十六)
1.Document的一些特殊属性 document.lastModified document.URL document.title document.referrer document.domai ...
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
- 《Two Days DIV + CSS》读书笔记——CSS选择器
1.1.2 CSS选择器 CSS 选择器最基本的有四种:标签选择器.ID 选择器.类选择器.通用选择器. [标签选择器] 一个完整的 HTML 页面由很多不同的标签组成,而标签选择器,则是决定哪些标签 ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
- CSS Grid 读书笔记
基本概念 MDN上的解释是这样的 CSS Grid Layout excels at dividing a page into major regions or defining the relati ...
随机推荐
- 【QT】QPixmap在Label中自适应大小铺满
KeepAspectRatio:设置pixmap缩放的尺寸保持宽高比. setScaledContents:设置label的属性scaledContents,这个属性的作用是允许(禁止)label缩放 ...
- redis在php中的基本使用
//使用autoload加载相关库,这边重点就是为了require $file; spl_autoload_register(function($class) { $file = __DIR__.’/ ...
- HOOK IDT频繁蓝屏(Window 正确 HOOK IDT)
环境 win7x64 Microsoft Windows [版本 6.1.7601]也是一个朋友 HOOK IDT 测试 问我IDT为啥老是蓝屏.结果是因为swapgs问题. 如果你知道swapgs作 ...
- poj3278Catch That Cow
Catch That Cow Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 88361 Accepted: 27679 ...
- linux的基本操作(LNMP的基本操作)
LNMP 的环境搭建 和LAMP不同的是LNMP中的N指的是是Nginx(类似于Apache的一种web服务软件)其他都一样.目前这种环境应用的也是非常之多.Nginx设计的初衷是提供一种快速高效多并 ...
- 2 虚拟机Oracle11.2.0.4服务器端,第三方图形化界面安装步骤
环境: 虚拟机:winserver 2012r2 数据中心版 64位 物理主机:win7 旗舰版 64位 网络环境:网线连接内网,WiFi外网 一.虚拟机相关设置 包括计算机名,与物理主机的网络 ...
- 有关vue开发的小经验
注册登录已经成为布局的常事,这里为大家推荐两种超级好用的布局display:flex;justify-content:center;这个可以解决水平居中的疑难杂症 align-center:cente ...
- Python学习之旅(十一)
Python基础知识(10):函数(Ⅱ) 一.全局变量和局部变量 局部变量:在函数内定义的变量,在函数内使用 全局变量:在函数外定义的变量,在程序任何地方都可以使用 1.全局变量与局部变量同名 这时函 ...
- 已知长度为n的线性表采用顺序结构,写一算法删除该线性表中所有值为item的元素
/** * @author:(LiberHome) * @date:Created in 2019/2/27 23:34 * @description: * @version:$ */ /*已知长度为 ...
- spark streaming集成kafka
Kakfa起初是由LinkedIn公司开发的一个分布式的消息系统,后成为Apache的一部分,它使用Scala编写,以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Clouder ...