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

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

一、CSS 外边距：

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

margin属性可能得值：

margin属性 示例：

了解本专栏 订阅专栏 解锁全文
colin工作室
关注
专栏目录
订阅专栏
css怎么把多个块合并,CSS外边距合并&块格式上下文
weixin_39590601的博客
08-04 623
前言之前在前端开发的过程中，都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库(〃'▽'〃))，这一次需要动手排一个页面，也挺简单，但是遇到了一个奇怪的问题，所以学习记录一下。问题测试代码如下：test* {margin: 0;padding: 0;}body {max-width: 750px;margin: 0 auto;}.div1 {background: yellow;he...
CSS实现头尾高度固定，中部内容百分百填充
justforuse的博客
10-07 3330
效果图： <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <style type="text/css"> * { padding: 0; margin: 0; } html { height: 100%; } body {
CSS 填充
冷月醉雪的博客
07-26 780
设置元素的左部填充 &lt;!DOCTYPE html &gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style&gt; p.padding {padding-left:2cm;}
CSS-填充
Swxctx
08-01 940
CSS Padding（填充）属性定义元素边框与元素内容之间的空间。 当元素的 Padding（填充）（内边距）被清除时，所"释放"的区域将会受到元素背景颜色的填充。  单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。 length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充
CSS 填充：Padding
最新发布
梁辰兴的博客
09-20 4422
由于没有声明下和左的值，因此它们将从相反的方向获取值，即下填充为10像素（从上填充获取），左填充为8像素（从右填充获取）。需要注意的是，当一个值在声明中被省略时，它将从其相反的方向（例如，如果上填充未声明，则下填充将应用于上）获取该值。将会使元素的上内边距为10像素，右内边距为20像素，下内边距为30像素，左内边距为40像素。以上述方式设置后，元素的上、右、下、左四个方向的填充将分别增加10、20、30、40像素。将会使元素的上内边距为10像素，左、右内边距为20像素，下内边距为30像素。
CSS padding（填充）
m0_67633378的博客
04-17 1420
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。 padding（填充） 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。 可能的值 值 说明 length 定义一个固定的填充(像素, pt, em,等) % 使用百分比值定义一个填充 填充- 单边内边距属性 在CSS中，它可以指定不同的侧面不同的填充： 实例
纯css3实现的组合嵌套立方体旋转动画特效源码.zip
10-31
在本资源中，我们关注的是一个使用纯CSS3技术实现的组合嵌套立方体旋转动画特效。CSS3是层叠样式表（Cascading Style Sheets）的第三个版本，相较于之前的版本，它引入了许多新的功能和特性，使得网页设计更加动态且...
外边距问题及解决方法笔记
WWW1260782205的博客
07-20 300
本身属性为displayblock;的元素称为块级元素常见块级元素div,h1-h6,p,ul,li,dl,dt,ol本身属性为displayinline;的元素称为行级元素常见行级元素本身属性为displayinline-block的元素称为行级块元素常见行内块元素img、input(表单元素后续会讲到)没有设置宽高的时候，宽继承父元素的宽度，高度由内容撑开默认独立成行——默认垂直布局宽度默认由内容撑开高度默认由内容撑开可以设置宽高。...
HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单
09-25
`<ul>`和`<li>`元素被用来创建列表，其中嵌套的`<ul>`表示二级菜单。每个一级菜单项（`<li>`）包含一个链接（`<a>`），点击这个链接时会显示或隐藏对应的二级菜单。例如： ```html <li><a href="#" onclick="Show('...
CSS填充属性设置
一名可爱的技术搬运工
05-19 3610
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 875
CSS padding(填充)是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。padding(填充)当元素的 padding(填充)内边距被清除时，所释放的区域将会受到元素背景颜色的填充。单独使用 padding 属性可以改变上下左右的填充。可能的值值说明length定义一个固定的填充(像素, pt, em,等)%使用百分比值定义一个填充填充- 单边内边距属性在CSS中，它可...
php中padding,css中padding填充详解
weixin_39620653的博客
04-01 227
语法：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 1万+
自动填充高度.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.一个很小的条状图，通过
CSS让背景图片填满DIV
最有趣的编程
05-01 7万+
.l_button { background: url(../img/botton.png) no-repeat; background-size:100% 100%; width: 118px; height: 39px; }
CSS背景图片自适应、全屏、填充、拉伸
u014763002的博客
09-23 16万+
方法一、 js控制： 1 2 3 div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">   img src="pictures/background.jpg" height="100%" width="100%"/
css div 多重嵌套
04-02
可以通过多层嵌套 div 元素来创建复杂的布局和样式。例如： ```html <h1>Page Title <h2>Sidebar Title <li>Link 1 <li>Link 2 <li>Link 3 <h2>Main Content Title <p>Lorem ipsum dolor ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

colin工作室

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

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

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

打赏作者

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

抵扣说明：

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

余额充值