页面布局

在CSS中，html中的标签元素大体被分为三种不同的类型： 块状元素 、 内联元素(又叫行内元素) 和 内联块状元素。 常用的块状元素有： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 常用的内联块状元素有 ：<img>、<input> 一、 块状元素特点 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。 将内联元素a转换为块状元素，a{display:block;} 二、内联元素特点 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距 不可 设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。 块状元素div转换为内联元素 div{ display:inline; } 三、内联块状元素特点 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。 四、盒子模型 布局模型 在网页中，元素有三种布局模型： 1、流动模型

当我们对我们APP界面进行布局的时候,有时候会用到masonry框架 我们把masonry框架的头文件加载到Supporting Files中,在用到的地方引入对应的头文件 在这里我新建一个tabel和imageView为例 1.tabel #pragma mark #pragma mark -设置indeLabel //先创建一个label UILabel *label = [UILabel new]; //进行赋值 _indexLabel=label; //设置字体居中 label.textAlignment=NSTextAlignmentCenter; label.text=@"你好啊"; label.textColor=[UIColor redColor]; //添加到控制器的view中 [self.view addSubview:label]; //为label做约束 [label mas_makeConstraints:^(MASConstraintMaker *make) { make.top.offset(100); make.centerX.equalTo(self.view); }]; 2.在label的基础上添加一个imageView #pragma mark #pragma mark -设置imageView //创建一个imageView

准备工作： 两个像素：设备像素+css像素 设备像素： 绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 css像素： 适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。 页面的缩放： 当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变 如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍 页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算) 设备像素比（DPR）： 在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 / 视觉视口css像素个数(device-width) 对于不同的设备来说设备像素比是不一样的。在早期iphone的DPR值是等于1的，但是后来引入了高密度屏幕，即为了更清晰的展示画面，在有限的设备空间内引入了更多的设备像素。所以后来iphone设备的DPR就改变了，值一般为2 场景再现： 移动端需求：给你一个750px的设计稿

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 图示 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以继续发展。 2、网速对于用户的web使用体验有着巨大的影响。 3、对于标准的支持。浏览器对于标准的支持也很有限。 4、输入的方式。触屏设备，各种手势操作。 5、使用的环境。设备在物理上和架构上的特性，并不是我们在针对设备进行设计时需要考虑的唯一因素。了解使用环境是从相应设备的Web到响应人的Web的关键。 响应式设计的提出是由 Ethan Marcotte提出的概念， 2. 响应式设计的定义： 根据Ethan Marcotte的定义： Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our

负边距创建自适应宽度的流体布局的实现方法 http://www.jb51.net/css/21617.html CSS布局奇淫技巧之-多列等高 http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html 负值之美：负margin在页面布局中的应用 http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html 负边距在普通文档流中的作用和效果 网页中没有脱离文档流的元素（绝对定位、固定定位等），其在页面中的位置是随文档流的变化而变化的，如下图： 负边距会使它们在文档流中的位置发生偏移，但这种偏移不同于相对定位， 通过相对定位偏移后，其仍然会坚守着它原来的空间 ，不会让文档流的其它元素乘虚而入，而通过负边距进行偏移的元素，它会放弃偏移前占据的空间（这点和绝对定位有点相似），这样它后面文档流中的其它元素就会“流”过来填充这部分空间。还是通过例子来说明吧。现在我们把上图中的块状元素、行内元素以及inline-block元素都设一个负边距 margin:-10px; 看看会发生什么： 我们看到，黑灰色的块状元素好像向左和向上都分别嵌入了浏览器窗口的边界里10px,然后块状元素下面的文字也爬到了它身上，行内元素向左移动盖住了它前面的一个字

rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以 根据屏幕宽度进行自适应 ，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案： 响应式（ Responsive web design ) rem 流式布局 scale伸缩布局 响应式 响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。 rem rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是 通过rem把页面按比例分割 达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的 rem布局demo ，通过设置 document.documentElement.style.fontSize = window.innerWidth + 'px'; 然后设置 <div class="box"></div> 的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。 流式布局 流式布局需要用到百分比或者flex

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的 块级元素 和 行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在 hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度

页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的 块级元素 和 行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行，如下即使两个div之间没任何元素，绿色的div仍然会显示在hongsediv下方，而不是右方 <div style="height: 100px; width: 100px; background-color: Red;"> </div> <div style="height: 100px; width: 100px; background-color: Green;"> </div> 而行内元素在一行中水平排列，行内元素的高度由其内容撑开，不可显示的设置其高度