【学习笔记】CSS深入理解之padding

learn_shifeng 发布于2019-08-30 15:54 / 2511人阅读

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸元素值过大，一定影响元素尺寸为定值，会影响元素尺寸为或者为，同时值没有暴走，不影响元素尺寸元素水平影响尺寸，垂直不影响尺寸，但是会影响占据空间会显示背景色负值与百分比单位不支持负值百分比相对于自身宽

张鑫旭的CSS深入理解之padding学习笔记

padding与容器的尺寸

block元素

padding值过大，一定影响元素尺寸

width为定值，padding会影响元素尺寸

width为auto或者box-sizing为border-box，同时padding值没有暴走，不影响元素尺寸

inline元素：水平padding影响尺寸，垂直padding不影响尺寸，但是会影响占据空间（会显示背景色）

padding负值与百分比单位

padding不支持负值

padding百分比相对于自身宽度计算

inline元素的padding有断行效果

空的inline元素padding高宽不相等，因为inline的垂直padding会让隐匿文本节点出现

标签元素的内置padding

ol/ul

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

间距固定，字号过小显得间距过大，字号过大会溢出容器

radio/checkbox

无法设置padding

button

FireFox下清空按钮padding

button::-moz-focus-inner {
    padding: 0; 
}

FireFox下按钮高度计算问题，导致不兼容问题，所以一般使用自定义按钮

云服务器 GPU云服务器深入理解webrtc之aec 如何深入理解深度学习深入理解系列深入理解linux

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

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

【学习笔记】CSS深入理解之margin

摘要：张鑫旭的深入理解之学习笔记与容器的尺寸可视尺寸对于没有设定的块元素，可改变元素水平方向的可视尺寸占据尺寸对于元素，可改变元素水平垂直方向的占据尺寸与百分比单位普通元素的百分比都是相对于容器的宽度计算的绝对定位元素的百分比是相对于包含块的宽张鑫旭的CSS深入理解之margin学习笔记 margin与容器的尺寸可视尺寸：对于没有设定width的块元素，margin可改变元素水平方向...

stefan 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之overflow

摘要：张鑫旭的深入理解之学习笔记基本属性属性介绍默认当与值相同时，等同于当与值不相同时，其中一个值被赋予时，若另一个值为，那这个会被重置为作用前提元素非对应方位的尺寸限制拉伸对于单元格等需要为状态才可以与滚动条页面默认滚动条来自与无《张鑫旭的CSS深入理解之overflow》学习笔记 overflow基本属性 overflow属性介绍 overflow: visible(默认)|hidd...

Ali_ 2019-08-30 15:54 评论0 收藏0
【学习笔记】CSS深入理解之vertical-align

摘要：上例中，左边盒子的基线为其底边缘，右边盒子的基线为的基线将右边盒子的行高设置为，即这个的高度为，位置处于中间。 vertical-align的值线类：baseline（默认）, top, bottom, middle 文字类：text-top, text-bottom 上标下标类：sub, super 数值：1px, 1em - 在baseline对齐的基础上上下偏移一定数值百分...

ermaoL 2019-08-30 15:54 评论0 收藏0
CSS 深入理解之 border 【笔记】

摘要：本文是对慕课网张鑫旭的课程深入理解之的学习笔记，并结合了一些个人理解。本文是对慕课网张鑫旭的课程《CSS 深入理解之 border》的学习笔记，并结合了一些个人理解。 border-width 不支持百分比 border-width 不支持百分比单位，原因如下：在实际设计中，边框一般是固定大小的，不会随着盒子宽度的增加而增加 margin 和 padding 为百分比单位时，...

william 2019-08-30 15:52 评论0 收藏0
【学习笔记】CSS深入理解之border

摘要：张鑫旭的深入理解之学习笔记不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。可以利用该特性实现图标变色的效果与定位不计算区域，只限于以内的盒子。张鑫旭的CSS深入理解之border学习笔记 border-width border-width不支持百分比，原因是边框本身具有宽度固定的意义，不同设备的边框不会因设备宽度而等比改变。因此从语义上来说，...

he_xd 2019-08-30 15:54 评论0 收藏0