css3提供的网页布局

news2024/11/24 15:22:14

css3提供的网页布局

弹性盒子模型(flex box):

设置成弹性盒子

默认横着排放(div也是)

当子盒子给的宽度过大,总的子盒子宽度超过父级盒子,会自动适配,计算整个盒子父级的大小,均匀分配。

目前是横着排列的,横向会自动适配。但是纵向高不会

 

方向为列时,竖向就不会被撑破

元素反向排列:

子元素超出父容器是否换行

默认不换行

换行

父级对齐方式:

子元素在水平方向排列,就指的垂直居中

子元素在竖直方向排列,就指的水平居中

块在水平方向对齐margin设置成auto就可以。主要用在垂直方向上的居中

有这个属性垂直居中,去掉这个属性不生效

 

栅格布局——grid布局

 

四个四个为一行

百分比:

 

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

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

相关文章

MMTracking目标跟踪环境搭建(一)

1、环境搭建 创建conda虚拟环境并激活。 conda create -n mmtrack python3.8 -y conda activate mmtrack 按照官方说明安装 PyTorch 和 torchvision 可以通过指定版本号切换到其他版本。 #如果网不好,可以这样安装 pip3 install torch1.8.2cu102 torchvision0.9…

Vue3 使用存储库Pinia(创建)

前言 使用vue编写项目时,经常用到组件传值,比如父传子、子传父、跨组件传值等,如果项目体量不大的情况这种方式完全够用,但如果项目大,内容丰富,那我们就需要用到状态管理工具——Pinia 官方文档 一、什么…

python优化库scipy.optimize测试(notebook版本)

代码链接notebook 数据准备 使用一个混合高斯分布作为测试(两个均值不同的高斯分布相加),存在两个极值点(-1,-1)和(1,1) # 二维正态分布生成函数 def gaussian2d(x, y, x_mean, y_mean, x_std, y_std):return np.exp(-((x - x_mean) ** 2 …

Linux上安装jdk8环境

Linux上安装jdk8环境 一、Jdk8环境准备二、开始安装1. 创建压缩包位置2. 上传压缩包3. 解压压缩包4. 配置环境变量5. 查看安装版本 一、Jdk8环境准备 java8安装包下载可参考这篇文章:https://blog.csdn.net/qq_39939541/article/details/128065776 二、开始安装 …

1、Redis入门与应用

Redis入门与应用 Redis的技术全景 Redis一个开源的基于键值对(Key-Value)NoSQL数据库。使用ANSI C语言编写、支持网络、基于内存但支持持久化。性能优秀,并提供多种语言的API。 我们要首先理解一点,我们把Redis称为KV数据库&am…

Microsoft Update Assistant导致 MAC 电脑内存占用过高解决方案

目录 问题: 排查原因: 解决方案: 问题: 一直很苦恼,每次开机隔会发下电脑内存就 100%了,这次找了下原因,也记录下. 排查原因: 通过 mac 自带的活动监视器,发现居然是Microsoft Update Assistant它导致的 解决方案: 那这样就简单了,这个应该是 word,execl 的一个自动更新程序…

docker 发布镜像到阿里云容器镜像

1.登录阿里云 2.创建个人版实例,这里需要设置密码,一定要保存好 3.创建一个镜像仓库,个人实例最多创建3个 4.创建命名空间,个人实例最多300个 5.发布镜像到阿里云容器镜像 1、linux登录阿里云docker容器镜像 $ docker login --us…

文献推荐:将生态系统服务保护纳入生态脆弱地区城市规划政策优化——基于情景的案例研究

本文来源:i地理 本研究使用未来城市区域环境模拟 (FUTURES) 模型,以中国呼和浩特为研究区域,模拟量化2015-2023年自然情景、生态优先情景以及经济优先情景下的城市扩张。然后,计算了过去和未来时期关键生态系统服务的价值以及它们…

Hyperledger Fabric测试网络的准备和基本使用

文章目录 相关安装启动测试网络创建channel打包链码安装链码包通过链码定义链码定义提交给通道调用链码关闭网络遇到的问题1.docker保持启动状态2.忘起测试网络了3.Java版本过高,推荐1.8 相关安装 npm、node、git、docker、docker-compose。docker保证一直运行 serv…

考试系统的优势与劣势对比分析

考试是对学生学习成果的一种评估方式,而考试系统作为一种管理工具,可以有效地帮助学校和教师进行考试的组织和管理。然而,考试系统也存在一些优势和劣势。 一、优势 1. 方便快捷 考试系统的一个显著优势是它的方便快捷。学生可以通过电子设…

网络排查工具:MTR 命令使用详解

MTR 是一款强大的网络诊断工具, 全称 my traceroute,是一个把 ping 和 traceroute 合并到一个程序的网络诊断工具。默认发送ICMP数据包进行链路探测。 MTR的安装:yum -y install mtr 查看本机到 www.baidu.com 的路由以及连接情况直接运行如…

经典地理加权回归,半参数地理加权回归、多尺度地理加权回归、地理加权主成份分析、地理加权判别分析......

在自然和社会科学领域有大量与地理或空间有关的数据,这一类数据一般具有严重的空间异质性,而通常的统计学方法并不能处理空间异质性,因而对此类型的数据无能为力。以地理加权回归为基础的一系列方法:经典地理加权回归,…

机器学习实战 | 深度学习初级项目学习和总结

目录 简介神经网络类型和用法总结1. 卷积神经网络CNN特点结构用处 2. 循环神经网络RNN特点结构用处 3. 长短期记忆网络LSTM特点结构用处 基于Keras的神经网络用法总结1. 创建2. 编译3. 训练4. 保存5. 预测 简介 准备写个系列博客介绍机器学习实战中的部分公开项目。首先从初级…

二叉树进阶(搜索二叉树)

目录 引言 1.二叉搜索树的模拟实现 1.1 链式二叉树的定义 1.2 二叉搜索树的模拟实现 1.2.1 二叉搜索树的结点类 1.2.2 二叉搜索树类的构造与中序遍历实现 1.2.3 增 1.非递归实现 2.非递归实现 1.2.4 查 1.非递归实现 2.递归实现 1.2.5 删 1.非递归实现 (1)情…

【无标题】visual studio2019+Qt5.15.2+PCL1.12.1+vtk9.1.0+cmake3.22.2

安装VS------安装Qt-------安装PCL------安装cmake-----安装VTK-----环境配置 安装用了两天时间 1环境搭建 1.1 Visual Studio 2019 (PCL所需版本) https://my.visualstudio.com/Downloads?qvisual%20studio%202019&wt.mc_idomsftvscom~older-downloads 1.2 Qt安装 …

MySQL为什么要使用B+树做索引?MySQL索引存储模型推演,B+树在MySQL的落地形式

文章目录 一、什么是索引1、索引初体验2、索引图解3、索引类型 二、索引存储模型推演1、二分查找2、二叉查找树(BST Binary Search Tree)3、平衡二叉树(AVL Tree)(左旋、右旋)(1)平衡…

openGauss学习笔记-08 openGauss 数据类型

文章目录 openGauss学习笔记-08 openGauss 数据类型8.1 数值类型8.2 布尔类型8.3 字符类型8.4 二进制类型8.5 日期/时间类型8.6 几何类型8.7 网络地址类型8.8 位串类型8.9 文本搜索类型8.10 UUID数据类型8.11 JSON/JSONB类型8.12 HLL数据类型8.13 范围类型8.14 索引8.15 对象标…

C++笔记之虚析构函数的作用

C笔记之虚析构函数的作用 C中的虚析构函数用于确保通过基类指针删除派生类对象时,能正确调用派生类的析构函数,从而释放派生类对象所占用的资源。 在C中,析构函数用于释放对象所占用的资源,并进行清理操作。它与类的构造函数相对…

飞书ChatGPT机器人 – 打造智能问答助手

文章目录 前言环境列表1.飞书设置2.克隆feishu-chatgpt项目3.配置config.yaml文件4.运行feishu-chatgpt项目5.安装cpolar内网穿透6.固定公网地址7.机器人权限配置8.创建版本9.创建测试企业10. 机器人测试 前言 在飞书中创建chatGPT机器人并且对话,在下面操作步骤中…

spring cloud 之 Hystrix

Hystrix概述 Hystrix是一个供分布式系统使用,提供延迟和容错功能,保证复杂的分布系统在面临不可避免的失败是时,仍具有弹性。 当服务器A调用服务器B时,如果服务器B宕机,则服务器A不去调用。当服务器B在时间范围内未响…