flex布局 | 易学教程

flex 简单设置

阅读更多关于 flex 简单设置

/*弹性盒子 start*/ /* ============================================================ flex：定义布局为盒模型 flex-v：盒模型垂直布局 flex-1：子元素占据剩余的空间 flex-align-top: 子元素垂直置顶 flex-align-center：子元素垂直居中 flex-pack-center：子元素水平居中 flex-pack-justify：子元素两端对齐兼容性：ios 4+、android 2.3+、winphone8+ ============================================================ */ .flex {display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} .flex-v {-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;} .flex-1 {-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;} .flex-wrap

CSS-居中方法汇总

阅读更多关于 CSS-居中方法汇总

CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来。水平居中 1.1内联元素水平居中利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。 .center-text { text-align: center; } 1.2块级元素水平居中通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。 .center-block { margin: 0 auto; } 1.3多块级元素水平居中 1.3.1 利用inline-block 如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。 .container { text-align: center; } .inline-block { display: inline-block; } 1.3.2 利用display: flex 利用弹性布局(flex)，实现水平居中

Day 10--学习与编码（三）

阅读更多关于 Day 10--学习与编码（三）

今天把flex布局学完了，发现flex也不是万能的，还是得靠html的基础才行。于是去多学了几个属性，页面才逐渐变成自己想要的样子。但是不知道为啥总是比demo少一点高级感，还达不到预期。然后写了两个页面分别是备货员和配送员的工作界面。（大概这种感觉）我发现这个举一反三还行，但是脱离js语法单纯的去自己想新东西是挺难的。现在在学怎么获取用户信息显示在个人主页上，明天也继续，然后继续跟着视频学函数和属性。今天还肝了c++，不过分配给软件课设的时间也还好！明天可以尽力！希望能把没做到的稍微做到一些吧（。总之今天就是肝！其实也还挺充实的。然后我发现一定要多动手尝试和实践！自己建一个项目，把网上的知识敲一敲试一试，真好用！来源： https://www.cnblogs.com/darkhill3e/p/11426352.html

Html5+Css3小试牛刀

阅读更多关于 Html5+Css3小试牛刀

前因：　　我开始做个收款系统，突然客户跑来要插进一个任务，据说他们老板挺在意的，一个小商场，一个首页，一个详情页，UI无自由发挥，要求，尽量好看点。一番交谈后，确认这是一个对外的网站，最好移动端也能正常显示（响应式）。正文：　　前端这一块我一直在想给自己提升一下，刚好有这个机会，于是就去看了一下Html 5和Css3 发现很多属性确实比以前方便，其中比如伸缩盒子flex; 里面的flex-direction，align-items，justify-content 属性布局确实大大方便了。 html 因为html5 的新标签header,footer,article,section，nav等等加入，布局不再全部依赖div 1 <body> 2 <header> 3 <img src="Img/logo.png" class="logo" /> 4 <div class="F_Search"> 5 <input type="text" class="Search" id="Search" placeholder="Please enter what you want to find" /> 6 <button class="SearchBtn" onclick="Search('');"></button> 7 <nav class="SearchText"> 8

CSS-Flex布局

阅读更多关于 CSS-Flex布局

Flex布局对于我们平常遇到的问题的解决方法。 1.在父容器中的垂直居中。 2.使容器内的子项占据等量的空间（宽、高）。 3.使容器内的列等高排列。在线查看Flex布局示例及其属性使用，效果展现：在线示例下面是各个属性的描述： .box{ display:flex; } 设置容器的display属性为flex，如果是行内元素使用 inline-flex . flex-direction 定义子项如何排列。 .box{ flex-direction:row; } row:X轴排列，从左到右， row-reverse:X轴排列，从右到左 column：Y轴排列，从上到下 column-reverse:Y轴排列，从下到上 flex-wrap 定义子项超出时，换行方式。 .box{ flex-wrap:wrap; } wrap:换行 nowarp:不换行 wrap-reverse：换行，反转排列 flex-flow是flex-direction/flex-wrap的缩写。 justify-content 定义子项横向排列时的样式。 .box{ justify-content:center; } flex-start：靠左 flex-end:靠右 center：居中 space-between：沿X轴均匀分配，两边不留空 space-around：沿X轴均匀分配，两边留空 align

移动前端知识总结

阅读更多关于移动前端知识总结

移动前端知识总结文章目录 meta基础知识常见问题常用的移动端框架 iscroll.js underscore.js 滑屏框架 FastClick meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name = "viewport" content = "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name = "format-detection" content = "telephone=no" /> 忽略 Android 平台中对邮箱地址的识别 <meta name = "format-detection" content = "email=no" /> 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的safari <meta name = "apple-mobile-web-app-capable" content = "yes" />  将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式 <meta name = "apple-mobile

常见的一部份面试题

阅读更多关于常见的一部份面试题

一、盒子模型是什么？ Margin ：外边距 Border ：边框线 Padding ：内边距 Content ：内容二、边框盒与内容盒有什么区别？分别对应属性是什么？ 1. 边框盒：border-box: border 、padding、content组成 a) 浏览器调试时，页面中显示的元素尺寸是指边框盒的尺寸 b) 元素的背景，默认覆盖边框盒，可通过background-clip属性修改 c) background-clip 属性：含义：背景覆盖范围不可继承默认值：border-box 取值：border-box：背景覆盖边框盒 padding-box ：背景覆盖填充盒 content-box ：背景覆盖内容盒 2. 内容盒（content-box）：由content组成 a) 默认情况下，width和height属性，是指内容盒的宽度和高度 b) width 和height的设置范围，可通过box-sizing属性修改 c) box-sizing 属性：含义：盒子宽高的设置范围不可继承默认值：content-box 取值：content-box：表示内容盒的宽高 border-box ：表示边框盒的宽高三、弹性布局如何改变主轴方向？定义项目在主轴的对齐方式有哪些？项目在交叉轴上有哪些对齐方式？ 1) flex-direction 属性决定主轴的方向

新的页面布局方式

阅读更多关于新的页面布局方式

1 多列布局 1.1 多列布局介绍实现类似于报纸的布局方式 ) 1.2 多列布局的相关CSS属性 columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> column-width 设置每列的宽度（类似于最小宽度）：用长度值来定义列宽。不允许负值 auto：根据 <' column-count '> 自定分配宽度 column-count 设置列数：用整数值来定义列数。不允许负值 auto：根据 <' column-width '> 自定分配宽度 column-gap 设置列与列之间的间隙：用长度值来定义列与列之间的间隙。不允许负值 normal：与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 column-rule 列与列之间的边框,复合属性同border类似 column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> column-rule-width 列与列之间的边框厚度：用长度值来定义边框的厚度。不允许负值 medium：定义默认厚度的边框。 thin：

新的页面布局方式

阅读更多关于新的页面布局方式

新的页面布局方式 1 多列布局 1.1 多列布局介绍实现类似于报纸的布局方式 ) 1.2 多列布局的相关CSS属性 columns 设置的列数和每列的宽度。复合属性 columns：<' column-width '> || <' column-count '> column-width 设置每列的宽度（类似于最小宽度）：用长度值来定义列宽。不允许负值 auto：根据 <' column-count '> 自定分配宽度 column-count 设置列数：用整数值来定义列数。不允许负值 auto：根据 <' column-width '> 自定分配宽度 column-gap 设置列与列之间的间隙：用长度值来定义列与列之间的间隙。不允许负值 normal：与 <' font-size '> 大小相同。假设该对象的font-size为16px，则normal值为16px，类推。 column-rule 列与列之间的边框,复合属性同border类似 column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '> column-rule-width 列与列之间的边框厚度：用长度值来定义边框的厚度。不允许负值 medium：定义默认厚度的边框。

CSS3中的弹性盒子模型

阅读更多关于 CSS3中的弹性盒子模型

介绍在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。新旧版本的弹性盒子模型在之前，css3曾经推出过旧版本的弹性盒子模型。相对于新版本的弹性盒子模型而言，旧版本的内容与新版本还是有些出入。而且，从功能上来讲，旧版本的弹性盒子模型远远没有新版本的盒子模型强大，从兼容性来讲，二者在pc端ie9以下都存在着兼容性问题，但是在移动端，旧版本的弹性盒子模型兼容性则更好一点。但是对于我们来说，我们依然要将主要的精力放在新版本的弹性盒子模型的身上，因为旧版本的弹性盒子模型淘汰是必然，随着手机端的兼容性逐渐提升，旧版本必将被淘汰。另外，新版本具有更加强大的功能，也值得我们进行深度的学习。那么我们对于新旧两个版本的弹性盒子模型，我们只需要抱着对比的心态学习即可，掌握新版本，了解旧版本，这样即使有一天我们需要使用旧版本，也可以非常容易的学习旧版本的弹性盒子模型。相关概念主轴我们以元素排在一行为例，当元素排列在一行的时候，主轴既表示元素排列的方向

订阅 flex布局