页面布局

1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽 border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽 3 CSS选择器有哪些？哪些属性可以继承？ CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child） 可继承的属性：font-size, font-family, color 不可继承的样式：border, padding, margin, width, height 优先级（就近原则）：

2018年了，时间过的真快，最近想扩展一下知识面，也顺便学习一下比较成熟的微信小程序开发平台，于是乎就操刀微信，抽空花了几天看完微信小程序的开放平台( https://mp.weixin.qq.com/debug/wxadoc/dev/index.html )，看完简易教程、框架、组件和API，有点似曾相识燕归来的感觉，毕竟笔者游历iOS和Android平台多年，对HTML5也有所了解，感觉就是杂糅的一个混合式开发方式、好了，感兴趣的直接 微信小程序官网 即可，现在已经对个人开发者开放了，下面就简单说下我们常用的一个布局—九宫格布局，实现功能就是九宫格导航到下个页面，并且带上相应参数获取不同的页面信息。 一、思路整理 第一步，自然是少不了创建工程了，这个默认已经没有问题，那就是wxml布局，采用for循环布局啊，万一是动态呢，千万不要写死，程序员不能认为是固定的，否则坑自己也坑接盘侠； 第二步，美化wxml布局，建立wxss文件，这个基本功，必须会了； 第三步，初始化js数据，采用导航模式到详情页，也就是点击每个格子到对应的页面（这里页面只要一个）； 二、代码实现 1、首页js页面，初始化数据 const app = getApp() Page({ data: { routers: [ { name: 'HTML', url: '/pages/Course/course',

Grid布局 首先，从概念上来说这是一个 网格布局 ，核心是 网格容器 （Grid Container）和 网格项 （Grid Item），也就是parent和children的关系。与flex布局相类似 网格系统引入了新的单位：分数 fr ，每一个fr单元分配一个可用空间，如果元素被设置为1fr 1fr 1fr 1fr，那么空间就会被平均分配为4份，每一个元素分别占1/4。 对于 网格容器 ，设置css样式为display:grid。分割网格 容器 ：grid-template-columns:20% 20% 20% 20% 20%，表示将网格等分为5列，也可以简写为： grid-template-columns:repeat(5,20%) ，同样 grid-template-rows也是一样的用法。其中repeat为函数。 grid-template：50% 50% / 200px将创建一个具有两行的网格，每一行占据50%，以及一个200px的列。 grid-template：60% / 200px，表示60%的高度，200像素的宽。 .contain{ display:grid; justify-items:center; grid-template-columns:repeat(5,20%); } grid-columns-gap和grid-row-gap为网格线的宽度

什么是响应式设计？ iOS 和 Android 的发布，智能手机、平板电脑、智能家电等新设备层出不穷，极大便利了我们的生活，但面对形形色色的终端设备，千差万别的屏幕分辨率，给网页设计带来了新的挑战，我们无法估计用户的终端设备和网络状况，更不可能为每种设备都专门设计一套网站，如何实现 Web UI 在多终端中的适配呢？2010 年 Ethan Marcotte 曾经在 A List Apart 发表过一篇文章"Responsive Web Design"，响应式网页设计提供了一种设计方法，可以使同一网站在智能手机、桌面电脑，以及介于这两者之间的任意设备上完美显示。这种方法能够根据用户的屏幕尺寸，合理地为现有及将来的各种设备提最佳的浏览体验。 http://mediaqueri.es/ 这是一个响应式设计创意收集网站，可以在上面查看到很多响应式设计实例，较多的网站都应用了 Mobile First 设计思想，先针对小视口设备进行设计，然后逐步对大视口设计进行渐进增强支持。 图 1. Froont 响应式设计网站截屏 这也意味着设计思维的转换，不应再执着于布局、线框等的具体大小，而应该考虑如何使用流体元素。与其根据不同设备的大小来设计页面，更着重考虑如何针对内容进行设计。抛弃像素，抛弃固定宽度，先从小屏幕进行设计，然后逐步增强针对大屏幕的设计 当然也需要引导客户

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题，包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文，这些文章篇幅要长的多(甚至要加分页了！)，今天放上的这篇几乎花掉了两天的"闲暇时间"；对耐力是个考验，努力提高喽。废话结束，here we go. 眼下，几乎每个新客户都希望他们的网站可以有专门的移动设备版本。最完美的情况呐，就是为iPhone、iPad、黑莓、Kindle……各自打造一款——页面分辨率还必须兼容任何设备。谁知道未来5年内我们还需要为多少新发明的设备设计开发不同版本的页面？这种疯狂什么时候算个头？ 在Web设计和开发领域，很快的，我们将会无法跟上设备与分辨率革新的步伐。对于多数网站来说，为每种新设备及分辨率创建其独立的版本根本就是不切实际的；结果就是，我们将会赢得使用某些设备的用户群，而失去那些使用其他设备的用户。不过，或许会有另外一种方式，可以帮助我们避免这种情况的发生。 响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率

转载自知乎 https://zhuanlan.zhihu.com/p/25303493 为什么我要写这一篇关于 Flex 布局的教程？ 因为它十分简单灵活，区区简单几行代码就可以实现各种页面的的布局，以前我在学习页面布局的时候我深受其 float、display、position 这些属性的困扰。然而学习 Flex 布局，你只要学习几个 CSS 属性，就可以写出简洁优雅复杂的页面布局。 本教程适合人群： 前端小白，不太明白页面布局技巧，但想通过简单的学习学会如何进行页面布局 学过但是不太熟悉 Flex 布局，需要教程来巩固回顾 Flex 布局的知识点 项目不考虑兼容 IE 低版本浏览器，想简单优雅地写出漂亮的页面布局 废话就不多说了，我将尽可能地用简洁明了的言语来描述 Flex 布局，看完你会收获的。 Flex 基本概念： 在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，这个我们后面再说。 在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。 这里需要强调，不能先入为主认为宽度就是 main size，高度就是 cross size

使用心得 到入css文件 图片链接 外部js kooboo项目开发流程 迁移目标网站 新建布局 使用布局新建页面 新建组件 在页面中引入组件 来源： https://blog.csdn.net/weixin_44387746/article/details/102723341

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。 视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。 瀑布流布局效果 即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 那么规则是什么呢？ 下面通过图解来分析一下瀑布流的算法。 图解瀑布流算法 当第一排排满足够多的等宽图片时（如下图情况），自然而然的考虑到之后放置的图片会往下面排放。 那么第六张图片，放置在什么位置呢？是下图的位置么？ 我们通过瀑布流算法实验得到，后面紧跟的第六张图片的位置应该是这个位置。 为什么呢？ 因为放置它之前，这一列的高度为所有列中最小，所以会放置在这个地方。 所以我们知道了，如果再继续放置下去，第七张图片应该是这个位置，对吗？ 通过瀑布流算法实验得出位置正确。 看懂这个图示应该就能理解了瀑布流的原理算法。 JS 实现代码 var colCount //定义列数 var colHeightArry= [] //定义列高度数组 var imgWidth = $('.waterfall img').outerWidth(true) //单张图片的宽度 colCount = parseInt($('.waterfall').width()/imgWidth) //计算出列数 for

一. 续上篇，继续 1. 有点内容的静态页面 rails new 命令创建了一个布局文件, 不过现在最好不用。我们重命名这个文件: $ mv app/views/layouts/application.html.erb layout_file # 临时改动 注：在真实的应用中你不需要这么做,不过没有这个文件能让你更好地理解它的作用。 注：关于表题所需变动的部分 (1). 添加标题 添加标题之前,我们要知道网页的一般结构，如下图所示： 我们要使用 assert_select 方法分别为app/views/static_pages中的每个标题编写简单的测试。assert_select 方法的作用是检查有没有指定的 HTML 标签。这种方法有时也叫“选择符”(selector),因此才为这个方法取这么一个名称。 assert_select "title", "Home | Ruby on Rails Tutorial Sample App" 这行代码的作用是检查有没有 <title> 标签,以及其中的内容是不是“Home | Ruby on Rails Tutorial Sample App”字符串。把这样的代码分别放到三个页面的测试中。 接下来测试 RED ： rails test 注：测试结果表明三个都没有 (2).添加页面标题 Green ： 打开文件：app/views

流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”，所谓“流”就是“文档流”，是css中的一种基本定位和布局 概念 流体布局（Liquid/Fluid Layout）指的是利用元素“流”的特性实现的各类布局，流式布局采用了相对长度单位（%、em、rem、vm、vh）。典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用 布局特点 流体布局的特点是页面元素的宽度根据屏幕分辨率进行适配调整，但整体布局不变，这就导致如果屏幕太大或者太小都会导致元素无法正常显示，代表作栅栏系统（网格系统） 网页中主要划分区域使用百分比搭配（min-*、max-*属性使用）例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。 这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式 设计方法 使用%百分比定义宽度，高度和文字大小都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。 往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。