1.高级布局<文档流概念>:页面从上至下,块式标签一行一行排列,内联式一行中从左至右排列<BFC规则>:左右位置(左右margin)垂直位置(上下margin)容器内外(互不影响)<脱离文档流>:脱离文档流的元素 拥有black块级元素所有 综合使用 em,rem,vw,wh,%布局流式布局---让布局脱离固定值(一般只是宽)限制,可以根据页面情况改变相应发生改变,整体布局不改变 百分比布局 响应式布局---不同大小屏幕 显示不同的布局@media  screen an…

如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过拖放创建一个具有响应性的布局原型.你可以简单地添加任意数量的页面,DIV,定义百分比的宽度,也支持嵌套网格,还可以自动生成下载文件. 您可能感兴趣的相关文章 那些让人惊叹的的国外创意404错误页面设计 让人爱不释手的精美 Web 应用程序图标素材 赞!10套精美的免费网站后台管理系统模板 期待已久的…

关于rem,主要参考文档 1.腾讯ISUX (http://isux.tencent.com/web-app-rem.html) 2.http://www.w3cplus.com/css3/define-font-size-with-css3-rem 现在移动端 web app 的自适应布局的方案有 5种. 零. Flexbox 使用css3 flexbox 进行布局,对于富媒体和复杂排版的支持非常强大,未普及兼容性非常差,几乎没有在任何项目中得到应用. 一. 弹性布局 使用 em 或 rem…

CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法.与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离.提起DIV+CSS组合,还要从XHTML说起.XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求."DIV+CSS&q…

前言  Flex是Flexible Box的缩写,就是「弹性布局」.从2012年已经面世,但由于工作环境的原因一直没有详细了解.最近工作忙到头晕脑胀,是要学点新东西刺激一下大脑,打打鸡血. Flex就这么简单 浏览器兼容性  一说到兼容性就是永远的痛,不过幸运的是只要在IE10加-ms-前缀就可以用啦^_^ 涉及的对象  Flex布局主要是操作Flex Container 和 Flex Item两类对象. Flex Container为作为布局容器拥有main axis,main start,m…

使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数浏览器采用自动表格布局算法对表格布局:表格及单元格的宽度取决于其包含的内容. fixed :表格和列的宽度通过表格的宽度来设置,某一列的宽度仅由该列首行的单元格决定:在当前列中,该单元格所在行之后的行并不会影响整个列宽. **注意** 使用 “fixed” 布局方式时,整个表格可以在其首行被下载后就…

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的探索之旅吧! 网页布局 常见的网…

纯CSS实现移动端常见布局--高度和宽度挂钩的秘密 不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊-可是在项目上线之后,才让我崩溃了,原因非常easy,在低于安卓4.4的版本号的手机上,自带的浏览器是不支持这个属性的. 好吧,这还不时最坑爹的,在国产的猎豹浏览器以及其它一些浏览器里面,有可能也不支持.总而言之,这个坑踩大了.只是没关系,大部分的常见布局问题,我都能解决掉.可是,以下这个-.我真心有点费解.只是,没关系,通过我的研究,终于还是非常快用…

流体布局 什么是流 在谈论流体布局之前我们需要知道一件事情就是何为“流”,所谓“流”就是“文档流”,是css中的一种基本定位和布局 概念 流体布局(Liquid/Fluid Layout)指的是利用元素“流”的特性实现的各类布局,流式布局采用了相对长度单位(%.em.rem.vm.vh).典型的流式布局是采用百分比(%)作为主要区块的单位, 当然其他的相对单位(em)也是同样适用 布局特点 ** 因为“流”本身具有自适应特性,所以流体布局往往都是具有自适应特性的,但是流体布局并不等同于自适应布局…

前言 当为大量用户设计网站时,设计人员必须考虑到访问者的差异: 屏幕分辨率, 浏览器的选择, 是否在浏览器最大化状态, 浏览器的额外工具栏的开启(历史记录,书签等), 操作系统和硬件. 我们知道css中有各类布局,从发展至今包括 固定布局.静态布局.栅格布局.流体布局.液体布局.自适应布局.响应式布局.弹性布局,但是概念总是模糊不清,最近在看一本很喜欢的书,决定要把css布局整理一下 固定布局 概念 固定布局(fixed layout)即传统Web设计,页面的大小采用固定的宽度,固定布局拥有固定…