web前端开发列表怎么横向排列 css知多少（11）--position_html/css_WEB-ITnose

很多关注前端开发的朋友很希望了解web前端开发列表怎么横向排列 css知多少（11）--position_html/css_WEB-ITnose，今天我爱编程网为大家整理了相关文章，一起来看看吧！

【web前端】十分钟彻底弄懂 flex 布局

flex（flexible box：弹性布局盒模型），是 2009 年 w3c 提出的一种可以简洁、快速对页面进行弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持：

其中在webkit内核的浏览器中使用时，必须加上 -webkit- 前缀。

使用 flex 布局的容器（flex container），它内部的元素自动成为 flex 项目（flex item）。容器拥有 两根 隐形的轴，水平的 主轴 （main axis），和竖直的 交叉轴 （cross axis）。

主轴开始的位置，即主轴与左边框的交点，称为 main start；主轴结束的位置称为 main end；交叉轴开始的位置，即交叉轴与上边框的交点，称为 cross start；交叉轴结束的位置称为 cross end。

item 按主轴或交叉轴排列，item 在主轴方向上占据的宽度称为 main size，在交叉轴方向上占据的宽度称为 cross size。

注意：使用 flex 容器内元素，即 flex item 的 float，clear、vertical-align 属性将失效。

flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。

flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。

它是 flex-direction 和 flex-wrap 的集合简写形式，如：row wrap | column wrap-reverse 等。默认值为 row nowrap，即横向排列 不换行。

决定 item 在横向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为横向主轴时，具体含义如下：

决定 item 在纵向主轴上的对齐方式，可能的值有 flex-start（默认），flex-end，center，space-between，space-around。当为纵向主轴时，具体含义如下：

决定了 item 在横向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为横向主轴时，其具体含义为：

决定了 item 在纵向主轴上的对齐方式，可能的值有 flex-start | flex-end | center | stretch | baseline ，当为纵向主轴时，其具体含义为： 我爱编程网

该属性定义了当有多根主轴时，即 item 不止一行时，多行在交叉轴上的对齐方式。注意当有多行时，定义了 align-content 后，align-items 属性将失效。align-content 可能值含义如下（假设主轴为垂直方向）：

item 的属性在 item 的 style 中设置，item 共有如下六种属性：

order 的值是整数，默认为 0，整数越小，item 排列越靠前，如上图所示。

它定义了当 flex 容器有多余空间时，item 是否放大。默认值为 0，即当有多余空间时也不放大；可能的值为整数，表示不同 item 的放大比例。

定义了当容器空间不足时，item 是否缩小。默认值为 1，表示当空间不足时，item 自动缩小，其可能的值为整数，表示不同 item 的缩小比例。

表示 item 在主轴上占据的空间，默认值为 auto。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 三属性的简写总和。

align-self 属性允许 item 有自己独特的在交叉轴上的对齐方式，它有六个可能的值，默认值为 auto。

css知多少（11）--position_html/css_WEB-ITnose

1. 引言本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。
如果没有定位，我们做出来的网页将会是按部就班的自上而下、自左而右的平铺在浏览器上，外加通过margin和padding调整一下间距，还有就是通过float来浮动某些元素。做一些简单的网页这样就够了，例如N年之前的yahoo，虽然现在看来很low。
但是有些情况下，这种按部就班的网页排版满足不了我们的要求，我们需要某些元素跑出来，悬浮在网页上面，而且需要给它指定一个位置。这时候我们就需要用到了position，而且是非用不可。如下图：
2. relative查资料可知道，position一共有四个可选属性：static/relative/absolute/fixed。其中static（静态定位）是默认值，即所有的元素如果不设置其他的position值，它的position值就是static，有它跟没有它一样。就不多介绍了。
相对定位relative可以用一个例子很轻松的演示出来。例如我们写4个，出来的样子大家不用看也能知道。
然后我们在第三个上面，加上position:relative并且设置left和top值，看这个有什么变化。
上图中，大家应该要识别出两个信息（相信大部分人会忽略第二个信息）
第三个发生了位置变化，分别向右向下移动了10px； 其他的三个位置没有发生变化，这一点也很重要。因此，relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小的变化。这是relative的要点之一。还有第二个要点，就是relative产生一个新的定位上下文，下文有关于定位上下文的详细介绍，这里可以先通过一个例子来展示一下区别：
注意看这两图的区别，下文将有解释。
3. absolute说道absolute，推荐大家去看一个视频教程，讲师对absolute讲的非常透彻，本文的一些内容也是参考了这篇教程，好东西大家一起分享吗！
话归正传，咱们还是拿之前那个例子说事儿，先写一个基本的页面??4个
然后，我们把第三个改为absolute，看看会发生什么变化。
从上面的结果中，我们能看出几点信息：
absolute元素脱离了文档结构。和relative不同，其他三个元素的位置重新排列了。只要元素会脱离文档结构，它就会产生破坏性，导致父元素坍塌。（此时你应该能立刻想起来，float元素也会脱离文档结构） absolute元素具有“包裹性”。之前的宽度是撑满整个屏幕的，而此时的宽度刚好是内容的宽度。 absolute元素具有“跟随性”。虽然absolute元素脱离了文档结构，但是它的位置并没有发生变化，还是老老实实的呆在它原本的位置，因为我们此时没有设置top、left的值。 absolute元素会悬浮在页面上方，会遮挡住下方的页面内容。最后，通过给absolute元素设置top、left值，可自定义其内容，这个都是平时比较常用的了。这里需要注意的是，设置了top、left值时，元素是相对于最近的定位上下文来定位的，而不是相对于浏览器定位。下文马上会讲定位上下文。
但是有时候设置top、left值并不是定位的最佳解决方案。例如想要元素A紧跟在元素B的上方，可通过设置元素B为absolute，然后调整B的margin值来确定，这样更有效率。如下图：
以上提到的信息，如果展开来说，内容非常多，而且用文本也不好描述，还是推荐大家去看慕课网的那篇视频教程，讲的很有意思。
最后，再提几个小知识点。
设置absolute会使得inline元素被“块”化，这在上一节将display时已经说过； 设置absolute会使得元素已有的float失效。不过float和absolute同时使用的情况不多； 上文提到了absolute会使元素悬浮在页面之上，如果有多个悬浮元素，层级如何确定？答案是“后来者居上”4. fixed其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。
上文很多次提到了“定位上下文”，那么它到底是一个什么东东？答案马上揭晓。
5. 定位上下文5.1 relative的定位
relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
5.2 fixed的定位
fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。
5.3 absolute的定位
absolute的定位相对于前两者要复杂许多。如果为absolute设置了top、left，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：
上图中的“某一层祖先元素”就是该absolute元素的定位上下文。讲到这里，我们上文中的那个图，大家能看明白了吧？还有不明白的可以留言给我。
6. 总结我感觉position这篇文章是这一系列中最难写的文章，它的知识点比较多，而且非常难理解，因此position也是css的一个重点知识，不懂position的前端开发人员要抓紧恶补一下。
写了这么多，感觉还是写的不是很全面，或者不是很系统，很希望大家把自己的意见反馈给我。这个系列博客算是这个教程的第一版，我计划后期抽时间会录制一个视频版，到时候希望会更加全面系统一些。
-------------------------------------------------------------------------------------------------------------
欢迎关注我的教程：《从设计到模式》《深入理解javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频》
也欢迎关注我的开源项目??wangEditor，简洁易用的web富文本编辑器
-------------------------------------------------------------------------------------------------------------

web前端开发需要掌握哪些知识

1.HTML
知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2.CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3.ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4.DOM
知识要点：DOM模型、节点类型、节点的基本操作、JS操作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5.BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6.vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7.vue案例
知识要点：将知识点融会贯通到案例中。
8.react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9.react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10.Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本操作、express框架、koa框架
11.Node 项目周/WebPack

以上就是我爱编程网为大家带来的web前端开发列表怎么横向排列 css知多少（11）--position_html/css_WEB-ITnose，希望能帮助到大家，更多相关信息，敬请关注我爱编程网！