css相关学习记录

zzl521      2022-02-17     313

关键词:

为什么写这个呢?因为在开发管理系统的过程中,会不可避免的对一些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支持更丰富的文档外观,可以为任何元素的文本和背景设置颜色;允许在任何元素外围设置边框,允许改变文本的大小写,装饰方式(下划线)。不仅如此,... 查看详情