❤ css布局篇

❤ css布局篇

一、基础布局

(1)居中布局

① 文字居中

<div class="div1">测试文字居中</div>
body {margin: 0;padding: 0;padding: 10%;
}
.div1 {width: 100px;height: 100px;background: cadetblue;text-align: center;
}

在这里插入图片描述

text-align: center;
line-height: 100px;

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

② 单个块元素居中

再添加一个div2

 <div class="div1"><div class="div2"></div></div>body {margin: 0;padding: 0;padding: 10%;}.div1 {width: 200px;height: 100px;background: cadetblue;text-align: center;line-height: 100px;}.div2{width: 20px;height: 20px;background: #fff;display: inline-block;}

效果如下:
在这里插入图片描述

③ 元素绝对居中

  div {position: relative;width: 500px;height: 500px;background-color: pink;
}p {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;background-color: purple;/* translate(-50%, -50%)盒子往上走自己高度的一半 */transform: translate(-50%, -50%);} 

(2)CSS3中的flex布局

单行布局

<div class="content"><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div><div class="contentli"></div>
</div>body {margin: 0;padding: 0;
}
.content {margin: 0 auto;width: 1240px;min-height: 200px;background: cadetblue;padding: 20px;display: flex;justify-content: flex-start;box-sizing: border-box;
}
.contentli {flex: 1;min-height: 160px;background: silver;margin: 10px;min-width: 280px;
}

效果:
在这里插入图片描述

多行布局

加入flex-flow:wrap

// 父盒子.content { display: flex;flex-flow:wrap;justify-content: flex-start;
}

在这里插入图片描述

justify-content属性

justify-content (适用于父类容器上)

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时,这一属性可协助对多余的空间进行分配。当元素溢出某行时,这一属性同样会在对齐上进行控制

语法

justify-content: flex-start | flex-end | center | space-between | space-around————————————————————————————————————————————————————————————————
flex-start:弹性盒子元素向行起始位置对齐,起始位置与该行的起始位置边界对齐flex-end:向行结束位置对齐center:弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐第一个元素与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。space-between:弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数,或该行只有一个子元素,则该值等效于’flex-start’。在其它情况下,第一个元素的边界与行的主起始位置的边界对齐,同时最后一个元素的边界与行的主结束位置的边距对齐,而剩余的伸缩盒项目则平均分布,并确保两两之间的空白空间相等。space-around:弹性盒子元素会平均地分布在行里,两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数,或该行只有一个伸缩盒项目,则该值等效于’center’。在其它情况下,伸缩盒项目则平均分布,并确保两两之间的空白空间相等,同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
————————————————————————————————————————————————————————————————

justify-content: flex-start

在这里插入图片描述

justify-content: flex-end

在这里插入图片描述

justify-content: center
在这里插入图片描述

justify-content: space-between

在这里插入图片描述

justify-content: space-around

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

easyexcel读和写excel

请直接看原文: JAVA使用easyexcel操作Excel-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 之前写过一篇《JAVA操作Excel》&#xff0c;介绍了jxl和poi读写Excel的实现&am…

C语言-写一个简单的Web服务器(三)

上次我们研究了如何将解析web前端的请求&#xff0c;本次内容里我们将服务器的内容响应到前端&#xff0c;让浏览器展示。 响应数据到前端 服务器将数据响应到前端有其必要的返回数据&#xff0c;其结构如下&#xff0c;中间\r\n为换行&#xff0c;这个在不同系统&#xff08;w…

信也科技发布消费者权益保护2023年度报告: 科技驱动、服务为先、合作共建社会化消保体系

3月15日消费者权益日当天&#xff0c;信也科技发布《消费者权益保护2023年度报告》&#xff08;下称《报告》&#xff0c;消费者权益保护简称“消保”&#xff09;。该报告为信也科技消保委员会成立后首份公开披露的消保工作年度总结。《报告》显示&#xff0c;信也科技通过智能…

SRS-220VDC-4Z-10A静态中间继电器 额定电压DC220V 四副转换触点 JOSEF约瑟

系列型号&#xff1a; SRS-24VDC-4Z-8A静态中间继电器&#xff1b;SRS-24VDC-4Z-10A静态中间继电器&#xff1b; SRS-24VDC-4Z-16A静态中间继电器&#xff1b;SRS-24VAC-4Z-8A静态中间继电器&#xff1b; SRS-24VAC-4Z-10A静态中间继电器&#xff1b;SRS-24VAC-4Z-16A静态中…

Gitee 实战配置

一、Gitee 注册帐号 官网&#xff1a;https://gitee.com点击注册按钮。填写姓名。填写手机号。填写密码。点击立即注册按钮 二、安装GIT获取公钥 1.官网下载git下载地址&#xff1a;https://git-scm.com/download/win 2.安装git&#xff0c;双击运行程序&#xff0c;然后一直下…

小程序学习4 mock

services/home.js import { config, cdnBase } from ../../config/index;/** 获取首页数据 */ function mockFetchHome() {const { delay } require(../_utils/delay);const { genSwiperImageList } require(../../model/swiper);return delay().then(() > {return {swip…

代码规范工具

pip install pre-commit然后可以在代码仓里面配置pre-commit pre-commit install这样子代码检查的规范的执行就会注册在git的hook当中 然后可以在pre-commit的config里面配置需要的代码规范&#xff1b; 有些规范可以帮你修改&#xff0c; 有些规范不会帮你修改&#xff0c;只…

Ubuntu虚拟磁盘扩容

1、打开VMware 2、第二步&#xff1a;启动虚拟机后&#xff0c;安装gparted工具&#xff1a;sudo apt-get install gparted 3、第三步&#xff1a;查看设备disk自带工具 4、第四步&#xff1a;选项已经存在的/dev/sda2磁盘&#xff1a;从左到右进行操作“resize” 5、重启…

【Java基础】JVM双亲委派模型

一、什么是JVM的双亲委派模型&#xff1f; 双亲委派模型是类加载器的一种工作机制&#xff0c;是Java设计者为了保证类的安全性和一致性而提出的一种规则(可以理解为类加载器为了加载类时保证类的安全性和一致性而设计的一种规则)。此规则的定义如下&#xff1a; 1、类加载器接…

常量指针,指针常量;函数指针,指针函数;指针数组,数组指针 一文全解!带示例

前言&#xff1a; 最近准备面试&#xff0c;准备把这几个乱人心智的概念一网打尽&#xff0c;顺便记录一下~ 常量指针&#xff0c;指针常量&#xff1a; 且看下面的这些&#xff1a; const int a; int const a; const int *a; int* const a; int const *a const;//带两个con…

【MySQL】3. 库的操作

库的操作 1. 创建数据库 语法&#xff1a; CREATE DATABASE [IF NOT EXISTS] db_name [create_specification [,create_specification] ...]create_specification:[DEFAULT] CHARACTER SET charset_name[DEFAULT] COLLATE collation_name说明&#xff1a; 大写的表示关键字 …

因聚而生 数智有为丨软通动力携子公司鸿湖万联亮相华为中国合作伙伴大会2024

3月14日&#xff0c;以“因聚而生 数智有为”为主题的“华为中国合作伙伴大会2024”在深圳隆重开幕。作为华为的重要合作伙伴和本次大会钻石级&#xff08;最高级&#xff09;合作伙伴&#xff0c;软通动力深度参与本次盛会&#xff0c;携前沿数智化技术成果和与华为的联合解决…

数据资产管理解决方案:构建高效、安全的数据生态体系

在数字化时代&#xff0c;数据已成为企业最重要的资产之一。然而&#xff0c;如何有效管理和利用这些数据资产&#xff0c;却是许多企业面临的难题。本文将详细介绍数据资产管理解决方案&#xff0c;帮助企业构建高效、安全的数据生态体系。 一、引言 在信息化浪潮的推动下&a…

移动云COCA架构实现算力跃升,探索人工智能新未来

近期&#xff0c;随着OpenAI正式发布首款文生视频模型Sora&#xff0c;标志着人工智能大模型在视频生成领域有了重大飞跃。Sora模型不仅能够生成逼真的视频内容&#xff0c;还能够模拟物理世界中的物体运动与交互&#xff0c;其核心在于其能够处理和生成具有复杂动态与空间关系…

【学习】感受野

感受野&#xff08;receptive field&#xff09;是指在神经网络中&#xff0c;某一层输出的特征图上的一个像素点对应输入图像的区域大小。在深度神经网络中&#xff0c;随着网络层数的增加&#xff0c;特征图的感受野也会逐渐增大。这是因为每一层的卷积操作都会扩大感受野。 …

nginx gzip性能优化 —— 筑梦之路

对比使用和不使用gzip static处理 1. 不使用 gzip static 时的 gzip 处理 如果你不使用 gzip_static 而只是 "gzip on"&#xff0c;它每次都会被压缩并发送。 虽然它实际上可能缓存在内存中&#xff0c;但传统观点是 "每次都会执行压缩处理&#xff0c;因此 CP…

机器学习 --- 模型评估、选择与验证

Java实训代码、答案&#xff0c;如果能够帮到您&#xff0c;希望可以点个赞&#xff01;&#xff01;&#xff01; 如果有问题可以csdn私聊或评论&#xff01;&#xff01;&#xff01;感谢您的支持 第1关&#xff1a;为什么要有训练集与测试集 1、下面正确的是&#xff1f;&…

springboot基础配置

SpringBoot 基础配置 SpringBoot 基础配置 application 配置 spring.application.admin.enabled 是否启用admin特性&#xff0c;默认为: falsespring.application.admin.jmx-name 指定admin MBean的名称&#xff0c;默认为: org.springframework.boot:typeAdmin,nameSpringA…

人机交互三原则,网络7层和对应的设备、公钥私钥

人机交互三原则 heo Mandel提出了人机交互的三个黄金原则&#xff0c;它们强调了相似的设计目标&#xff0c;分别是&#xff1a; 简单总结为&#xff1a;控负持面–>空腹吃面 1&#xff0c;用户控制 2&#xff0c;减轻负担 3&#xff0c;保持界面一致 置用户于控制之下&a…

【Maven学习笔记】Maven入门教程(适合新手反复观看学习)

Maven学习笔记 Maven的简要介绍Maven的安装和配置Maven的安装Maven安装的常用配置 Maven的使用入门编写pom编写主代码编写测试代码打包和运行使用Archetype生成项目骨架 Maven核心概念的阐述坐标案例分析依赖依赖的范围传递性依赖依赖范围依赖调节可选依赖Maven依赖常用的技巧 …