css笔记（2）---关于position和float

最新推荐文章于 2024-07-16 09:10:34 发布
最新推荐文章于 2024-07-16 09:10:34 发布
阅读量96 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38038767/article/details/88364195
版权

当设置css属性position:absolute;或者float:left/right;的时候
打内部把元素转换成inline-block;

炜神研
关注
专栏目录
在css中position与float对样式影响的不同
唐鑫的博客
01-16 556
在css中position与float对样式影响的不同 在css中，position和float都是用于布局比较常用的方法，虽然有时效果一样，但是在某种情况下position比float更加好用，实例如下。 在Htlm代码中封装一个大盒子为父级元素，其中放置4个类名不相同的小盒子为子级元素如下 <!doctype html> <html> <head&.
css笔记 z-index
热门推荐
JiuMeilove的博客
10-10 3万+
z-index定义 z-index是相对比较常用的一个语法了 首先先来了解一下z-index的定义把 z-index 属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层叠上下文 stack context了解 在讲解z-index咱们先要了解一下层叠上下文（stack context）是什么呢，其实通俗来讲，就是你看电脑的这个方向的一个显示顺序，比如说，桌子上有一大堆纸，你对着它看的话，每一张纸，实际上你就可以理解为一个层叠上下文中的一个层叠顺序（stack l
CSS阅读笔记---CSS基础篇
keasar的博客
04-09 1219
本文是这些天阅读慕课网的css基础篇部分所作的笔记。 一、基本知识 二、选择器 三、css一些特性 四、格式化排版 五、盒模型 六、布局模型 七、代码简写 八、单位和值 九、CSS之奇淫巧计 ### 一、基本知识 1、CSS全称“层叠样式表” ​ 类似代码,某类型{ 改变内容} p{ font-size : 12px; color : red } 2、语法 由选择符和声明（属性：值）组成。...
前端重学笔记-CSS篇-08
Yvonne_hjj的博客
07-14 725
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)选择器{z-index:1;数值可以是正整数、负整数或0,默认是 auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有 z-index属性。
Css布局-伸缩盒笔记
最新发布
王员外的博客
07-16 941
伸缩盒作为css3中的布局标准，不得不学呀，跟着b站yu神走一遍，yushen牛逼！flex布局应该是现在css中最常用的布局方式了，不学不行啊，加油。
CSS笔记--day05
m0_38092672的博客
03-20 135
1.CSS属性书写顺序(重点) 1).布局定位属性：display / position / float / clear / visibility / overflow (建议display 第一个写，毕竟关系到模式) 2).自身属性：width / height / margin / padding / border / background 3).文本属性：color / font / text-decoration / text-align / vertical-align / white-sp
CSS学习笔记9-定位（position）
emmm520的博客
08-24 209
CSS学习笔记9-定位（position） 定位-position position的含义指定位，position 属性指定了元素的定位类型（static、relative、fixed、absolute 或 sticky）。 元素其实是使用 top、bottom、left 和 right 属性定位的。但在使用这几个属性之前，需要先设置 position 属性。根据不同的 position 值，它们的工作方式也不同。 静态定位-static 使用方式：position: static; 静态定位的元素不
CSS3 object-fit和object-position
TG的博客
11-21 5087
最近一直忙于将JavaScript学习的笔记整理成电子书，也没什么空闲时间写新的文章。趁着今天有点空闲，决定再来折腾一下CSS3中的两个属性：object-fit和object-position。 这两个奇葩的属性是搞毛的呢？其实它们是为了处理替换元素（replaced elements）的自适应问题，简单的说，就是处理替换元素的变形（这里指长宽比例变形）问题。
CSS学习笔记--水平对齐
PRCORANGE的博客
08-06 223
中心对齐 <style> .center { margin:auto; width:70%; background-color:#b0e0e6; } </style> margin设置为auto后，元素会占据在页面中间。 如果宽度是100％，对齐是没有效果的。 使用position属性设置左，右对齐 元素对齐的方法之一是使用绝对定位： <style> .right { position:absolute; right:0px; width:300px;
HTML&CSS基础自学笔记---实现静态网页
10-30
CSS（Cascading Style Sheets）则用于控制网页的布局和视觉效果。 在HTML中，基础标签的使用至关重要。例如，`<h1>`至`<h6>`系列标签用于定义不同级别的标题，它们具有从大到小的语义层次，通常`<h1>`代表主要标题...
精品专题（2021-2022年收藏）css笔记Css笔记.doc
10-02
CSS笔记主要涵盖了如何定义和应用CSS样式，以及常见的样式属性。 **一、CSS引入方式** 1. 内联样式：在HTML元素的`style`属性中直接写CSS样式，例如`;">文本</p>`。 2. 内部样式表：将CSS写在HTML文档的`<head>`...
css笔记2-position 定位
weixin_45145722的博客
03-18 176
又来了一个新比喻：HTML就像是我们买的毛坯房，把一个房子分成卧室，卫生间，客厅，厨房这些不同的结构部分，css就是做装饰，把一个灰秃秃的空房子，装饰成一个漂亮的，温馨的家 在css出现之前，咱们的网页搞纯html来构建，常用表格来构建网页（见到过了） 在书写css的时候，还要引入其他css文件，可以用@import来引入 /* 当然是一个css文件 它依赖其他的css文件 */ @import url('other.css'); 标签选择器：对元素进行选择 所以标签选择器的作用范围非常广啦，因为
Web前端开发笔记-----13.float浮动、position定位
m0_51546204的博客
03-03 216
Web前端开发笔记-----13.float浮动、position定位 文章目录Web前端开发笔记-----13.float浮动、position定位一、float浮动1.float浮动概念和原理2.清除float浮动二、position定位1.relative相对定位2.absolute绝对定位3.fixed绝对定位4.sticky黏性定位5.z-index定位层级三、定位小练习实现下拉菜单 一、float浮动 1.float浮动概念和原理 文档流：   文档流是文档中可显示对象在排列时所占的位置。 f
关于eslint遇到的报错信息以及解决方法
m0_38038767的博客
11-12 1万+
1、 Duplicate key/ Duplicated key 存在重复声明的key值，视情况解决 （PS：在uniapp中 // #ifdef H5 test: 1 // #endif // #ifdef MP-WEIXIN test:2 // #endif 这样的情况也会报错） 2、 Parsing error: x-invalid-end-tag vue/no-parsing-error 这种报错是因为vue将标签渲染为原生标签的时候，有些标签是自闭合的，所以有end标签会报错 解决方法是设置规则
js跨域下载图片
m0_38038767的博客
12-10 7294
有一个常见的需求，就是下载图片。 以以往的经验，使用了a标签的方式进行了下载。如下 <button @click="downloadPic">下载</button> donloadPic () { let url = 'http://a.b.com/test.png' let a = document.createElement('a') a.src = url a.download = 'download.' + url.slice(url.lastIndexOf('.'
uniapp——uni.createSelectorQuery()在微信小程序获取不到节点信息
m0_38038767的博客
11-03 3642
在开发中使用uni.createSelectorQuery().select('.test')的时候拿不到我想要的节点 解决方法： 需要使用.in()方法选取绑定范围 uniapp官网地址 即uni.createSelectorQuery().in(this).select('.test')
阻止form表单回车自动提交
m0_38038767的博客
09-08 2549
方法一： 在form标签中添加οnsubmit="return false;"，例如 <form class="" action="" onsubmit="return false;"></form> 方法二： 为要阻止回车提交的input标签添加οnkeydοwn属性，例如 <input onkeydown="if(event.keyCode == 13){ret...
typescript报错 ***are only available when targeting ECMAScript 2015 and higher
m0_38038767的博客
05-23 2345
在使用ts中的私有变量时，报错了 error TS18028: Private identifiers are only available when targeting ECMAScript 2015 and higher. 我想，大家应该都知道可以用tsc ***.ts -t es5去解决这个问题。 但是很可惜，我在私有变量遇到这个问题的时候，用这个命令依然无效 ...
全面掌握HTML-CSS技术核心要点
3. CSS布局：学习不同的布局方式，如浮动（float）、定位（position）、弹性盒模型（flexbox）和网格布局（grid）。 4. CSS颜色和背景：掌握如何设置文本颜色、背景颜色和图片，以及相关的属性和值。 5. CSS文字和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值