有关定位、内外边距、浮动、宽度的几点

最新推荐文章于 2023-01-02 20:18:53 发布
最新推荐文章于 2023-01-02 20:18:53 发布
阅读量203 收藏 2
点赞数
文章标签： 混淆的点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thaiilk/article/details/84101012
版权

定位

  • 绝对定位、固定定位都会将行内元素转换为行内块元素，都会脱标，而相对定位不会
  • 未嵌套时，绝对定位和固定定位一样，均从浏览器出发。固定定位无论是否嵌套均从浏览器出发，绝对定位看父盒子
  • 相对定位从自身位置出发

padding和margin

  • padding：继承的盒子一般不会被撑大（子盒子未定义宽度时，水平不会，垂直会），当子盒子设置宽度时，padding值大于父盒子，则子盒子会溢出（不会掉出来），类似以下图

 

  • padding：若没有嵌套，自身内容有padding时，会撑大
  • margin：垂直方向外边距会合并
  • margin：嵌套时，子盒子设置垂直方向margin时，外边距会塌陷
  • margin： 行内元素可定义左右外边距，不能定义上下，若要设置上下，加上display:block;;

浮动

  • 浮动的盒子要设置宽度

a标签

  • a标签之间有3px的距离，计算时要去掉

宽度

  • 父级元素的盒子会继承盒子的宽
  • 块级                    会
  • 浮动                  不会
  • 行内块              不会

 

thaiilk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
外边距、内边距和定位的使用
weixin_45716815的博客
10-18 1028
margin(外边距)、padding(内边距)、position（定位）的使用 margin的应用 在html中块元素使用边距外部的四边的边距可以用到“margin”的元素。 想要给块顶部外面加一个边距，就好像块元素就是一个2D房子，然后在元素外面顶部加了一层围栏隔开实现顶部间距的效果。 例如：，浏览器页面中的100px×100px的红块就会在顶部顶开了100px的位置。 如上，如果想要...
盒子模型布局稳定性——什么时候用 内边距 外边距 ？
algae
05-02 507
何时在 CSS 中使用边距与内边距 [关闭]
kalman2019的博客
01-02 126
关闭。这个问题是基于意见的。它目前不接受答案。想改进这个问题？更新问题，以便可以通过编辑这篇文章用事实和引用来回答它。 3年前关闭。改进这个问题在编写 CSS 时，是否应该使用特定的规则或准则来决定何时使用 margin 以及何时使用 padding？
慕课网跟练系列——定位和边距的区别&弹出层的简单实例
qq_42969437的博客
08-16 198
简单案例，所以用方块代替登录页面 <!DOCTYPE html> <html lang="en"> <head> &amp
不要告诉我你懂margin
weixin_33770878的博客
06-28 668
你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用 padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现的bug有哪些？…… 写css，你少不了与margin打交道，而对于这个平时我们最常用的css属性我们并非十分了解。介于此我打算...
CSS网页样式大全.pdf
10-02
5. **方框属性**：`width`和`height`设定元素的宽高，`float`控制元素的浮动，`clear`避免元素被浮动元素覆盖，`margin`和`padding`定义元素内外边距，`border`属性包括了边框的样式(style)、宽度(width)和颜色...
chakras:Examen 1 Curso Diseno web 2
03-10
学习如何调整元素的宽度、高度以及内外边距对于创建响应式布局至关重要。 3. **布局技术**：传统上，CSS布局依赖于浮动和定位，但现在我们有Flexbox和Grid，它们提供了更强大、更灵活的布局解决方案。理解如何使用...
web前段学习心得体会.docx
12-17
1. **width**属性定义元素宽度，不包括内外边距。 2. **浮动**用于布局，如`float:left`。 3. **清除浮动**用`clear:both`防止内容被浮动元素影响。 4. **边框**用`border`设置样式、宽度和颜色。 5. **垂直对齐**用...
HTML+CSS简单实现凡客商城静态网页
03-28
比如，使用`color`、`font-family`、`background-color`等控制文本和背景颜色，`padding`和`margin`调整元素的内外边距。 3. **定位**：`position`属性（static、relative、absolute、fixed）用于元素的位置控制。...
小米商城html
01-03
例如，使用`color`属性改变文字颜色，`background-color`定义背景色，`font-family`选择字体，`padding`和`margin`调整元素内外边距，`display`属性控制元素的显示方式，如`block`、`inline-block`或`flex`。...
外边距、内边距以及浮动相关
weixin_43507887的博客
02-25 1066
一、margin是外间距，可以设置一个容器外面的缝隙 1、简写 margin：20px； 上下左右 margin:20px 30px; 上下 左右 margin:20px 30px 40px; 上 左右 下 margin:20px 30px 40px 50px; 上右下左 2、单独设置 margin-top:20px; 外上间距 margin-bottom:20px; 外下间距 margin-left:20px; 外左间距 margin-right:20px; 外右间距
内外边距的注意点
AXING的个人博客
12-19 1107
padding margin
绝对定位、相对定位 position padding内边距、margin外边距
weixin_36927767的博客
02-09 3266
值 描述 absolute 绝对定位，相对于static定位以外的最近的一个祖先元素。 left、top、right、bottom relative 相对定位，相对于自己的正常位置 fixed 绝对定位，相对于浏览器窗口。 left、top、right、bottom static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, rig...
基于Springboot和Vue的图书借还管理系统源码 图书借还管理系统代码（高分毕设）
最新发布
07-28
图书借还管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
C语言内存管理：静态与动态分配的较量
07-28
C语言是一种通用的编程语言，由丹尼斯·里奇（Dennis Ritchie）在20世纪70年代早期于美国电话电报公司（AT&T）的贝尔实验室开发。C语言以其高效性、灵活性和可移植性而闻名，它是一种过程式编程语言，提供了对底层硬件的直接访问能力。 C语言的特点包括： 1. **简洁高效**：C语言的语法简洁，执行效率高，适合编写系统软件。 2. **接近硬件**：C语言提供了对内存地址和位操作的直接控制，使其非常适合硬件级编程。 3. **可移植性**：C语言编写的程序可以在不同的操作系统和硬件平台上编译和运行，具有很好的可移植性。 4. **丰富的库支持**：C语言拥有大量的标准库，如标准输入输出库（stdio.h）、数学库（math.h）等。 5. **结构化编程**：C语言支持结构化编程，允许使用循环、条件判断和函数等控制结构。 6. **指针**：C语言的指针功能强大，可以操作内存地址，实现复杂的数据结构和算法。 7. **编译型语言**：C语言是一种编译型语言，源代码需要通过编译器转换成机器码才能运行。 C语言广泛应用于操作系统（如Unix和Linux）、嵌入式系统、高性能
通讯协议规范-命令包格式
07-28
提供一份通讯协议规范，包含命令包、格式等，在上下位机调试的时候可参考该文档，制定对应的通讯协议。
如何用定时器调整内外边距
05-28
可以使用JavaScript中的setInterval()函数来定时改变元素的内外边距。具体步骤如下： 1. 首先，在HTML文件中定义需要调整内外边距的元素，例如一个div元素。 2. 在JavaScript文件中使用document.getElementById()函数获取该元素的引用。 3. 使用setInterval()函数设置一个定时器，指定每隔一段时间就执行一次指定的函数。 4. 在定时器函数中，可以使用元素的style属性来改变其内外边距，例如element.style.padding = "10px"。 5. 最后，在程序结束时使用clearInterval()函数清除定时器。 示例代码如下： HTML文件： ``` <div id="myDiv">这是一个div元素</div> ``` JavaScript文件： ``` var element = document.getElementById("myDiv"); // 定时器函数 function adjustPadding() { // 随机生成一个内外边距值 var paddingValue = Math.floor(Math.random() * 20) + "px"; // 改变元素的内外边距 element.style.padding = paddingValue; } // 每隔500毫秒执行一次adjustPadding函数 var intervalID = setInterval(adjustPadding, 500); // 程序结束时清除定时器 window.onunload = function() { clearInterval(intervalID); }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值