当前位置: 首页 > news >正文

浮动布局,定位布局,伸缩盒布局

布局
  默认文档流
    1.元素显示的顺序和代码的顺序是一致的
    2.块级元素独占一行空间,默认宽度为父元素的100%,高度由内容或者子元素决定
    3.行内元素共享一行空间,默认宽高都由内容决定
  浮动布局
    float(如果一个元素添加float属性,那么这个元素就会成为一个浮动元素)
      left  向左浮动
      right  向右浮动
      none  不浮动
      inherit  浮动方式继承父元素
    浮动元素的特点
      1.当一个元素是浮动元素的时候,他会失去对父元素的支撑
    清除浮动
      1.给父元素添加overflow:hidden
      2.使用伪元素

定位布局
  position
    static  静态(默认)  非定位元素
    relative  相对定位  定位元素
              相对的是元素原先的值,不脱离文档流(还占据原先位置),宽度默认还是100%,可以覆盖在原先位置上
    absolute  绝对定位  定位元素
              相对的是距离它最近的父定位元素的位置,如果没有父定位元素,那么它相对于浏览器视口
              脱离文档流(不占据原先的位置)
    fixed  固定定位  定位元素
           相对于浏览器视口
           脱离文档流
           不会随着浏览器的滚动而滚动
    sticky  粘滞定位  定位元素
            不脱离文档流
            使用top/right/bottom/left设置一个过渡点,当超过这个过渡点的时候就会体现fixed固定在页面上
    脱离文档流的特点:默认宽度由内容决定,不占据原先的位置(原先的位置被其它元素抢占)
  只有定位元素才可以使用top,right,bottom,left,z-index
  flex布局(伸缩盒布局)
    1.比较:
      传统布局
        兼容性好
        布局繁琐
        局限性,不能在移动端很好的布局
      flex弹性布局(伸缩盒布局)
        操作方便,布局极为简单,移动端应用很广泛
        PC端浏览器支持情况较差
        IE11或更低版本,不支持或部分支持
    2.原理
      任何一个容器都可以指定为flex布局
        采用Flex布局的元素,称为flex容器,他的所有资源股市称为flex项目
        容器默认存在两根轴:水平的主轴和垂直的交叉轴
      当我们为父盒子 设为flex布局后,子元素的float,clear属性即将失效
      给父元素设置display:flex,达到控制子元素的目的
    3.常见父项(容器)属性
      flex-direction:设置主轴的方向
        row(默认):主轴为水平方向,起点在左端
        row-reverse:主轴为水平方向,起点在右端
        column:主轴为垂直方向,起点在上沿
        column-reverse:主轴为垂直方向,起点在下沿
      justify-content:设置主轴上的子元素排列方式
        flex-start:左对齐
        flex-end:右对齐
        center:居中
        space-between:两端对齐,项目之间的间隔都相等
        space-around:每个项目两侧间隔相等,所以,项目之间间隔比项目与边框的间隔大一倍
      flex-wrap:设置子元素是否换行
        nowrap(默认):不换行
        wrap:换行,第一行在上方
        wrap-reverse:换行,第一行在下方
      align-content:设置侧轴上的子元素的排列方式(多行)
        flex-start:与交叉轴的起点对齐
        flex-end:与交叉轴的终点对齐
        center:与交叉轴的中点对齐
        space-between:与交叉轴两端对齐,轴线之间平均分布
        space-around:每根轴线两侧的间隔都相等,所以,轴线之间的间隔比轴线与边框的间隔大一倍
        stretch(默认值)
      align-item:设置侧轴上的子元素排列方式(单行)
        flex-start:交叉轴的起点对齐
        flex-end:交叉轴的终点对齐
        center:交叉轴的中点对齐
        baseline:项目的第一行文字的基线对齐
        stretch(默认值):如果项目没设置高度或设auto,将占满整个容器
      flex-flow:复合属性,相当于同时设置了flex-direction和flex-wrap
        flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
    4.项目的属性
      order
        该属性定义了项目的排列顺序,数值越小,排列越靠前,默认0
      flex-grow
        该属性定义了项目的放大比例,默认0,即如果存在剩余空间,也不放大
      flex-shrink
        该属性定义了项目的缩小比例,默认为1,即如果剩余空间不足,该项目将缩小
      flex-basis
        该属性定义了在分配多余空间之前,项目占据的主轴空间
      flex
        flex-grow、flex-shrink、flex-basis的速写形式

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

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

Python大数据分析学习基础篇(3)——数据结构

一、函数部分 1、闭包 所谓闭包其实跟回调函数有有相通之处。闭包可以延长作用时间和作用域。 def say(word):def name(name):print(word,name)return name hi say(你好) hi("小明") bye say("再见") bye("小明 ") 运行结果: …...

线程的安全性 - 并发基础篇

简介 当多个线程访问某个类时,这个类始终都能表现出正确的行为,那么就说这个类是线程安全的。 目录 这次分三步走:关于相关知识点,放在文末的脑图里了,大家想看结论的,可直接下拉观看哦。 1.创建一个线…...

栈?队列?Java ArrayDeque常用首尾操作方法整理

对于用Java刷leetcode的同学一定很眼熟ArrayDeque这个数据结构,因为它既可以作为队列也可以作为栈,解题时使用频率很高。补充一嘴,Stack也能作为栈来用,但是作为存在设计缺陷的Vector类的子类,已经不推荐使用了。 Arr…...

开发程序流程

JavaWeb程序--> 将一个请求路径( 网络地址) 变成一条sql语句,发送给数据库进行查询; 会将获取的数据,通过页面的方式,展示给用户进行操作; Javaweb程序如何将一个路径变成一条sql语句?...

从入门到放弃:Markdown中的LaTeX使用教程

LaTeX CSDN不支持显示的语法我已用 标注显示 基本语法 展现形式 在正文中的LaTeX公式用$...$定义行内公式,$$...$$单独居中显示 希腊字母 显示命令显示命令α\alphaβ\betaγ\gammaδ\deltaε\epsilonζ\zetaη\etaθ\thetaι\iotaκ\kappaλ\lambdaμ\muν\…...

----- ElasticSearch -----

1.什么是RestFul 2.什么是全文检索 3.什么是Elastic Search 开源 Apache Lucen 工具包 java api特别多 solr 全文检索服务器 底层封装了lucene ElasticSearch 开源搜索引擎 java 4.ES中基本概念 1)接近实时(NRT Near Real Time 2)索引(index) 3&am…...

39.【Axure 10 】交元件(元件组)交互事件

鼠标相关交互事件 【高】单击时 元件(元件组)的是鼠标单击事件,可以实现鼠标单击的触发的交互事件。 【中】双击事件 元件(元件组)的是鼠标双击事件,作为触发条件。同时也是双击页面任何地方可触发。 【中】鼠标右击事件 元件(元件组)的鼠标右击是…...

PO / PO和 ERP的配置

一、前言 PO / PI 是SAP公司的一个中间件产品,用来辅助SAP系统和外围系统,( 当然外围系统也可以使用PO)。 PO可以完成一些数据内容转换,群发(一份数据发给多个异构系统),分发(数据区分特征发送给特定的系统)等功能. 二、ERP端 ERP和 PO的连接&#x…...

array_search() 在数组中搜索给定的值,如果成功则返回相应的键名

实例 在数组中搜索键值 "red"&#xff0c;并返回它的键名&#xff1a; <?php $aarray("a">"red","b">"green","c">"blue"); echo array_search("red",$a); ?>输出 a 如果…...

不断提升自己创造溢价的能力,附带学习经验

开头 互联网时代的到来&#xff0c;让我们获取知识变得更加简单&#xff0c;理论上讲只要你想学&#xff0c;便会有不尽的知识等你&#xff0c;只要方法得当&#xff0c;够努力&#xff0c;任何人都可以都有可能成为大牛。 自己在努力的基础上&#xff0c;还学习了一些高效的…...

燕山大学数据结构知识点总结

数据结构知识点概括 第一章 概 论 数据就是指能够被计算机识别、存储和加工处理的信息的载体。 数据元素是数据的基本单位&#xff0c;可以由若干个数据项组成。数据项是具有独立含义的最小标识单位。 数据结构的定义&#xff1a; 逻辑结构&#xff1a;从逻辑结构上描述数据&a…...

【计算机网络】前端优化总结

文章目录一、采用css雪碧图技术二、把css或者js文件进行合并或者压缩三、图片懒加载技术四、设置视频音频标签为none五、传输格式使用json六、采用cdn加速七、采用事件委托&#xff08;时间代理&#xff09;八、减少闭包使用九、尽量使用异步编程十、使用websocket十一、建立心…...

HTTP的反向代理(详细版)

#官方文档&#xff1a;https://nginx.org/en/docs/http/ngx_http_proxy_module.html #proxy_pass 后直接跟URL url是远处主机或者本机&#xff0c;都可以 proxy_pass http://10.0.0.18:8080;#8080后面无uri,即无 / 符号,需要将location后面 url 附加到proxy_pass指定的url后面…...

23 种设计模式详解

设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结&#xff0c;其中最出名的当属 Gang of Four (GoF) 的分类了&#xff0c;他们将设计模式分类为 23 种经典的模式&#xff0c;根据用途我们又可以分为三大类&#xff0c;分别为创建型模式、结构型模式和行为型模式。…...

分享:关于 JVM 内存的 N 个问题和定位工具

JVM的内存区域是怎么划分的? JVM的内存划分中,有部分区域是线程私有的,有部分是属于整个JVM进程;有些区域会抛出OOM异常,有些则不会,了解JVM的内存区域划分以及特征,是定位线上内存问题的基础。那么JVM内存区域是怎么划分的呢? 首先是程序计数器(Program Counter Re…...

[C#] 代码混淆和加壳

目的 对比不同的主流保护工具&#xff0c;针对 dnSpy 反编译出的效果。 非混淆代码&#xff1a; using System; using System.ComponentModel; using System.Drawing; using System.Windows.Forms;namespace test_winform {// Token: 0x02000002 RID: 2public class Form1 :…...

双亲委派模型

从Java 虚拟机的角度来讲&#xff0c;只存在两种不同的类加载器&#xff1a;一种是启动类加载器&#xff08;BootstrapClassLoader&#xff09;&#xff0c;这个类加载器使用C语言实现&#xff0c;是虚拟机自身的一部分&#xff1b;另一种就是所有其他的类加载器&#xff0c;这…...

OpenLayers源码解析8 ol/source/TileWMS.js

ol/source/TileWMS.js父类 ol/source/TileImage-TileImage 主要功能 WMS服务提供的底图图层源。 参数&#xff1a;TileWMS({}) 参数类型说明paramsObject.<string, *>至少需要LAYER参数。STYLE默认是’VERSION默认是‘1.3.0’WIDTH&#xff0c;HEIGHT&#xff0c;BB…...

代码混淆之class-winter

郑重声明 class-winter是本人在学习完class-final(v1.1.9)后&#xff0c;仿照class-final进行编写的&#xff0c;整体思路与class-final一致&#xff0c;代码部分(约20%~30%)复用了class-final中的代码。可将class-winter看作是class-fianl的一个分支。 功能与特性 支持war加…...

百度、阿里、滴滴、新浪的面试心经总结,看这一篇就够了

直击面试 反正我是带着这些问题往下读的 说一下 JVM 运行时数据区吧&#xff0c;都有哪些区&#xff1f;分别是干什么的&#xff1f;Java 8 的内存分代改进举例栈溢出的情况&#xff1f;调整栈大小&#xff0c;就能保存不出现溢出吗&#xff1f;分配的栈内存越大越好吗&#…...

齐发78EX重大事件|荣获美国加拿大双国MSB牌照

齐发78EX LTD在2021年7月已同时获得美国及加拿大MSB合规运营牌照&#xff0c;标志着齐发78EX全球合规化的布局已经进入了一个新阶段。未来&#xff0c;齐发78EX也将继续致力于全球和规划进程的推进&#xff0c;面对全球化唯一的道路就是进一步获得全球投资者的信任&#xff0c;…...

vue如何实现数据双向绑定,我的阿里手淘面试经历分享,看这篇文章准没错!

前言 全网唯一一份&#xff0c;对标阿里P7年薪60w的Android高级工程师学习进阶路线&#xff08;图未完全展开&#xff0c;怕大家看不清楚&#xff09;&#xff1a; 本篇文章都会围绕这份脑图来写&#xff0c;详细的介绍你处于哪个阶段该如何进阶&#xff0c;以及年薪层次高低对…...

leetcode 236. 二叉树的最近公共祖先

题目来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode-cn.com/problems 特别鸣谢&#xff1a;来自夸夸群的 醉笑陪公看落花知乎&#xff0c;王不懂不懂知乎&#xff0c;QFIUNEcsdn 感谢醉笑陪公看落花知乎 倾囊相授&#xff0c;感谢小伙…...

弘辽科技:成为拼多多商家要什么要求?收费吗?

现在也有不少人想要入驻拼多多&#xff0c;但是想要成为拼多多的商家也需要满足对应的要求&#xff0c;同时也想要了解成为拼多多商家是否需要收费&#xff0c;我马上就来给各位卖家们介绍。 拼多多商家入驻平台分四种店铺&#xff0c;这里小编介绍一下旗舰店、专营店入驻基本条…...

辗转相除求最大公约数

#define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h>int main() {int a 0;int b 0;int tmp 0;scanf("%d %d", &a, &b);if (a < b){tmp a;a b;b tmp;}if (a%b ! 0){tmp a;a b;b tmp%b;}printf("%d\n", b);return 0; }...

K-means笔记

K-means算法 算法过程&#xff1a; 从N个样本数据中随机选取K个对象作为初始的聚类中心。分别计算每个样本到这各个聚类中心的距离&#xff0c;并将对象归于距离最短的聚类群中。所有样本计算完后&#xff0c;重新计算K个聚类中心。与前一次计算得到得聚类中心比较。如果聚类中…...

39.【Axure 10 】交元件(元件组)交互事件

鼠标相关交互事件 【高】单击时 元件(元件组)的是鼠标单击事件&#xff0c;可以实现鼠标单击的触发的交互事件。 【中】双击事件 元件(元件组)的是鼠标双击事件&#xff0c;作为触发条件。同时也是双击页面任何地方可触发。 【中】鼠标右击事件 元件(元件组)的鼠标右击是…...

hive常用函数

1. 获取某个字段的值 regexp_extract(message, (.*?)properties(.*?),, 2) as value 2....

手写Promise.all()方法

有1个promise报错了&#xff0c;其他的promis会执行吗&#xff1f; 会的&#xff0c;因为Promsie在实例化时候就已经执行完了。手写Promise.all()方法 function PromiseAll(promiseArray){//返回的一定是个proimsereturn new Promise((resolve,reject)>{//首先判断传入的是…...

PAT A 1133 AC代码(两种输出方式)

跑一遍序列&#xff0c;根据要求分别将结点标记存入v1、v2、v3 我二刷时用ans数组合并了v1、v2、v3&#xff0c;再进行输出会方便很多&#xff0c;不然的话需要分别考虑v1、v2、v3是否为空的情况&#xff08;原本我是那样写的&#xff0c;如果是那样写的同学要注意一下只有v2是…...

【计算机视觉】 摄像机标定

摄像机标定 齐次坐标 齐次坐标&#xff0c;将欧氏空间的无穷远点&#xff0c;与投影空间中有实际意义的消失点&#xff0c;建立起映射关系。 把齐次坐标转化为笛卡尔坐标的方法&#xff1a;是前面n-1个坐标分量分别除以最后一个分量即可 一些解释和性质&#xff1a; 比较好的…...

百度applo 代码解读

来自GitHub分享 https://github.com/YannZyl/Apollo-Note/tree/master/docs https://github.com/search?qtrackingradar...

GraphQL与Applo client的区别

GraphQL与Applo client的区别&#xff0c;相当于ECMAscript与JavaScript&#xff0c;一个是标准&#xff0c;一个是实现。GraphQL是比restful接口更新的技术&#xff0c;它采用图的格式描述数据请求&#xff0c;只需将关键字和参数按格式提交&#xff0c;后面所有都交给server处…...

flask logging不能写入到日志文件

错误原因 在使用logging记录flask日志的时候&#xff0c;发现INFO级别的日志始终写入不进去&#xff0c;代码如下 import flask# 实例化 flask app flask.Flask(__name__)if __name__ __main__:applogger app.loggerfile_handler FileHandler("error.log")file…...

理解SpringBoot 多环境搭配Applo配置中心启动过程

SpringBoot项目启动 Java程序永远是从main方法开始执行的SpringBoot项目首先 扫描 SpringBootApplication注解的启动类加载 resources目录下的 .properties 或者 .yaml文件在 application.properties文件内有 spring.profiles.activespring.profiles.active代表配置maven不同的…...

正点原子阿波罗开发板下载调试的bug

最近购买了正点原子的阿波罗的开发板&#xff0c;评估STM32F429的以太网功能。原子的开发板设计的不真不错&#xff0c;功能强大&#xff0c;外形设计优美。更多的优点我就不夸了。 新板子到手的肯定是首先连接仿真器下载一段代码进去&#xff0c;下载后发现程序不能运行到main…...

K8S集成Apollo配置中心

配置其实是独立于程序的可配变量&#xff0c;同一份程序在不同配置下会有不同的行为&#xff0c;常见的配置有连接字符串&#xff0c;应用配置和业务配置等 配置有多种形态 程序内部hardcode&#xff0c;不建议配置文件&#xff0c;比如Spring应用程序的配置一般放在applicati…...

apollo携程框架搭建部署细节

Apollo框架的使用和简单介绍 Apollo&#xff08;阿波罗&#xff09;是携程框架部门研发的分布式配置中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端&#xff0c;并且具备规范的权限、流程治理等特性&#xff0c;适用…...

gitlab+k8s+jenkins+rancher部署

记录2021年9月的一次 gitlabk8sjenkinsrancher部署 本文为4个部署合集&#xff0c;将网上的一些资料进行规整测试&#xff0c;得出的一套实际可行的部署步骤&#xff0c;仅作为学习交流&#xff01; 参考文档&#xff1a; 部署参考的博客&#xff1a; https://www.cnblogs.com…...

配置中心Apollo的设计原理

前言 Apollo是携程框架部门研发的开源配置管理中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端。本文介绍了配置的概念、配置中心的必要性以及Apollo的特点&#xff0c;着重拆解分析Apollo客户端的设计原理&#xff0…...

探索--appllo配置中心,如何动态加载配置

如何动态加载配置问题涉及到两方面&#xff1a; 1.程序如何感知到配置被修改&#xff0c;或者说被修改的配置信息是如何发送到各服务器上的业务应用的 2.spring 中如何替换原来的配置&#xff0c;对于Value修饰的属性如何赋值&#xff0c;如何重新赋值。对于singleton,prototyp…...

Dubbo(一)

一.架构图 二.架构说明 2.1 虚线表示异步&#xff0c;实线表示同步。异步不阻塞线程性能高&#xff0c;同步阻塞线程必须等待响应结果才能继续执行&#xff0c;相对性能低。 2.2 Provider 提供者。编写持久层、业务层和事务代码。 2.3 Container 容器&#xff08;Spring容…...

微服务从零到一分布式配置中心(实时刷新)

分布式配置中心&#xff08;实时刷新&#xff09; 上篇博文遗留了一个问题&#xff0c;在修改了配置文件的情况下&#xff0c;服务消费者请求配置文件属性得到的还是原值。这是为什么呢&#xff1f;原来服务向配置中心请求属性值时&#xff0c;只有第一次会真正的发起请求&…...

准备研究GraphQL

标记和转载&#xff0c;准备有时间研究下、 https://ninghao.net/blog/2857 http://www.jianshu.com/p/6721b66c5ac8 http://facebook.github.io/graphql/...

springboot整合apollo配置中心

1 下载apollo源码 源码地址 2 使用docker-compose启动apollo 进入到启动docker compose 的文件路径&#xff0c;我这里是在centos系统启动的apollo。我已经提前安装好docker和docker-compose。 输入执行命令 [rootjamie docker-quick-start]# docker-compose up启动成功后…...

集群配置

Windows2003配置集群图文详解<!--正文--> <!--判断阅读权限--><!--判断是否已经扣点--> 集群是在一组计算机上运行相同的软件并虚拟成一台主机系统为客户端与应用提供服务&#xff1b;计算机通过缆线物理连接并通过集群软件实现程序上的连接&#xff0c;可以…...

项目中增加集中配置管理-appllo

1.在pom.xml中增加applo的相关依赖 <!-- 配置中心 --><dependency><groupId>com.ctrip.framework.apollo</groupId><artifactId>apollo-client</artifactId><version>0.10.2</version></dependency>META-INF中创建app.p…...

一. Config 分布式配置中心

一. 解释 Config 分布式配置中心出现的原因 在前面的案例中,每创建一个微服务项目都需要创建一个 yml 配置文件,配置 连接的数据库,配置 注册到的注册中心,配置网关等待假设,根据需求变化,项目中以前连接的是 “testData01” 数据库,所有的yml 配置文件中进行了连接配置,可是…...

java B2B2C 源码多租户电子商城系统-Spring Cloud整合Netflix Archaius介绍

1、概述 Netflix Archaius 是一个功能强大的配置管理库。它是一个可用于从许多不同来源收集配置属性的框架&#xff0c;提供对配置信息的快速及线程安全访问。 需要JAVA Spring Cloud大型企业分布式微服务云构建的B2B2C电子商务平台源码 一零三八七七四六二六 除此之外&#xf…...

Apollo(分布式配置中心)核心概念及核心功能介绍

Apollo&#xff08;分布式配置中心&#xff09;核心概念及核心功能介绍 Apollo&#xff08;阿波罗&#xff09;是携程框架部门研发的分布式配置中心&#xff0c;能够集中化管理应用不同环境、不同集群的配置&#xff0c;配置修改后能够实时推送到应用端&#xff0c;并且具备规…...