css之padding的妙用

最新推荐文章于 2022-11-13 12:50:26 发布
最新推荐文章于 2022-11-13 12:50:26 发布
阅读量128 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wron_path/article/details/103533201
版权

当我们在设置子元素的时候，尽量不要设置宽度，默认继承父级宽度100%，我们设置padding的时候，不会撑开盒子；但是当我们设置了确切的宽度之后，宽度加上padding，如果大于父级元素的宽，却会撑开盒子。所以尽量不要设置确定的宽度

TE杨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS的padding实现百分比布局
izwell的博客
03-14 1348
在我以前的文章中，我讲过CSS中的一系列的百分比单位，其中margin和padding是相对于容器的宽度的，最近看到了一个文章，讲的是用padding来实现图片等比例布局。大概的需求如下，我们需要将图片按照我们希望的比列进行显示，图片的宽度是按照百分比响应式。你可能觉得这没啥，因为img标签在没有设定固定的高度时，其高度会按照图片本身的比列进行计算。但是我们的图片本身可能不是按照我们希望的比列。这...
CSS边距属性定义是用margin还是用padding的两者对比
09-25
- 在上下相邻的元素之间，如果希望空白是它们内边距之和，例如在两个元素的padding相加后显示总和作为空白。 在示例代码中，`.firstChild`和`.secondChild`使用了`margin-top`来隔开它们与父元素或相邻元素的距离...
CSS开发技巧（五）：妙用padding实现元素的高度和宽度保持比例
u012443286的博客
02-29 1384
在前端开发中，我们可能需要实现一定的适配，其中常见的一个需求是： 元素保持高宽比，等比例进行缩放。 思路分析 现在，我们来分析这一需求： 由于需要缩放，宽度和高度都不能写成固定值。 要保持高宽比，元素的高度和宽度中有一个属性需要根据另一个属性计算得到，那么先确定高度还是宽度呢？显然，应该先确定宽度。我们的前端开发中一般对于页面高度不会有过多的要求，相比而言宽度显得更为“珍贵”，因此应该先确定...
width和padding踩的坑~为什么div设置padding被挤出去了
weixin_43228393的博客
04-03 1626
简言之,width设置100%之后,设置padding会将盒子的宽度撑破,超出100% 所以需要设置padding的盒子不能同时设置width=100%
css之box-sizing特殊属性妙用
qq_41444226的博客
11-13 64
box-sizing属性妙用，灵活控制盒子实际大小的核心技术
CSS学习笔记Padding 属性中参数的定义与使用
10-30
在CSS（层叠样式表）中，`padding`属性是一个非常重要的概念，它用于设置元素内部的空白区域，也就是元素内容与其边框之间的距离。这个属性可以帮助我们在布局时创建间距，提升页面的视觉效果和可读性。在CSS中，`...
CSS padding属性定义边内补白
09-27
CSS中的`padding`属性是网页布局中不可或缺的一部分，它用于设置元素内容区域与边框之间的距离，也就是我们所说的边内补白。边内补白的存在可以让元素内容与边框之间保持一定的空间，增加视觉效果或者调整元素内部的...
CSS百分比padding制作图片自适应布局
10-19
标题“CSS百分比padding制作图片自适应布局”所指出的核心概念是，当设置元素的`padding`为百分比值时，无论是`padding-top`、`padding-bottom`、`padding-left`还是`padding-right`，它们都是基于父元素宽度来计算...
CSS中margin和padding的区别浅析
09-24
在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。下面讲解 padding和margin常用的用法
px和em和rem的区别
TE杨
12-07 8798
1、px实际上就是像素，与物理像素有一定的区别，用px设置字体大小，比较精确，但是有缺点，当浏览器页面缩放时，px并不能跟随变大。当前网页的布局就会被打破。 2、em是根据基准来缩放字体的大小。em是相对单位，一般都是以<body>的字体大小作基准的。em是相对于父元素的属性来计算的，这样就会存在一个问题，就是每一层父元素都必须有它的数值。 3、而rem不同，rem是相对于根元素htm...
css选择器权重以及权重叠加问题
TE杨
12-15 719
css中权重大小： * 标签 0 类 10 ID 100 标签内样式 1000 ！important 无穷大 样式继承的权重为0，权重之间不能越界，11个类也没有id的权重大 ...
前端透明图片(加功能就是遮罩)原生css的实现方案
TE杨
04-25 488
1、父元素设置背景为黑色，子元素设置透明度opcity html代码 css(这里是less)代码
样式的层级关系，选择器优先级，样式冲突，以及抽离样式模块
TE杨
12-07 474
样式的层级关系 为了书写的美化，比如说ul 和li ，可以ul{}，li{}，也可以ul li{}，推荐使用后者 选择器优先级 ！important>id选择器>类选择器>标签选择器,样式遵循就近原则，遵循后载入原则 样式冲突 遵循上面 抽离样式模块 {padding: 0; margin: 0;}不建议使用，因为通配符要把所有的元素都遍历一遍，增加了浏览器的负载 body,...
图片下间隙的4种解决方案
TE杨
04-25 415
1、把图片设置为块级元素display:block; 2、因为行内元素默认是放置在父元素的基线上的，解决方案，设置vertical-align属性为「top，text-top，bottom，text-bottom」都可解决 3、设置父元素溢出隐藏：overflow:hidden; 4、设置图片浮动 ...
css弹性布局
TE杨
12-07 406
css弹性布局 display：flex是一种弹性布局方式，意思是让盒子保持最大的灵活性，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 1.flex-direction属性 决定项目的方向,默认横向排列 属性值 描述 row 默认值，横向排列 row-reverse 横向排列，但与row相反 column 垂直排列 co...
CSS中link 和@import的区别
TE杨
12-07 386
1.@import是css提供的语法规则，而link是html的标签，link不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等 2.加载顺序有差别,link引入的css将在加载页面的时候被同时加载，而@import引入的css将在页面加载完成之后被引用 3.@import是css2.1之后才出现的，所以较低版本的浏览器加载不出来，而link可以被所有浏览器加载 4.可以通过 JS...
css之怎样解决图片下间隙的问题
TE杨
12-15 325
图片下间隙问题的原因，行高是由四条线组成的，顶线，中线，基线，底线，图片的底边默认和基线对齐，这就造成了基线与底线之间的留白。 解决方法：1,改变标签的元素状态，图片默认是行内块元素，把它设置为块级元素即可 2.让图片的底边不与基线对齐，vertical-align设置为除基线以外的其他任何一条线即可 ...
横向滚动容器的实现
TE杨
04-26 304
父元素加上overflow-x: auto;子元素设置成行内块元素或者行内元素加上white-space: nowrap;不换行
css的padding
最新发布
10-10
CSS的padding属性用于设置元素的内边距，即元素内容与边框之间的空间。 padding属性可以接受一个值，也可以接受四个值，分别对应上、右、下、左四个方向的内边距值。如果只提供一个值，则四个方向的内边距都相等；...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值