布局

最新推荐文章于 2024-05-22 08:57:04 发布
最新推荐文章于 2024-05-22 08:57:04 发布
阅读量329 收藏 1
点赞数
分类专栏： web前端学习 CSS 文章标签： 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012999771/article/details/48471757
版权
  • position—设置定位方式
  • top, right, bottom, left, z-index—设置元素位置
  • 如果定位元素没有设置宽高，使用top right left等会拉伸元素
  • z-index:元素在z轴的位置，默认值为0；
  • z-index栈：

z-index栈的具体事例

position

relative相对定

  1. 元素仍然在文档流中
  2. 元素参照物为元素本身原来的位置
  3. 最常用场景：改变层级和绝对定位元素的参照物

absolute

  1. 绝对定位元素为默认宽度为内容宽度
  2. 脱离文档流
  3. 绝对定位元素的定位元素是第一个定位祖先元素/根元素<html>。

fixed

  1. 默认宽度为内容宽度
  2. 脱离文档流
  3. 参照物是视窗
  4. 固定顶栏布局
    布局--固定顶栏核心代码
布局–遮罩

比如登录时全屏置灰的效果就为遮罩效果
position:fixed的参照物是视窗 z-index:999层级为最高

三行中间自适应布局

  1. 顶栏固定，底栏固定，中间自适应
  2. 核心代码position:fixed
  3. 实例代码这里写图片描述
    代码中的top right bottom left 是为了扩展.body元素空间

float

当一个元素设置浮动属性时
1. 默认宽度为内容宽度
2. 脱离文档流
3. 向指定方向移动
4. float的元素在同一文档流中
5. float元素半脱离文档流，也就是说对元素，脱离文档流，对内容，在文档流。所以如图这里写图片描述
这里写图片描述

flex弹性布局

flex container :弹性容器
flex item：在文档流中的子元素为弹性元素
如何确定弹性容器中的元素是否为弹性元素

方向

  • flex-direction
    决定弹性元素排列方向

  • flex-wrap

  • flex-flow
  • order

弹性

  • flex-basis
    flex-basis:main-size |
    设置flex item的初始宽高

  • flex-grow
    flex-grow:<number>
    initial:0
    为弹性元素分配剩余的空间，按照比例。
    弹性元素大小为：flex-basis + flex-grow值/sum(flex-grow) *remain 剩余空间值；

  • flex-shrink
    flex-shrink:<number>
    initial:1
    让弹性元素平均分摊超出的空间，按照比例。
    弹性元素大小为：flex-basis + flex-shrink值/sum(flex-shrink) *remain 负空间值；

flex样式简写

  • flex:<'flex-grow'> || <'flex-shrink'> ||<'flex-basis'>
  • initial: 0 1 main-size;

对齐

justify-content

占据空间比例

align-items

设置全部flex item在cross-axis方向上对齐方式
全部弹性元素的对齐方式

align-self

设置单个flex item在cross-axis方向上对齐方式

flex ie9及以下不支持，目前主要用于移动web页面中

什么石头
关注
专栏目录
Android开发Android Studio六大基本布局详解
qq_30725967的博客
06-17 3033
本文详解Android Studio六大基本布局。
Android六大布局
是阿超
10-24 2173
Android六大布局
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 15万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
Flex布局
暗武逢天的博客
08-05 3万+
​ Flex 是 Flexible Box 的缩写，意为 “ 弹性布局 ” ，用来为盒状模型提供最大的灵活性。 ​ 任何一个容器都可以指定为 Flex 布局。
网站开发进阶（六十二）最强大的 CSS 布局——Grid 布局
IT全栈 华强工作室
03-15 9万+
Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆。Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性。可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置。属性：左边框所在的垂直网格线；属性：右边框所在的垂直网格线；属性：上边框所在的水平网格线；属性：下边框所在的水平网格线；
BorderLayout布局
静Yu的博客
01-31 3641
BorderLayout布局管理器  BorderLayout类在java.awt包中  JFrame类的默认布局是BorderLayout  BorderLayout布局把容器划分为东、西、南、 北、中五个区域，中间区域最大  添加组件的方法有两个： • add(x, BorderLayout.pos) • add(BorderLayout.pos, x) • pos是NORTH, SOUTH, EAST, WEST, CENTER之一 BorderLayout布局  东、西区和南、北区充满程
【移动端网页布局】Flex 弹性布局案例 ③ ( 横向导航栏 | 固定定位下面的布局设置 | 设置横向导航栏弹性布局 | 弹性布局主轴和侧轴设置 | 二倍精灵图 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-16 5086
一、横向导航栏实现核心要点 1、固定定位下面的布局设置 2、设置横向导航栏弹性布局 3、弹性布局主轴和侧轴设置 4、二倍精灵图 二、代码示例 1、HTML 标签结构 2、CSS 样式 3、展示效果
flex布局
weixin_46413834的博客
07-22 3260
什么是flex布局？它的由来由于传统的布局解决方案太过复杂，例如垂直居中、两端固定中间自适应。2009年，W3C提出了一种新的方案——flex布局也叫伸缩布局，flex布局它有什么好处？好处简单、灵活、自适应。......
【Qt】布局之道：Qt界面设计中的五大布局管理器：垂直布局QVBoxLayout,水平布局QHBoxLayout,网格布局QGridLayout,表单布局QFormLayout,QSpacerItem
最新发布
Colorful___的博客
05-22 3231
在现代软件开发中，用户界面的设计和布局是至关重要的一环。一个直观、美观且响应式的界面不仅能提升用户体验，还能使应用更加易于使用。Qt框架，作为跨平台开发的强大工具，提供了多种布局管理器来帮助开发者轻松实现复杂界面的布局。本文将详细介绍Qt中的五种主要布局管理器：垂直布局、水平布局、网格布局、表单布局以及Spacer的使用，并通过代码示例展示如何使用这些布局管理器来创建灵活且自适应的界面。之前把控件放到界面上，都是靠“手动”的方式来布局的。这种调整方式是不科学的!手动布局的方式非常复杂，而且不精确。
android 布局 orientation,布局 Android
weixin_31001739的博客
05-27 6848
1.线性布局LinearLayout又称作线性布局，是一种非常常用的布局。通过android:orientation属性指定了排列方向是vertical还是horizontal。如果LinearLayout的排列方向是horizontal，内部的控件就绝对不能将宽度指定为match_parent,因为这样的话，单独一个控件就会将整个水平方向占满，其他的控件就没有可放置的位置了。同样的道理,如果Li...
QT布局：实现动态布局
05-01
首先，QT中的布局分为几种类型，包括网格布局（QGridLayout）、垂直布局（QVBoxLayout）、水平布局（QHBoxLayout）以及流式布局（QFormLayout）。这些布局可以根据需求选择合适的类型，以实现不同方向或结构的控件...
Android布局之GridLayout网格布局
01-04
网格布局标签是GridLayout。这个布局是android4.0新增的布局。这个布局只有4.0之后的版本才能使用。 不过新增了一些东东 ①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式 ②容器中的组件可以跨多行...
微信小程序 瀑布流布局 (源码)
05-31
微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...
android布局_Android布局_android_
10-01
在Android开发中，布局（Layout）是构建用户界面的基础元素，它定义了屏幕上各个组件的排列方式和相互关系。本文将深入探讨Android布局的各种类型及其使用方法，旨在帮助开发者更好地理解和掌握Android应用的UI设计...
CSS布局之圣杯布局与双飞翼布局
09-24
圣杯布局与双飞翼布局是CSS布局领域中经典的两种布局方法，主要用来创建一种具有左右两栏固定宽度，中间内容部分自适应宽度的布局结构。这两种布局技术在Web页面设计中应用广泛，尤其是在响应式设计中，它们能够很好...
动画animation
u012999771的专栏
09-16 441
动画确定产生动画效果的帧名 - animation-name 定义关键帧名 - animation-name：<single-animation-name> [',' <single-animation-name>]* <single-animation-name> = none | <ID
Date
u012999771的专栏
09-21 424
表示当前时间//当前时间 new Date(); //设定具体时间 2014年12月5日 new Date(2014,11,5);//注意JS里面月份是从0开始计数的。所以这里11就是12月份。创建日期new Date(); new Date(year,month[,day[,minutes[,seconds[,milliseconds]]]]);//最少传year month两个参数，day默认0
Ajax
u012999771的专栏
09-30 404
异步的JavaScript和XMLAjax对象的创建实现程序:var oBtn = document.getElementById('bt'); oBtn.noclick = function(){ var xhr = new XMLHttpRequest(); xhr.open('get','1.txt',true); xhr.send(); xhr.onreadys
数组
u012999771的专栏
09-21 399
创建数组创建数组有两种方式方式1：关键字形式 var array = new Array(); 方式2：字面量形式 var array = [];//常用 var array = [1,2,3,"hell"]; 数组中的元素类型可以不同 var students = [ {id:1, score:80}, {id:2, score:46}, {id:3, socre:36}
DIV层布局与网页布局技术
"DIV层布局-04 网页布局.PPT" 本次学习目标是围绕DIV层布局，了解其优缺点和应用场合，并学习如何使用框架和DIV层技术进行网页布局。 一、DIV层布局的优缺点和应用场合 DIV层布局是一种常用的网页布局方式，其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值