首页 > 其他分享 >前端的一些布局技巧

前端的一些布局技巧

时间:2023-09-23 16:11:37浏览次数:48  
标签:flex 元素 盒子 技巧 主轴 前端 布局 设置 属性

一、当前页面无拖动的滑轮

这个只需要设置占据整个页面容器的高为100vh,页面的body的margin为0就行了

body{
    margin: 0;
}
.最大容器类名{
    height: 100vh;
}

二、flex布局

display:flex就是将盒子设置成一个弹性盒子,弹性布局属性,还可以赋值block块级、inline行内等属性。当我们将盒子设置成flex后,子元素的float、clear和vertical-align属性将会失效。

flex-direction是设置主轴方向,默认主轴x轴水平向右,侧轴y轴垂直向下,子元素是跟着主轴来排列的。有四个属性值:row(默认值),主轴水平方向,从左向右;row-reserve,主轴水平方向,从右向左;column,主轴垂直方向,从上到下;column-reserve,主轴垂直方向,从下到上。

justify-content用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,有多个属性。

1、设置盒子中的元素沿着y轴从上到下排列,且元素垂直居中。

.类名{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

2、设置盒子中的元素两端对齐

.类名{
    display: flex;
    justify-content: space-between;
}

 

标签:flex,元素,盒子,技巧,主轴,前端,布局,设置,属性
From: https://www.cnblogs.com/panglinglong/p/17723340.html

相关文章

  • springboot 接收前端数组
    前端:(黄色内容为必选项!!!)axios({url:"/access/getArr",method:"post",data:JSON.stringify([1,2,3,4]),headers:{"Content-Type":"application/json",},});后端:@RequestMapping(value=......
  • 微软最热门的10款前端开源项目!
    本文来盘点微软开源的十大前端项目,这些项目在Github上获得了超过45万Star!VisualStudioCodeVisualStudioCode是一款由微软开发的开源的代码编辑器。它支持多种编程语言,如C、C++、C#、Python、JavaScript和TypeScript等,并提供丰富的插件生态系统来扩展功能。VSCode......
  • 前端安装pnpm 包报错
    安装pnpm包管理器全局安装npminstallpnpm-g设置源pnpmconfiggetregistry//查看源pnpmconfigsetregistryhttp://registry.npm.taobao.org//切换淘宝源使用:pnpminstall包pnpmi包pnpmadd包//-S默认写入dependenciespnpmadd-D//-Dde......
  • 非常有用的JavaScript高阶面试技巧
    ......
  • 前端 数学计算 big.js 使用
     解决0.1+0.2不等于0.3的问题 解决方法方法一,同时扩大倍数再除以相同的倍数 0.1+0.2//0.30000000000000004(0.1*10+0.2*10)/10//0.3方法二,第三方库bignumber.jsmath.jsbig.js big.js基础用法运算//运算//constplus=Big(0.1).p......
  • springboot数据传到前端在echarts中显示
    后端正常返回查询所有的信息前端使用echarts.min.js和jquery.min.js进行使用ajax使用:$(document).ready(function(){$.ajax({url:'http://localhost:7070/selectHang',//你的urlmethod:'GET',//方法名......
  • 【Java 基础篇】玩转 Java String:技巧与实践
    在Java编程中,字符串(String)是一个非常常见的数据类型,用于存储文本信息。无论是处理用户输入、读取文件内容还是与外部系统进行通信,字符串都扮演着重要的角色。本篇博客将深入讨论Java中的字符串(String):什么是字符串,如何创建和操作字符串,以及一些常见的字符串操作方法。什么是字符串?字......
  • 前端上传大文件处理(切片、断点续传)
    思路1.对文件做切片,即将一个请求拆分成多个请求,每个请求的时间就会缩短,且如果某个请求失败,只需要重新发送这一次请求即可,无需从头开始2.通知服务器合并切片,在上传完切片后,前端通知服务器做合并切片操作3.控制多个请求的并发量,防止多个请求同时发送,造成浏览器内存溢出,导致页......
  • 前端学习笔记202309学习笔记第九十三天-面向对象38
     ......
  • 前端学习笔记202309学习笔记第九十三天-面向对象37
     ......