【CSS】(浮动定位)易忘知识点汇总

浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1、浮动元素会脱离标准流(脱标:浮动的盒子不再保留原先的位置)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2、浮动的元素会一行内显示并且元素顶部对齐

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

注意: 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。

3、浮动的元素会具有行内块元素的特性

​ 浮动元素的大小根据内容来决定

​ 浮动的盒子中间是没有缝隙

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- space / break-word
  4. 其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

举例:

 .jdc {display: block;position: relative;float: left;width: 100px;height: 100px;margin: 0 10px;padding: 20px 0;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;color: #333;background: rgba(0,0,0,.5);border-radius: 10px;} 

导航栏注意点:

实际开发中,重要的导航栏,我们不会直接用链接a ,而是用 li 包含链接(li+a)的做法

注意:

​ 1.让导航栏一行显示, 给 li 加浮动, 因为 li 是块级元素, 需要一行显示.

​ 2.这个nav导航栏可以不给宽度,将来可以继续添加其余文字

​ 3.因为导航栏里面文字不一样多,所以最好给链接 a 左右padding 撑开盒子,而不是指定宽度

定位组成

定位:将盒子在某一个位置,所以定位也是在摆放盒子, 按照定位的方式移动盒子

定位也是用来布局的,它有两部分组成:

定位 = 定位模式 + 边偏移

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。

1 边偏移(方位名词)

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

边偏移属性示例描述
toptop: 80px顶端偏移量,定义元素相对于其父元素上边线的距离
bottombottom: 80px底部偏移量,定义元素相对于其父元素下边线的距离
leftleft: 80px左侧偏移量,定义元素相对于其父元素左边线的距离
rightright: 80px右侧偏移量,定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。 一般情况下,凡是有定位地方必定有边偏移。

2 定位模式 (position)

在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:

选择器 { position: 属性值; 
}

定位模式是有不同分类的,在不同情况下,我们用到不同的定位模式。

定位模式决定元素的定位方式 ,它通过 CSS 的 position 属性来设置,其值可以分为四个:

语义
static静态定位
relative相对定位
absolute绝对定位
fixed固定定位

3 定位口诀 —— 子绝父相

弄清楚这个口诀,就明白了绝对定位和相对定位的使用场景。

这个**“子绝父相”太重要了,是我们学习定位的口诀**,是定位中最常用的一种方式这句话的意思是:子级是绝对定位的话,父级要用相对定位。

因为绝对定位的盒子是拼爹的,所以要和父级搭配一起来使用。

①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方,不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时,需要占有位置,因此父亲只能是相对定位。

这就是子绝父相的由来,所以相对定位经常用来作为绝对定位的父级

总结: 因为父级需要占有位置,因此是相对定位, 子盒子不需要占有位置,则是绝对定位

当然,子绝父相不是永远不变的,如果父元素不需要占有位置,子绝父绝也会遇到。

4 固定定位(fixed) - 重要
  • 固定定位是元素固定于浏览器可视区的位置。(认死理型) 主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

  • 语法:

     选择器 { position: fixed; }
    
  • 固定定位的特点:(务必记住):

    1.以浏览器的可视窗口为参照点移动元素。

    • 跟父元素没有任何关系
    • 不随滚动条滚动。

    2.固定定位不在占有原先的位置

  • 固定定位也是脱标的,其实固定定位也可以看做是一种特殊的绝对定位。(认死理型)

    • 完全脱标—— 完全不占位置;
    • 只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;
      • 跟父元素没有任何关系;单独使用的
      • 不随滚动条滚动。

固定定位(fixed)之固定在版心右侧

  1. left: 50%;:让**.让固定定位的盒子移动到浏览器可视区的一半位置**;
  2. margin-left: **px;:让固定定位的盒子向左移动版心宽度的一半距离
.fixed {position: fixed;/* 1. 走浏览器宽度的一半 */left: 50%;/* 2. 利用margin 走版心盒子宽度的一半距离 */margin-left: 405px;width: 50px;height: 150px;background-color: skyblue;}

粘性定位(sticky) - 了解

(开始随滚动条滚动,待到一定位置时,位置固定)
粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

  • 语法:

     选择器 { position: sticky; top: 10px; }
  • 粘性定位的特点:

    1.以浏览器的可视窗口为参照点移动元素(固定定位特点)

    2.粘性定位占有原先的位置(相对定位特点)

    3.必须添加 top 、left、right、bottom 其中一个才有效

    跟页面滚动搭配使用。 兼容性较差,IE 不支持。

定位总结

在这里插入图片描述

堆叠顺序(z-index)

  • 在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用 z-index 来控制盒子的前后次序 (z轴)

  • 语法:

    选择器 { z-index: 1; 
    }
    
  • z-index 的特性如下:

    1. 属性值正整数负整数0,默认值是 0,数值越大,盒子越靠上;
    2. 如果属性值相同,则按照书写顺序,后来居上
    3. 数字后面不能加单位

    注意z-index 只能应用于相对定位绝对定位固定定位的元素,其他标准流浮动静态定位无效。

绝对定位的盒子居中

注意:加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中

但是可以通过以下计算方法实现水平和垂直居中,可以按照下图的方法:

在这里插入图片描述

  1. left: 50%;:让盒子的左侧移动到父级元素的水平中心位置
  2. margin-left: -100px;:让盒子向左移动自身宽度的一半

定位特殊特性

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

1.行内元素添加绝对或者固定定位,可以直接设置高度和宽度。

2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

前面我们讲过, display 是 显示模式, 可以改变显示模式有以下方式:

  • 可以用inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块(类似,并不完全一样,因为浮动是脱标的)
  • 绝对定位和固定定位也和浮动类似, 默认转换的特性 转换为行内块。

所以说, 一个行内的盒子,如果加了浮动固定定位绝对定位,不用转换,就可以给这个盒子直接设置宽度和高度等。

脱标的盒子不会触发外边距塌陷

浮动元素、**绝对定位(固定定位)**元素的都不会触发外边距合并的问题。 (我们以前是用padding border overflow解决的)

也就是说,我们给盒子改为了浮动或者定位,就不会有垂直外边距合并的问题了。

绝对定位(固定定位)会完全压住盒子

浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字(图片)

但是绝对定位(固定定位) 会压住下面标准流所有的内容。

浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果的。 文字会围绕浮动元素

overflow 溢出(重点)

  • overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时,会发生什么。
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/268777.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用于游戏开发的顶级 PYTHON 框架

一、说明 我们试图用python开发游戏,一旦产生这个念头,就伴随这样一个问题:当今用于构建游戏的领先 Python 框架有哪些?python下,支持游戏开发平台有哪些优势?我们在这篇博文中告诉你。 二、高级游戏平台简…

nginx使用详解--缓存

Nginx 是一个功能强大的 Web 服务器和反向代理服务器,它可以用于实现静态内容的缓存,缓存可以分为客户端缓存和服务端缓存。 客户端缓存 客户端缓存指的是浏览器缓存, 浏览器缓存是最快的缓存, 因为它直接从本地获取(但有可能需要发送一个协商缓存的请…

NOIP 2009普及组初赛试题及解析

NOIP 2009普及组初赛试题及解析 一. 单项选择题 (共20题,每题1.5分,共计30分。每题有且仅有一个正确答案.)。二. 问题求解(共2题,每题5分,共计10分)三. 阅读程序写结果(共…

【精选】Java项目介绍和界面搭建——拼图小游戏 上

🍬 博主介绍👨‍🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏 …

MYSQL---日志

1.日志的概述 日志是MySQL数据库的重要组成部分。日志文件中记录着MySQL数据库运行期间发生的变化;也就是说用来记录MySQL数据库的客户端连接状况、SQL语句的执行情况和错误信息等。当数据库遭到意外的损坏时,可以通过日志查看文件出错的原因&#xff0…

【Web】速谈FastJson反序列化中JdbcRowSetImpl的利用

目录 简要原理分析 exp 前文:【Web】速谈FastJson反序列化中TemplatesImpl的利用 简要原理分析 前文的TemplatesImpl链存在严重限制,即JSON.parseObject()需要开启Feature.SupportNonPublicField fastjson的第二条链JdbcRowSetImpl,主要…

2024年,只有搞颜色的P站真正关心网站性能

2024 年,大家觉得一个网站 JS 文件的平均大小应该是多少?1MB、5MB、10MB,还是更加大呢? 近年来,层出不穷的现代化前端技术让人眼花缭乱,让网站拥有了更多的交互和丰富的功能,再加上终端设备的配置越来越高,许多网站似乎不用再过分担心性能问题 —— 常常打开网站就要下…

EI论文部分复现:含VSC-HVDC的交直流系统内点法最优潮流计算Simulink模型!

适用平台:MatlabSimulink;复现内容:VSC-HVDC模型 简介 高压直流传输系统主要包括换流站、输电线路和终端设备,其中换流站起着关键作用,他可以实现交流整流和直流逆变。常见的HVDC系统有全桥式、半桥式和两水平VSC等。…

spring boot学习第十三篇:使用spring security控制权限

该文章同时也讲到了如何使用swagger。 1、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instanc…

PackagingTool_x64_v2.0.1.0图片转档打包二进制文件合并字库生成图片软件介绍

继去年12月份发布的打包软件PackagingTool v1.4.0.2之后&#xff0c;今年再度投入精力&#xff0c;完善了软件功能&#xff0c;同时开发了几个更加实用的工具&#xff0c;可助力UI界面的设计开发。当前最新版本为PackagingTool_x64_v2.0.1.0&#xff0c;该版本主界面如下&#…

二叉树(C/C++)

本篇将较为详细的介绍二叉树的相关知识&#xff0c;以及二叉树的实现。对于二叉树的相关知识&#xff0c;本篇介绍了其概念、特殊的二叉树、性质还有存储结构。 接着对于实现二叉树的每个函数都有其思路讲解&#xff0c;主要的函数分为&#xff1a;遍历&#xff1a;前中后序遍历…

什么是网络安全、信息安全、计算机安全,有何区别?

这三个概念都存在&#xff0c;一般人可能会混为一谈。 究竟它们之间是什么关系&#xff1f;并列&#xff1f;交叉&#xff1f; 可能从广义上来说它们都可以用来表示安全security这样一个笼统的概念。 但如果从狭义上理解&#xff0c;它们应该是有区别的&#xff0c;区别在哪呢&…

buuctf misc做题笔记

喵喵喵 使用stegsolve.jar&#xff0c;按BGR顺序提取出一个png图片&#xff0c;是一个只显示一半的二维码&#xff0c;修改图片高度显示全部二维码&#xff0c;解析出一个百度网盘地址&#xff0c;https://pan.baidu.com/s/1pLT2J4f 下载得到压缩包flag.rar。解压成功&#xf…

MQL5学习之简单移动平均线MA的编写

昨天还是有点高估自己了&#xff0c;MACD相对较难一点&#xff0c;改学MA的编写&#xff0c;首先明确MA的计算&#xff0c;假如有4个值&#xff0c;p[1&#xff0c;2&#xff0c; 3&#xff0c; 4], period3, 则v[0]p[0], v[1]p[1],v[2](p[0]p[1]p[2])/32, v[3](v[2]*3p[3]-p…

lv20 QT主窗口4

熟悉创建主窗口项目 1 QAction 2 主窗口 菜单栏&#xff1a;fileMenu menuBar()->addMenu(tr("&File")); 工具栏&#xff1a;fileToolBar addToolBar(tr("File")); 浮动窗&#xff1a;QDockWidget *dockWidget new QDockWidget(tr("Dock W…

HTTP Cookie 你了解多少?

Cookie是什么&#xff1f; 先给大家举个例子&#xff0c;F12 打开浏览器的页面之后&#xff0c;我们能在 Response Headers 的字段里面看到一个header 叫做 Set-Cookie&#xff0c;如下所示 图中包含的 Set-Cookie 为 Set-Cookie:uuid_tt_dd10_20293537580-1709432565344-232…

HTTP有什么缺陷,HTTPS是怎么解决的

缺陷 HTTP是明文的&#xff0c;谁都能看得懂&#xff0c;HTTPS是加了TLS/SSL加密的&#xff0c;这样就不容易被拦截和攻击了。 SSL是TLS的前身&#xff0c;他俩都是加密安全协议。前者大部分浏览器都不支持了&#xff0c;后者现在用的多。 对称加密 通信双方握有加密解密算法…

如何利用pynlpir进行中文分词并保留段落信息

一、引言 nlpir是由张华平博士开发的中文自然处理工具&#xff0c;可以对中文文本进行分词、聚类分析等&#xff0c;它既有在线的中文数据大数据语义智能分析平台&#xff0c;也有相关的python包pynlpir&#xff0c;其github的地址是&#xff1a; Pynlpir在Github上的地址 这…

Manacher

Manacher #include<bits/stdc.h> using namespace std; ​ const int N 1e6 9; char s[N]; int p[N]; int mian() {cin >> s 1;int n strlen(s 1);for (int i 2 * n 1; i > 1; --i)s[i] (i & 1) ? # : s[i >> 1];s[0] ^, s[2 * n 2] $;in…

typescript 的常用方式

文章目录 前言一、绑定props 默认值的方式&#xff1a;withDefaults1.vue2 的props设置默认值2.vue3 的props设置默认值(1) 不设置默认值的写法(2) 设置默认值的写法&#xff08;分离模式&#xff09;(3) 设置默认值的写法&#xff08;组合模式&#xff09; 二、定义一个二维数…