前端学习笔记：定位特殊性

最新推荐文章于 2022-02-05 15:59:46 发布
最新推荐文章于 2022-02-05 15:59:46 发布
阅读量161 收藏
点赞数
分类专栏： 前端学习 文章标签： 前端 css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43339892/article/details/122244392
版权

绝对定位和固定定位也和浮动类似

  1. 行内元素添加绝对定位或者固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对定位或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
  3. 脱标的盒子不会触发外边距塌陷
    浮动元素、绝对定位和固定定位元素都不会触发外边距合并的问题
  4. 绝对定位或者固定定位会完全压住盒子，浮动不会，浮动产生的最初目的是实现文字环绕效果

文字环绕效果（即 图片不会压住文字）
截图来自百度百科，侵删

截图来自百度百科，侵删

西樱studio
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定位的特殊特性，【绝对定位会使行内元素具有行内元素的特点，行内元素的宽高由内容决定】
weixin_43837268的博客
10-09 380
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>定位.
css定位的特殊特性
lxllxl211的博客
10-04 171
2、块级元素添加绝对或固定定位，如果不给宽度和高度，默认大小是内容 的大小。浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题。1、行内元素添加绝对或固定定位，可以直接设置宽度和高度。绝对定位和固定定位也和 浮动 类似。3、脱标的盒子不会触发外边距塌陷。
CSS定位的特殊特性
m0_46744635的博客
08-21 187
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS定位的特殊特性</title> <style> span{ ...
定位的特殊属性
DangR_Jisoo的博客
11-24 129
定位的特殊属性 行内元素添加绝对定位或固定定位，可直接设置宽高，不用设置display：inline-block转换成行内块元素之后再设置宽高 块级元素添加绝对定位或固定定位，若没有给宽高，则默认宽高是元素内容的大小 在不设置块级元素的宽高，也不设置定位时，元素的宽度默认和父元素一样宽，高度就是元素撑开盒子的高度，但是设置定位之后，在不设置宽度高度的情况下，元素的宽度和高度就是撑开元素的高度和宽度 脱标的盒子(浮动，绝对定位，固定定位)不会触发外边距的塌陷 只有定位的元素才有z-index属性 ...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
webProject:web前端技术笔记
03-23
【web前端技术笔记】是关于Web开发领域前端技术的一份详细学习资料，主要涵盖了Web前端的基础到高级的各种知识点。这份笔记以"webProject-master"作为压缩包文件名，表明其可能是一个开源项目，允许用户查看、学习...
有条理、完整详细 前端笔记
07-02
### 有条理、完整详细的前端笔记知识点梳理 #### 第1章：HTML介绍 - **1-1 代码初体验，制作我的第一个网页** - HTML文档的基本结构。 - 如何编写并保存一个简单的HTML文件。 - 使用浏览器打开HTML文件的方法。 ...
HTML_CSS学习笔记.docx
07-15
9. CSS3 继承、优先级与重要性： - 继承：子元素会继承父元素的一些样式属性。 - 优先级：计算权重决定哪个样式生效，涉及内联样式、类、ID 和标签选择器等。 - !important：用于设定最高优先级，但应谨慎使用。 ...
尚硅谷vue3的学习笔记
最新发布
05-09
"尚硅谷vue3的学习笔记"很可能是记录了关于Vue3的详细学习过程，包括其核心概念、新特性、最佳实践以及常见问题的解决方法。 Vue3 的主要改进点包括： 1. **Composition API**：Vue3 引入了Composition API，这是...
前端学习笔记：溢出文字显示省略号方法（复制粘贴直接使用）
weixin_43339892的博客
01-02 2981
1、单行文字溢出显示省略号 <style> div { width: 150px; height: 80px; background-color: pink; margin: 100px auto; /* 如果文字显示不开，则默认自动换行 */ /* white-space: normal; */ /* 单行溢出文
前端学习笔记：刚安装Visual Studio Code，鼠标右键打开没有Open in Browser
weixin_43339892的博客
07-31 2307
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
前端学习笔记：关于img图像标签的属性使用
weixin_43339892的博客
08-01 1498
图像标签:<img src=“图片的路径” / > 属性使用不分先后顺序 src=“图片的路径”，src是必须属性 alt=“替换文本，当图像不能正常显示时显示的文字” title=“提示文本，鼠标放到图像上时显示的文字” width=“设置图像的宽度” height=“设置图像的高度” 宽度和高度一般只修改一个就可以了，另外没有设置的宽度或高度属性将会自动等比例改变，这样就不会导致图片失真 border=“设置图像的边框粗细” ...
前端学习笔记：CSS3新增--笔记来自B站黑马前端Pink老师学习视频（部分）
weixin_43339892的博客
01-09 1276
CSS3新增–笔记来自B站黑马前端Pink老师学习视频 目录CSS3新增--笔记来自B站黑马前端Pink老师学习视频一、属性选择器二、结构伪类选择器1.nth-child选择器2.nth-of-type选择器3.nth-child和nth-of-type的区别三、伪元素选择器（重点）四、盒子模型border-box五、模糊处理六、计算盒子宽度calc函数七、属性过渡（重点） 一、属性选择器 属性选择器可以根据元素的特定属性来选择元素，这样就不用借助于类或者id选择器 <title>CSS3新增属
前端学习笔记：字体图标的下载网址
weixin_43339892的博客
01-07 921
字体图标的下载 icomoon字库 http://icomoon.io 阿里iconfont字库 http://www.iconfont.cn/ 选择字体图标后下载压缩包，解压后把fonts这个文件夹单独复制到根目录下，在< style>标签中添加 @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?4ubngm'); src: url('fonts/icomoon.eot?4ubngm#iefix
前端学习笔记：使用vertical-align实现图片文字垂直居中对齐
weixin_43339892的博客
01-02 919
vertical-align 一、实现图片文字垂直居中对齐 图片来自百度图片，侵删 <style> /* vertical-align是行内元素或者行内块元素的专属 */ img { /* 1.默认是基线对齐 */ /* 2.底部对齐 */ /* vertical-align: bottom; */ /* 3.图片文字居中对齐 */ vertic
前端学习笔记：meta视口标签及二倍精灵图用法
weixin_43339892的博客
01-31 830
一、meta视口标签 <title>meta视口标签</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0, user-scalable=no"> width=device-width,视图宽度和设备保持一致 initial-scale=1.0, 视口的默认缩放比例1.0 max
前端学习笔记：入门Vue，项目搭建，脚手架搭建
weixin_43339892的博客
01-31 695
为什么需要搭建脚手架？ vue脚手架可以帮助你快速开始一个vue项目，其实其本质就是给你一套文件结构，包含基础的依赖库，你只需要npm install一下就可以安装。让你不需要为编译或其他琐碎的事情而浪费时间，这并不会限制到你的发挥。 第一步node.js node.js官网下载，官网地址为：http://nodejs.cn/download/ Windows系统一般下载 Windows 安装包 (.msi)，下载直接安装 配置node.js环境变量，新建系统环境变量，命名NODE_PATH添加安装路径
前端学习笔记：动画的基本使用
weixin_43339892的博客
02-05 604
一、制作动画分两步：先定义后调用 <title>CSS3动画基本使用</title> <style> /* 我们想页面一打开，一个盒子就从左边走到右边 */ /* 1.定义动画 move是动画名称 */ @keyframes move { /* 开始状态 */ 0% { transform: translateX(0px);
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值