flex布局 | 易学教程

flex伸缩布局

阅读更多关于 flex伸缩布局

每日作业-移动端第二天训练案例1 训练描述如下图：利用flex布局实现，左右两侧宽度100px固定，中间宽度根据屏幕宽度自适应要求：（1）：使用flex布局方式（2）：不允许使用margin、padding等方式实现（3）：不允许使用定位实现训练提示 1、首先外面套个大盒子；设置宽、高并且开启flex布局 2、子盒子结构基本分为三部分左侧、中间、右侧左侧：宽高固定右侧：宽高固定中间：利用flex属性占据剩余空间即可操作步骤 html代码 <div class="main"> <div class="box1"> 左侧 </div> <div class="box2"> 中间 </div> <div class="box3"> 右侧 </div> </div> css代码 .main{ width:100%; height:40px; background: #999; display: flex; color: #fff; line-height: 40px; text-align: center; } .main .box1,.main .box3{ width:100px; height:40px; background: pink; } .main .box2{ flex:1; height:100%; background:

CSS—三栏布局

阅读更多关于 CSS—三栏布局

目录一、概述二、详解一、概述圣杯布局与双飞翼布局针对的都是三栏布局，左右栏固定，中间栏自适应的网页布局。以下介绍三种实现方式，html结构如下所示。 <div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> 二、详解相对布局相对布局中main元素必须是container元素的第一个子元素。 .container { width: 100%; min-height: 300px; padding: 0 60px; box-sizing: border-box; } .container > div { position: relative; float: left; } .left, .right { width: 60px; height: 100%; } .left { left: -60px; margin-left: -100%; } .right { right: 0; margin-right: -100%; } .main { width: 100%; height: 100%; } flex布局 .container { width: 100%; min-height:

CSS3(5)---伸缩布局(Flex)

阅读更多关于 CSS3(5)---伸缩布局(Flex)

原文: CSS3(5)---伸缩布局(Flex) CSS3(5)---伸缩布局有关页面布局之前写过三篇相关文章： 1、 CSS(5)---盒子模型 2、 CSS(6)---浮动(float) 3、 CSS(8)---定位(position) 一、什么是Flex 布局 1、Flex 布局特点上面三种布局都是基于盒状模型。依赖 display属性 + position属性 + float属性。它对于有些特殊布局并不友好，比如，垂直居中就不容易实现，会有溢出容器的问题。 Flex是意思是”弹性布局”，它可以为盒状模型提供最大的灵活性。主要思想是让容器有能力让其子项目能够改变其宽度、高度、顺序，以最佳的方式填充可用空间。简单来讲就是当你设置好父元素的宽度或者高度,对于它的子元素会根据父类的宽度或者高度来填充可用空间。 2、Flex 布局任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } 注意设为 Flex 布局后，CSS的columns在伸缩容器上没有效果。子元素(伸缩项目)的 float、clear和vertical-align属性将失效二、重要概念 1、容器和项目容器采用Flex布局的元素，称为Flex容器，简称

浅谈：CSS3弹性盒布局方式

阅读更多关于浅谈：CSS3弹性盒布局方式

一、CSS3弹性盒子 1.弹性盒子是CSS3的一种新布局模式。 2.CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 3.引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、浏览器支持 1.表格中的数字表示支持该属性的第一个浏览器的版本号。 2.紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。三、CSS3 弹性盒子内容 1.弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 2.弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 3.弹性容器内包含了一个或多个弹性子元素。注意： 1.弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。 2.弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。 3.以下元素展示了弹性子元素在一行内显示，从左到右: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

左右固定，中间自适应布局

阅读更多关于左右固定，中间自适应布局

1.使用自身浮动法：自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。该布局法的不足是三个元素的顺序，middle一定要放在最后，middle占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <style> 9 .containter{ 10 width:100%; 11 height:200px; 12 } 13 14 .left{ 15 width:300px; 16 height:100%; 17 float: left; 18 background: blue; 19 } 20 21 .center{ 22 height:100%; 23 margin-left: 300px; 24 margin-right: 300px; 25 background: red; 26 } 27 .right{ 28 height:100%; 29

2019前端最全面试题

阅读更多关于 2019前端最全面试题

项目地址 HTML问题 HTML5语义化什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。好处易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。 http://www.daqianduan.com/6549.html 为什么最好把 CSS 的 <link> 标签放在 <head></head> 之间？为什么最好把 JS 的 <script> 标签恰好放在 </body> 之前，有例外情况吗？把 <link> 放在 <head> 中把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。把 <script> 标签恰好放在 </body> 之前脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户

移动Web开发-WebApp（flex布局+移动端导航案例）

阅读更多关于移动Web开发-WebApp（flex布局+移动端导航案例）

实际开发中的像素：css像素设备像素比dpr=设备像素/css像素标清屏dpr=1 高清屏dpr=2 缩放改变的是css像素大小 PPI（每英寸的物理像素点）=根号（屏幕横向分辨率²+屏幕纵向分辨率²）/屏幕对角线长度（单位英寸）视口viewport <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1"> <script> console.log(window.innerWidth);//窗口文档显示区宽度 console.log(document.documentElement.clientWidth);//浏览器窗口文档显示区域的宽度，不包括滚动条 console.log(document.documentElement.getBoundingClientRect().width);//这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离 // getBoundingClientRect().top // getBoundingClientRect().right // getBoundingClientRect()

移动web基本知识

阅读更多关于移动web基本知识

1.pixel像素基础 1.px:csspixel 逻辑像素，浏览器所使用的抽象单位 2.dp,pt:设备无关像素 3.devicePixelPatio 设备像素缩放比例 2.viewport 1. ios的viewport是980px;普遍 2.安卓不一定注：为什么不使用默认的980px的布局viewport 原因：宽度不可控制，不同的系统设备的默认值都可能不同页面缩小版显示，交互性不友好链接不可点有缩放，缩放后又有滚动例如font-size为40px等于pc上12px同等物理大小，不规范 <meta name="viewport" content="name=value,name=value">来改变默认值 3.viewport meta标签 <meta name="viewport" content="name=value,name=value"> 1.width:设置布局viewport的特定值,但是为了适应所有的不同尺寸的手机屏幕大小，用，device-width自适应用户的屏幕大小。 2.initial-scale:设置页面的初始缩放：公式：window.innerWidth/document.body.ClientWidth. 3.minimun-scale:最少缩放 4.maximun-scale:最大缩放 5.user-scalable:用户能否缩放

《hello,移动web》笔记

阅读更多关于《hello,移动web》笔记

http://www.imooc.com/video/9669 Hello，移动WEB 第1章课程介绍 1-1 课程介绍第2章移动Web的基础知识 2-1 pixel像素基础 px:css pixel 逻辑像素，浏览器使用的抽象单位 dp,pt:device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比计算公式：1px = dpr的平方*dp iphone5分辨率：640dp*1136dp 为什么iphone5是320px*568px？ iphone5的drp=2，1px=4dp，所以长度上1px=2dp，640dp => 320px；1136dp => 568px dpi:打印机每英寸可以喷的墨汁点（印刷行业） ppi:屏幕每英寸的像素数量，即单位英寸内的像素密度目前，在计算机显示设备参数描述上，二者表达的一样意思 iphone5: ppi = 根号(1136的平方+640的平方)/4 = 326ppi(视网膜retina屏) ppi越高，像素数越高，图像越清晰；但可视度越低（小），系统默认设置缩放比越大。 2-2 Viewport视图为什么不使用默认的980px的布局viewport .宽度不可控制，不同系统不同设备的默认值都可能不同 .页面缩小版显示，交互不友好 .链接不可点 .有缩放，缩放后又有滚动

Flex 布局相关用法

阅读更多关于 Flex 布局相关用法

前言：布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局，2012年得到进一步完善。 2009年版本的语法已经过时（display: box），使用的时候为了兼容需要加上一些前缀 /* 形如： */ display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */ 所以还是建议使用新版形式 2012年将是往后标准的语法（display: flex）

订阅 flex布局