css ＜样式一＞

news2024/11/24 8:56:40 
1. 盒子模型
1.1>boarder

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

boarder  相邻框合并问题

在这里插入图片描述

boarder-classpse 相同的边框会合并在一起
text-alicn  center 文字居中对齐
########### boarder 会撑大盒子的实际大小
一个盒子加了boarder之后会变大的

在这里插入图片描述

 我可以把我的盒子内容进行修改, 减少像素
 

内容距离盒子的位置 叫做内边距

在这里插入图片描述

pading也会影响盒子的大小, 默认是紧贴在一起的
pading-top 内容和上边的距离

在这里插入图片描述

内边距 pading

在这里插入图片描述

pading会增大盒子的

在这里插入图片描述

盒子如果没有wight/hight 则此时pading不会撑大盒子

在这里插入图片描述

宽度不变化  因为我们此时没有撑开宽度
只要有这个属性 宽度就会发生变化
没有指定宽度 和父亲一样宽

浮动 float 

为什么用浮动
多个块级的盒子排成一行
>行内块元素

在这里插入图片描述

#2.0 标准流可以管理竖着排列 浮动可以管理横着排列的

在这里插入图片描述

float left right none

在这里插入图片描述
在这里插入图片描述

eg:

在这里插入图片描述

标准流 如果我加了浮动 后 我就会脱离位置

在这里插入图片描述

 如果我只给粉色的盒子加了浮动 蓝色的盒子没有加浮动 就会显示出这种叠加效果

在这里插入图片描述

 我给我这个盒子加上float_left 意思是 我这个盒子我就有浮动了
2个盒子都设置浮动  就在左边进行排列
所有浮动得盒子都是在一行内进行对齐的，并且是顶端对齐的

在这里插入图片描述

  我给我4个div 都加一个float left 就都向左移动

在这里插入图片描述

浮动得盒子  浏览器变小后 会掉下来,4个浮动的div盒子  浏览器缩小后会掉下来

在这里插入图片描述

如果屏幕再变小的话 会掉下来2个

在这里插入图片描述

 浮动的盒子就会脱标
 浮动的元素具备行内块元素特征
行内元素不能直接设置宽度和高度

在这里插入图片描述

span是行内元素 给宽高是无效的  加了float 之后就可以有宽高了

在这里插入图片描述

我们2个span 行内元素是没有宽高的 所以我们加了float之后 就有行内块元素的特性了  在一行显示 而且
具备行内块元素的特点 第一个在一行上 第二都是有宽度 有高度的

所以给我们行内元素添加了浮动 他就有行内块元素的特性
块级元素也一样  有宽度 有高度 加了浮动效果以后

在这里插入图片描述

不管你以前是什么元素 加了浮动之后都具备行内块元素的特性
父元素管上下 子元素管左右
#  f浮动的元素通常配合父级别使用

在这里插入图片描述

在这里插入代码片

在这里插入图片描述


所以我们的盒子不能直接加浮动 因为他是以浏览器为准  所以我们要以一个盒子包裹
先要准备一个大的父盒子

在这里插入图片描述
在这里插入图片描述

浮动盒子都是启一行的 只不过显示不开了 另起一行了

浮动布局的注意点  浮动和标准流的父盒子搭配
父元素管理上下

在这里插入图片描述
#############################\

 第二个盒子没有浮动就会造成这个问题

在这里插入图片描述

 第二个盒子没有浮动就会造成这个问题

#######################  清除浮动

所有的父盒子都是有高度的么 只有浮动的盒子才能在一行上

在这里插入图片描述

像这种子孩子太多 就不方便给高度,父盒子高度此时就不能写死
因为此时我们不知道有多少产品

我不给父盒子高度 让子盒子撑开,
很多时候父盒子不方便给高度, 浮动的元素是不占有位置的


此时父盒子的高度就是0 ，如果父盒子没有高度  我们的父元素高度就是0

在这里插入图片描述
在这里插入图片描述

		父盒子下面的div 就会拉上去
		父亲没有高度 只要给孩子加了浮动 我父亲高度就变成0  就是因为我父亲没有高度  因为我们此时想用孩子来撑开父亲的高度

		为了解决这个问题 我们要清除浮动

在这里插入图片描述

父亲高度为0 就会影响下面的高度

在这里插入图片描述

父盒子托标  清除浮动  因为i父盒子在很多情况下不需要高度的

在这里插入图片描述
在这里插入图片描述

清除浮动后 父亲有了高度 和子孩子一样  孩子有多高 我子盒子就有多高
孩子有多少不要紧  我能够自动检测高度
不会影响我们的页面布局 清除了浮动

在这里插入图片描述

#########################?
定位

在这里插入图片描述

1. 我们学习定位， 在开发中有什么常见场景  为什么需要定位

在这里插入图片描述
在这里插入图片描述

###############################>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

在这里插入图片描述

########### 或者我们可以让盒子固定到我们屏幕中的位置
 小盒子在我大盒子中间自由移动位置  并且可以压住其他盒子

在这里插入图片描述

####>定位  将盒子定在某一个位置上，所以定位也是摆放盒子，按照定位的方式移动盒子

定位的组成
###  定位模式+边偏移

relation 相对定位

相对定位相对于自身原来位置来走的  -----------？？  不是以浏览器为准 
也不是以父亲为准  是以他原来为准

在这里插入图片描述

 他走之后  他的位置 ？？？？？？ 还在保留
下面的盒子不会跑到他下面

在这里插入图片描述

相对定位不脱标,相对定位 边偏移和浏览器没有关系 和原来的位置有关系
我都是以自己原来位置移动的， 第二条我下面的盒子没有升上去 也就是我没有脱标

在这里插入图片描述

相对定位
相对于自己原来的位置来进行移动的
不脱标  还继续在标准流中 也就是他原来位置还继续保留的

#####################>>>绝对定位  
元素如果加了绝对定位  是根据他的父元素来决定定位的
绝对定位如果没有父亲就会以浏览器对齐  
他有父亲 但是父亲没有定位
你的父亲虽然	已经有了 但是没有定位 所以孩子加了绝对i定位之后还是以浏览器为准

在这里插入图片描述

绝对定位的使用特点 【没有父元素 或者父元素没有定位  子盒子】 就会以浏览器为准

 我要让我里面的盒子在我父元素的中间来回移动

在这里插入图片描述

############>>>>>>>..怎么吧一个绝对定位的盒子约束到规定的父元素中

在这里插入图片描述
在这里插入图片描述

父亲有定位 了 孩子只能在父亲的定位框中
以我父元素为准 
约束我的绝对定位 让我的绝对定位在父盒子里面

在这里插入图片描述

################################
 绝对定位 不再占有位置  脱离标准流
 不保留位置 会浮动下来

在这里插入图片描述

绝对定位是不占有位置的


##  相对定位和绝对定位到底有什么样的场景  什么时候用相对定位 什么时候用绝对定位
 子绝父相 的由来
父盒子必须要加定位来限制我子盒子要在父盒子内部

在这里插入图片描述

fixed 固定定位
 固定定位有什么样的使用场景
  浏览器在滚动的时候 我浏览器元素位置不会滚动

在这里插入图片描述

 什么是浏览器的可视窗口,

在这里插入图片描述

浏览器的可视窗口

在这里插入图片描述

  最简单的固定定位的写法

在这里插入图片描述

 浏览器变大 永远在我这个可视区域的右上角
固定定位是以浏览器的可视窗口为

在这里插入图片描述
在这里插入图片描述

  你加了 固定定位后 会脱标 不占有位置的
不再保留位置的

在这里插入图片描述
在这里插入图片描述

相对定位 不托标 x相对于原来位置移动位置 来移动位置
绝对定位 如果没有父级 或者父级没有定位是以浏览器为基准
##  子绝父相
 三个盒子都加了绝对定位都会托标 基于浏览器 然后 谁在上面

在这里插入图片描述
在这里插入图片描述

定位的 层叠性  使用z-index  让定位的盒子层叠加起来

在这里插入图片描述

绝对定位的盒子剧中

在这里插入图片描述

我给这个div加一个margon 0 auto 就会水平居中

但是加了绝对定位的盒子 加margon 0 auto 就会水平居中  是不启动效果的
只要我加了绝对定位的盒子 默认是贴着我这个浏览器的左侧来显示的
  但是我想让他在整个浏览器的水平居中显示 怎么做

在这里插入图片描述

在这里插入代码片

在这里插入图片描述

你不管怎么做 我box 还是在我可视区 的水平居中 垂直剧中  缩放浏览器

在这里插入图片描述

####  行内元素加了绝对定位和相对定位  也可以直接设置高度、宽度

在这里插入图片描述

  我给我们span 加宽度 或者加高度 只能转换或者加浮动

在这里插入图片描述

 我加了定位之后 我span 行内元素就有宽度和高度了

在这里插入图片描述

  我div 的宽度就是内容的宽度了

在这里插入图片描述

############################

在这里插入图片描述

  float 会把文字全部露出来

在这里插入图片描述

在这里插入代码片

在这里插入图片描述

在这里插入代码片

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

细胞分裂检测系统源码分享

细胞分裂检测系统源码分享

细胞分裂检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…
阅读更多...
大数据Flink（一百二十）：Flink SQL自定义函数（UDF）

大数据Flink（一百二十）：Flink SQL自定义函数（UDF）

文章目录 Flink SQL自定义函数（UDF） 一、概述 二、​​​​​​​自定义标量函数（UDSF） 三、​​​​​​​​​​​​​​自定义聚合函数(UDAF) 四、 ​​​​​​​​​​​​​​自定义表值函数(UDTF) Flink SQL自定义函数…
阅读更多...
re题(20)BUUCTF [GWCTF 2019]pyre

re题(20)BUUCTF [GWCTF 2019]pyre

BUUCTF在线评测 (buuoj.cn) Python解包及反编译: PyInstaller Extractoruncompyle6 - 知乎 (zhihu.com) python撤消： Pycharm撤销操作和代码跳转后退回操作以及消除波浪线操作快捷键_pycharm怎么反撤销-CSDN博客 把.pyc文件变成py文件 把.py文件用记事本打开 cod…
阅读更多...
supermap iclient3d for cesium模型沿路径移动

supermap iclient3d for cesium模型沿路径移动

可以直接settimeout隔一段时间直接设置位置属性，但是得到的结果模型不是连续的移动，如果想要连续的移动，就需要设置一个时间轴，然后给模型传入不同时间时的位置信息，然后就可以了。 开启时间轴 let start Cesium.Jul…
阅读更多...
负载均衡：从理论到实践 ---day04

负载均衡：从理论到实践 ---day04

负载均衡 负载均衡1.什么是负载均衡2.负载均衡的分类硬件负载均衡软件负载均衡选择 3.引入负载均衡的好处 第一个Ribbon实例步骤1：步骤2：步骤3：步骤4： 问题1. 负载均衡的主要目标是什么？2. 负载均衡器的作用是什么&…
阅读更多...
【云岚到家-即刻体检】-day07-2-项目介绍及准备

【云岚到家-即刻体检】-day07-2-项目介绍及准备

【云岚到家-即刻体检】-day07-2-项目介绍及准备 1 项目介绍1）项目简介2）界面原型3）实战目标 2 搭建实战环境1）服务端2）管理端前端工程3）用户端前端工程4）测试 3 熟悉项目代码1）接口文…
阅读更多...
Linux操作系统面试题记录

Linux操作系统面试题记录

一、进程与线程 1.并发和并行的区别 并发：一个cpu处理器处理多个任务； 并行：多个cpu处理器处理多个任务； 2.进程和线程是什么？区别？何时用线程何时用进程？ Linux中其实没有进程线程之分&…
阅读更多...
面试官：讲一讲Spring MVC源码解析

面试官：讲一讲Spring MVC源码解析

好看的皮囊千篇一律、有趣的灵魂万里挑一 文章持续更新，可以微信搜索【小奇JAVA面试】第一时间阅读，回复【资料】获取福利，回复【项目】获取项目源码，回复【简历模板】获取简历模板，回复【学习路线图】获取学习路线图。…
阅读更多...
驱动器磁盘未格式化恢复实战

驱动器磁盘未格式化恢复实战

驱动器磁盘未格式化的深度剖析 在日常的数字生活中，驱动器作为数据存储的重要载体，承载着用户无数的珍贵资料。然而，当遇到“驱动器中的磁盘未被格式化”的提示时，这份平静往往会被瞬间打破。这一状况不仅让用户感到困惑和焦虑&a…
阅读更多...
JZ2440开发板——S3C2440的UART的使用

JZ2440开发板——S3C2440的UART的使用

以下内容源于韦东山课程的学习与整理，如有侵权请告知删除。 一、UART硬件简介 UART，全称是“Universal Asynchronous Receiver Transmitter”，即“通用异步收发器”，也就是我们日常说的“串口”。 它在嵌入式中用途非常广泛&…
阅读更多...
LabVIEW提高开发效率技巧----VI服务器和动态调用

LabVIEW提高开发效率技巧----VI服务器和动态调用

VI服务器（VI Server）和动态调用是LabVIEW中的两个重要功能，可以有效提升程序的灵活性、模块化和可扩展性。通过这两者的结合，开发者可以在运行时动态加载和调用VI（虚拟仪器），实现更为复杂的应用…
阅读更多...
【 html+css 绚丽Loading 】 000052 璇玑转轮

【 html+css 绚丽Loading 】 000052 璇玑转轮

前言：哈喽，大家好，今天给大家分享今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏关注哦 &#x1f…
阅读更多...
实时数仓3.0DWD层

实时数仓3.0DWD层

实时数仓3.0DWD层 DWD层设计要点：9.1 流量域未经加工的事务事实表9.1.1 主要任务9.1.2 思路9.1.3 图解9.1.4 代码 9.2 流量域独立访客事务事实表9.2.1 主要任务9.2.2 思路分析9.2.3 图解9.2.4 代码 9.3 流量域用户跳出事务事实表9.3.1 主要任务9.3.2 思路分析9.3.3 …
阅读更多...
全面掌握 Jest：从零开始的测试指南（下篇）

全面掌握 Jest：从零开始的测试指南（下篇）

在上一篇测试指南中，我们介绍了Jest 的背景、如何初始化项目、常用的匹配器语法以及钩子函数的使用。这一篇篇将继续深入探讨 Jest 的高级特性，包括 Mock 函数、异步请求的处理、Mock 请求的模拟、类的模拟以及定时器的模拟、snapshot 的使用。通过这些技…
阅读更多...
办了房屋抵押经营贷，空壳公司不怕被查吗？续贷不上怎么办？

办了房屋抵押经营贷，空壳公司不怕被查吗？续贷不上怎么办？

很多有房的朋友，想必都办理过抵押经营贷款。但是，当办完房屋抵押经营贷款之后，钱到手了，别光顾着乐呵，贷后管理可是门大学问，稍有不慎，麻烦就找上门了。咱得确保资金用得对路，征信亮…
阅读更多...
windows 使用wsl安装docker

windows 使用wsl安装docker

前言 很多情况下代码开发需要依赖 Linux 系统，比如安装 Docker 容器来实现代码隔离，然而问题是大部分同学的电脑都是 Windows 系统，这时就会出现大量报错，经历过的同学一定是边踩坑边落泪。 如何免费拥有一台 Linux 服务器呢&…
阅读更多...
什么是即时通讯平台

什么是即时通讯平台

在当今数字化时代，高效的沟通和协作是企业成功的关键。为了满足企业的沟通需求，即时通讯平台应运而生。WorkPlus作为一款企业级即时通讯平台，提供了丰富的功能和安全性，助力企业实现高效协作、数字化办公以及推动业务发展。本文将…
阅读更多...
为什么直播要用RTMP？

为什么直播要用RTMP？

为什么要选RTMP 直播使用RTMP（Real-Time Messaging Protocol）协议的原因主要有以下几点： 1. 低延迟特性 RTMP被设计为实时消息传递协议，通过优化传输机制，可以实现较低的传输延迟。这对于直播来说至关重要&#xff…
阅读更多...
LeetCode_sql_day26（184，1549，1532，1831）

LeetCode_sql_day26（184，1549，1532，1831）

描述 184.部门工资最高的员工 表： Employee ----------------------- | 列名 | 类型 | ----------------------- | id | int | | name | varchar | | salary | int | | departmentId | int | -----------------…
阅读更多...
22章 开发高效算法

22章 开发高效算法

1.编写一个程序，提示用户输入一个字符串，然后显示最大连续递增的有序子字符串。分析你的程序的时间复杂度。 import java.util.Scanner;public class Test {public static void main(String[] args) {System.out.println("请输入字符串&#xff1a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023