CSS 外边距、填充、分组嵌套、尺寸

已于 2024-05-20 20:48:36 修改
阅读量579 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML、CSS、JavaScript软件开发 文章标签： css tensorflow 前端
于 2023-11-07 14:05:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/corlin6688/article/details/134265800
本文详细介绍了CSS中的外边距、填充属性，以及如何通过分组和嵌套选择器优化代码。同时，探讨了如何设置元素的尺寸，包括高度、宽度、最大值和最小值。此外，还讨论了display和visibility属性在控制元素显示和隐藏时的区别及其对布局的影响。

一、CSS 外边距：

        CSS margin（外边距）属性定义元素周期的空间。margin清除周围的（外边框）元素区域。margin没有背景颜色，是完全透明的。margin可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性。margin可以使用负值，重叠的内容。

margin属性可能得值：

margin属性 示例：

p.mar

了解本专栏 订阅专栏 解锁全文 超级会员免费看
前端必知必会-CSS填充属性padding
qq_24018193的博客
08-13 986
本文介绍了的CSS填充属性padding使用，如有问题欢迎私信和评论。
纯css3实现的组合嵌套立方体旋转动画特效源码.zip
10-31
在本资源中，我们关注的是一个使用纯CSS3技术实现的组合嵌套立方体旋转动画特效。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，相较于之前的版本，它引入了许多新的功能和特性，使得网页设计更加动态且...
CSS 填充
冷月醉雪的博客
07-26 862
设置元素的左部填充 <!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自学教程(如约智惠.com)</title> <style> p.padding {padding-left:2cm;}
CSS-填充
Swxctx
08-01 1103
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。 当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。  单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。 length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充
margin外边距
离经叛道
07-07 275
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。 可能的值 值 说明 auto 设置浏览器边距。这样做的结果会依赖于浏览器 length 定义一个固定的margin（使用像素，pt，em等） % 定义一个使用百分比的边距 Margin可以使用负值，重叠的内容。 Margin - 单边外边距属性 margin-top:100px; margin-bottom:..
CSS 填充：Padding
梁辰兴的博客
09-20 4847
由于没有声明下和左的值，因此它们将从相反的方向获取值，即下填充为10像素（从上填充获取），左填充为8像素（从右填充获取）。需要注意的是，当一个值在声明中被省略时，它将从其相反的方向（例如，如果上填充未声明，则下填充将应用于上）获取该值。将会使元素的上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素。以上述方式设置后，元素的上、右、下、左四个方向的填充将分别增加10、20、30、40像素。将会使元素的上内边距为10像素，左、右内边距为20像素，下内边距为30像素。
嵌套块元素垂直外边距塌陷
最新发布
10-16
以下是一个简单的HTML和CSS示例，展示了嵌套块元素垂直外边距塌陷及解决方法： ```html <!DOCTYPE html> , initial-scale=1.0"> 嵌套块元素垂直外边距塌陷 * { margin: 0; padding: 0; } .fa { ...
纯CSS3实现嵌套的旋转立方体动画特效源码.zip
11-20
纯CSS3实现嵌套的旋转立方体动画特效是一种在网页设计中常见的技术，它利用了CSS3中的3D转换和动画属性，为用户提供引人入胜的视觉效果。本源码包提供了创建此类效果的详细代码，使得开发者无需依赖JavaScript或者...
HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
09-25
`<ul>`和`<li>`元素被用来创建列表，其中嵌套的`<ul>`表示二级菜单。每个一级菜单项（`<li>`）包含一个链接（`<a>`），点击这个链接时会显示或隐藏对应的二级菜单。例如： ```html <li><a href="#" onclick="Show('...
CSS padding（填充）
m0_67633378的博客
04-17 1576
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 padding（填充） 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 可能的值 值 说明 length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充 填充- 单边内边距属性 在CSS中，它可以指定不同的侧面不同的填充： 实例
CSS填充属性设置
一名可爱的技术搬运工
05-19 3716
CSS填充属性设置有时会令人困惑，因为它可以同时接受1个值，2个值，3个或4个值。 例如，以下所有填充属性设置均有效。 padding: 10px; padding: 10px 8px; padding: 10px 8px 10px; padding: 10px 8px 10px 9px; CSS填充规则。 1）CSS填充顺序如下： padding: top right ...
css边距和填充示例代码,CSS padding（填充）(示例代码)
weixin_36209030的博客
08-03 937
CSS padding(填充)是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。padding(填充)当元素的 padding(填充)内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。可能的值值说明length定义一个固定的填充(像素, pt, em,等)%使用百分比值定义一个填充填充- 单边内边距属性在CSS中，它可...
CSS实现头尾高度固定，中部内容百分百填充
justforuse的博客
10-07 3403
效果图： <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> * { padding: 0; margin: 0; } html { height: 100%; } body {
php中padding,css中padding填充详解
weixin_39620653的博客
04-01 292
语法：padding：[ | ]{1,4}默认值：看每个独立属性适用于：所有元素，除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row 外继承性：无动画性：是计算值：看每个独立属性相关属性：[ padding-top ] || [ padding-right ] ...
【css】css 实现填充剩余高度
落叶无声的专栏
10-11 2万+
自动填充高度.html <div class="box"> <div class="header">头部</div> <div class="auto-fill">自动填充</div> </div> 使用 flex（推荐） 兼容性好； 只需关注自动填充的 div，无需考虑其他 div 的高度 .box { display: flex; flex-flow: column; height: 100%; } .h
纯CSS控制背景图片100%自适应填充布局
热门推荐
淘淘小窝
01-18 21万+
原文:http://www.uedsc.com/css-background-size-100.html 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; ba
css让背景图片拉伸填充的属性
简单就是美
10-15 5万+
比如一个容器(body,div,span)中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。 　　所以实际的结果是只能重复显示，所以出现了repeat,repeat-x,repeat-y,no-repeat这些属性。就是用来 　　控制背景图片的显示的。所以一般用作背景图片的有2类： 　　1.是一整张大图，尺寸和区域大小刚好吻合 　　2.一个很小的条状图，通过
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

colin工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值