关键词:
为什么写这个呢?因为在开发管理系统的过程中,会不可避免的对一些css属性进行调整,其次虽然在大学中学过这些东西,但是主业为java后端,这些我当时是的确是聊聊而过了
一、flex布局介绍,代码如下
{ display: flex; justify-content: space-between; align-items: center; }
flex是一个新的布局,采用这个布局的元素,叫做Flex容器,其子元素则自动的成为容器成员,简称项目
容器中存在两个轴(main asix, cross axis)
关于布局样式 具体可以去这个大佬这去看 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
容器具有6个属性:
1 flex-direction: row | row-reverse| column|column-reverse --> 项目的排列方向,属性大都见文知意,就不一一翻译了
2 flex-wrap: nowrap | wrap| wrap-reverse --> 如果一条轴线排不下,如何换行
3 flex-flow: flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
4 justify-content: flex-start| flex-end | center| space-between | space-around --> 项目在主轴的对齐方式
两端对齐,项目之间的间隔相等 每个项目的两侧相等
5 align-items: flex-start|flex-end| center| baseline | stretch --> 项目在 cross axis的对齐方式
项目的第一行文字的基线对齐 拉伸,即占满整个的容器的高度(默认)
6 align-content: flex-start| flex-end| center| space-between| space-around| strech --> 多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
二、text-align:left| right| center| justify|inherit --> 元素内文本的水平对齐方式
三、直接上几段css代码方便记录
1 header.vue .header { position: fixed; top: 0; left: 0; display: flex; -ms-flex-align: center; /* Internet Explorer 10 私有支持 垂直居中 w3c中box-align 属性*/ align-items: center; width: 100%; min-width: 960px; height: 48px; font-size: 14px; line-height: 1; /* -webkit-box-shadow: 0 1px #dadfe6; */ /* box-shadow: 0 1px #dadfe6; */ background: #fff; z-index: 1030; background-color: #00acb6; }
position : absolute| fixed| relative| static| inherit
定位方式
学习记录:二层网络环路相关
学习记录上周实习过程中由于对此相关内容不熟悉,造成了事故。由此对相关内容加强学习,特此记录。目录学习记录一、交换机相关二、网络环路的产生三、网络环路的影响四、如何避免网络环路五、二层环路的直观... 查看详情
移动站适配学习记录
最近在学习移动前端开发的相关知识,在这里做个记录,方便以后查看。一,视口的知识布局视口(layoutviewport)它的作用是给css布局限制一个最大宽度;布局视口尺寸可以通过document.documentElement.clientWidth/clientHeight获取; pc端... 查看详情
springcloud学习参考相关博客记录
...,但是因为公司项目小没机会用还有就是springcloud包含的相关框架太多,一头钻进去会没有方向,所以一段时间之后都忘了。这次打算先了解springcloud整体构成,以及每个组件作用及各种解决系统中的问题,然后再有针对的学习... 查看详情
[hanani]java大数相关学习记录
1.Basicremains.题目链接涉及内容:大数读入|大数模|大数进制读入时转化为十进制|大数输出时转化为其他进制输出importjava.io.*;importjava.math.*;importjava.util.*;importjava.text.*;//各种头文件publicclassMain{publicstaticvoidmain(String[]args){Scannercin= 查看详情
linux学习记录:sudo相关(代码片段)
Linux学习记录:sudo相关在实习中接触到了系统安全相关的内容,其中一个重点就是对sudo权限的控制。正好我对这块东西不太熟悉,于是对相关的内容做了笔记汇总。这篇笔记中重点放在sudo的配置文件/etc/sudoers上,... 查看详情
学习工作记录汇总
1.学习工作记录——(知识图谱相关论文阅读)2.学习工作记录——反思3.学习工作记录三4.学习工作记录四5.学习工作记录五6.学习工作记录六 查看详情
css学习记录pinkd4
css学习记录
CSS(cacading style sheets)决定html标签以什么形式在网页中显示出来、css样式引用优先级 外部式<嵌入式<内部式 内联式优先级最高<link>标签定义了文档与外部资源之间的关系,通常用于连接到... 查看详情
ai相关术语了解记录
RLFH(ReinforcementLearningfromHumanFeedback) 从人类反馈中学习的强化学习#训练过程Collecthumanfeedback收集人类反馈 Trainrewardmodel训练奖励模型RM RewardModel奖励模型 TrainpolicywithPPO 训练策略模型PolicyGradient RL,策... 查看详情
css3学习记录二
CSS3学习记录二 字体样式 字体 h1{ font-family:楷体; }字体颜色 h1{ color:red; }字体尺寸 h1{ font-size:50xp; }字体粗细 h1{ &nbs 查看详情
css3学习记录二
CSS3学习记录二 字体样式 字体 h1{ font-family:楷体; }字体颜色 h1{ color:red; }字体尺寸 h1{ font-size:50xp; }字体粗细 h1{ &nbs 查看详情
yii2的相关学习记录,后台模板和gii
前面已经可以正常登录,但我们需要体验下最常用的增删查改的操作。这里就需要gii,通过gii可以方便的生成表单、表格的框架,不需要我们再写重复的东西。gii访问地址:http://localhost/vishun/frontend/web/index.php?r=gii或者http://localho... 查看详情
oracle相关的个人学习记录,不定期更新
存储过程基本语法http://www.cnblogs.com/hero4china/articles/base_rule_oracle_procedure.html存储过程基本写法http://www.linuxidc.com/Linux/2013-11/93196.htm存储过程简单例子http://www.cnblogs.com/yueers/p/5710446.html 注意点:存 查看详情
学习css记录:选择符优先级
1、标有!important关键字声明属性。2、HTML中的CSS样式属性。3、作者编辑的CSS文件模式属性。4、用户设置的样式。5、浏览器默认的样式。--------------------------即:(1)important最高 (可作用绝对覆盖属性功能,平时不建议使用)(2)styl... 查看详情
个人学习php语言的相关知识点目录
本文用于记录个人学习php语言的相关知识点整理,给各位打算了解php知识的童鞋提供参考:除了最基本的html、css、js知识,以下知识是一个php开发必备的知识点,也是web开发中常用的知识点。 以下是进阶阶段需要掌握的相关... 查看详情
《集体智慧编程》学习记录:欧几里得距离&皮尔逊相关系数
1critics={‘LisaRose‘:{‘LadyintheWater‘:2.5,‘SnakesonaPlane‘:3.5,‘JustMyLuck‘:3.0,‘SupermanReturns‘:3.5,‘You,MeandDupree‘:2.5,‘TheNightListener‘:3.0},2‘GeneSeymour‘:{‘LadyintheWater‘:3.0,‘SnakesonaPlan 查看详情
linux学习记录:makefile(代码片段)
...makefile时的记录,方便日后查询。所有我遇到的makefile相关的内容都会被记录在这篇笔记中,所以在之后接触到makefile相关的新内容后,会对这篇笔记的内容进行更新。目录Makefile零、Makefile简介一、基础语法1.单源文件... 查看详情
记录小白自主学习css的第一周
CSS(CascadingStyleSheets)层叠样式表,样式可以层层累加与HTML相比CSS支持更丰富的文档外观,可以为任何元素的文本和背景设置颜色;允许在任何元素外围设置边框,允许改变文本的大小写,装饰方式(下划线)。不仅如此,... 查看详情