一、布局
1.PC端页面
由于PC的屏幕分辨率较大（从1280768到1600900甚至是1920*1080），一般不会出现宽度不够导致折行、换行等情况，所以一般都按照UI设计图原始尺寸来进行编写。在此时，一般会采用导航或者顶部、底部等信息栏满宽度，内容固定宽度然后居中的模式。通常状况下，内容会在一个div里，比如：
<div class="nav">
.....(网站导航)
</div>
<div class="main">
.....（内容主体）
</div>
<div class="foot">
.....(版权信息，合作单位等)
</div>
样式：
.nav,.foot{
width:100%;
}
.main{
width:1200px;
margin: 0 auto;
}
有时为了布局整体美观，就算是满宽度的部分，其具体文字等信息内容也是固定宽度居中的。
2.移动设备
移动设备的话，大致和PC端是一样的，不过还是有其特别的部分。
1).在页面的头部要加meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
因为不同的用户其手机可能会因为系统或者用户自身设置的原因，其屏幕的大小缩放可能不为100%。加上这个标签意思就是将页面在用户的屏幕上以100%的缩放率显示，并且不允许用户自行缩放页面大小，从而达到最佳显示效果。
2).单位。由于移动设备屏幕分辨率等的不一致，所以为了做到页面的自适应，一般不用px这样的固定单位。宽度上一般使用百分比，此时元素的宽度是根据父元素的宽度计算的（最上级的父元素就是window对象也就是屏幕），所以还是很好算的。高度方面一般使用rem，即root em。由于em的计算方式在多层元素嵌套的时候会导致计算十分的复杂和困难，于是就有了rem。rem单位的计算方式和em基本一样，只不过其参照的并不是父元素的font-size而是html标签的font-size。具体的一些设置思路会在后面有所讲述。此外还有vh和vw两种单位，但由于其提出时间较短，所以兼容性还不是很好。
3).设计模式。由于现在很多的移动设备为了清晰度使用的是2倍屏甚至3倍屏，所以在设计图上UI有一种“高清设计模式”。
在这种情况下，通常来说根据UI给出的设计图和实际设备的屏幕宽度，需要按比例将单位缩小或者通过一些方法来进行适配（注：适配多用于图片的高清模式）。
3.浮动
浮动是在布局过程中很重要的一个部分。在此主要讲解一下清除浮动。
由于浮动后的元素事实上脱离文本流，所以在设置了浮动后，会需要再进行浮动清除来使得其不影响布局。否则会出现如下情况：
方法一：overflow:hidden
通过给浮动元素的父元素设置overflow:hidden可以有效的清除浮动。
优点：简单，方便。
缺点：如果遇到特殊的样式需求需要子元素中有内容需要超出父元素范围时会导致显示不完全，如图：
方法二：给父元素定义height
由于是浮动元素脱离文本流，导致无法撑起父元素的高度从而导致排版布局错乱，所以只要能给父元素一个应有的合适的高度就可以解决了。
优点：兼容性好。
缺点：这样一来父元素高度定死，无法随着子元素高度变化而变化。
这种方法适用于写死的静态页面使用。
方法三：使用after伪类和clear:both
通过伪类和clear(其实在网上这是两种方法，考虑到兼容性问题可以同时使用来兼容老版本浏览器)来清除浮动，是当前常用的办法
.layout:after {
visibility:hidden;
display:block;
clear:both;
content:"";
height:0;
}
.layout {
zoom:1;
}
.clear {
clear:both;
}
在很多资料上这是分开成两种方法的，然而事实上其可以同时使用，因为其针对浏览器的兼容性不同的，比如zoom:1这一条就是用于处理ie6和ie7，而:after伪类则是用于ie8以上的版本的。
4.定位
大致简单说一下定位。定位分绝对定位和相对定位两种。
1）.margin
在此之前先说说平时常用的margin，因为我感觉margin这种用来表示元素间间距的属性也能算在页面布局定位这里面吧。在此主要想说的是，margin在垂直位置上会产生一个边界叠加的问题，即在垂直情况下，两个元素中的上下margin会产生一个边界，然后两个元素的边界会使margin值进行叠加，以较大的那个值为准。
边界叠加并不仅仅只出现在上下位置的元素中，一个元素中包含另一个元素时也会产生边界叠加。
这种情况可以通过把内部元素的margin改为外部元素的padding来解决。
事实上，所有的边界叠加问题，都可以通过给元素加上一个透明的border边框来解决，虽然我个人认为直接计算margin总值或者利用padding来做不容易出现其他问题。
2）。相对定位
相对定位的元素的这个“相对”，指的是元素相对于他原来的位置，就是说设置了相对定位的元素，他在其原来的位置占据空间，但是显示时却已经移动到了其他位置。
3）。绝对定位
设置了绝对定位的元素就意味着这个元素已经从文档流中删除掉了，其位置是不会随着文档流变化的，也不会影响其他元素的位置。一般常用的有fixed、absolute。大致的用法很简单，fixed的定位是相对于整个浏览器窗口而言的，而absolute则是相对于其最近的设置为relative的父元素定位的，如果没有其他relative则相对于整个body进行定位。
另外，绝对定位必须要设置水平位置和垂直位置。
同时还要注意fixed在IOS上表现极差，尽量不要使用fixed而是采取其他替代方案。
二、适配
适配这一部分，主要是想说一下移动端的自适应方法。至于PC端，现在的主流PC的分辨率已经不需要进行自适应了，只需要将主要内容按之前的说法那样设置个居中，这样自然就美观了。
1.百分比
百分比这种写法一般都使用于宽度上，其计算的就是百分比x父元素的相应尺寸。
2.em和rem
1）em
em是web中所使用的一种长度单位，其大小是根据父元素的font-size决定的，1em就代表着父元素的font-size，比如父元素的font-size是20px，那么对于其子元素来说1em就等于20px。所以，当父元素的font-size变化时，1em代表的大小也会随之发生改变，这就可以打到自适应的效果。在单页面应用中，如果像我们之前那样不同的组件由不同的人开发，所采取的自适应方案不同，那么使用em就可以防止自己组件的自适应方案污染其他人的组件。然而em有一个最大的致命问题，那就是当页面元素复杂的时候，元素之间的嵌套会使得元素的font-size属性变得难以计算，em的计算同样也会乱掉。
2）rem
rem是当前进行移动端适配的最佳选择，其兼容性和，便利性和实际效果等等都不错。rem其实就是root em的意思，也就是说其参照的并不是父元素的font-size，而是整个html的font-size。这样在计算rem时就不会发生嵌套、继承等等关系导致的提高计算量的问题。
3）媒体查询
无论是em还是rem来做自适应，都是通过改变font-size来实现的，而修改这个的方法，我一般是使用媒体查询来实现的
先看代码
@media only screen and (min-width: 320px){
html {
font-size: 32px !important;
}
}
@media only screen and (min-width: 400px){
html {
font-size: 40px !important;
}
}
@media only screen and (min-width: 480px){
html {
font-size: 48px !important;
}
}
@media only screen and (min-width: 540px){
html {
font-size: 54px !important;
}
}
@media only screen and (min-width: 640px){
html {
font-size: 64px !important;
}
}
@media only screen and (min-width: 720px){
html {
font-size: 72px !important;
}
}
@media only screen and (min-width: 750px){
html {
font-size: 75px !important;
}
}
@media only screen and (min-width: 850px){
html {
font-size: 85px !important;
}
}
@media only screen and (min-width: 1000px){
html {
font-size: 100px !important;
}
}
这一连串的媒体查询原理很简单，就是通过媒体查询@media来根据不同的设备屏幕宽度来设置不同的font-size，这样一来在页面渲染时，就会根据媒体查询获得的值来计算之后一系列的rem值，就可以实现页面的自适应了。
值得一提的是，chrome有最小字体的限制，使用媒体查询方案来解决自适应时在chrome上测试时会出现到了一定的小屏幕时哪怕适配了仍然会出问题的情况。
三.其他一些小技巧
1).box-sizing.
网页的盒子模型分为两种，w3c标准和ie标准模型。其中， W3C标准模型的盒子，其外部尺寸（即作为元素的空间尺寸）是由其元素大小+其border宽度+其margin值+其padding值组成的，而其元素尺寸（即元素的大小尺寸）则是包括元素大小+padding+border。在这种情况下，元素的height和width与其padding和border是分开的，这是我们常用的默认设置，但是在计算布局中元素所占的空间时则需要考虑其border和padding的值。然而ie盒子模型则有点不太一样，在老版本的ie中，盒子模型默认的尺寸中已经包含了border和padding的值。
在IE8以上版本的浏览器中，可以通过box-sizing属性来调整盒子模型的类型，content-box为W3C标准模型，border-box为IE模型。一般来说，后者在遇到一些复杂的带边框的布局时可以使用，能够在尺寸计算上更为方便（当然根据border的值可能尺寸上会和设计图有些许差异）。
2).行内元素
一般的行内元素，在水平方向上的margin和padding有效，但是竖直方向无效。另外，一般的行内元素，无法设置宽高，其宽高由内容来决定，如果想设置宽高用display:inline-block，比如想要在一个段落开头插入一个两个空格的缩进，可以给所有的p标签加一个before伪类来插入一个空格。
.doublewords::before{
display:inline-block;
width:2em;
content:'';
}
顺带一提，html里键盘输入的空格你无论输入多少个最后都会只显示一个空格，如果要输入多个空格的话，使用 。
3).在不定死宽度的情况下居中的问题
有的时候会碰到这种需求：有的导航栏、翻页之类的地方，子元素个数、总宽度不确定，在这种情况下margin:0 auto会无效，因为此时浏览器无法自动计算其左右的margin值，这会导致其水平居中很麻烦，其实这时候有两种办法。
第一是采用flex盒子，这样简单方便快捷。然而考虑到某些情况，有的浏览器不支持flex的话，就可以采用另一种方法，那就是给其设置：display:table
4）垂直居中问题
1.图片和文字的垂直居中
这种情况下，给图片设置vertical-align: middle即可，但是这样需要设置行高，根据行高来进行居中对齐。这个属性用于设置图片等和文字的垂直对齐模式。
2.绝对定位
有些情况下，我们可以采取绝对定位的形式对某个元素进行垂直居中。代码如下：
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
margin-top:-50%;
left:0;
}
其原理是先将子元素定位在父元素高度一半的位置，然后再通过负边距将子元素上移子元素高度的一半，这样就在事实上做到了垂直对齐。
3.flex盒子
这种方法也能做到垂直居中，但由于有条件上的需求（即父元素中只有这一个子元素），所以用的其实并不多。
5）PC和移动端的其他一些区别
1.事件与接口的差别。移动端没有鼠标事件，PC没有移动端的一些相关API和触摸事件。
2.cursor属性。cursor是一个用来改变鼠标指针图标的CSS属性，移动端是没有的，但PC端在有的时候是需要通过cursor属性来打
到提示用户一些交互的作用的。
3.a标签。a标签有三个状态伪类：active、hover、visited，这三个伪类在PC上实现的效果和移动端是不同的。比如hover伪
类，在PC上是鼠标移动过的时候改变样式，但在移动端上并没有这个事件，我自己测试时会在点击a标签时改变样式。同时，a
标签的href属性是可以写javascript语句的，在有的时候是可以用来代替onclick事件的。
本来还想用我以前写过的一些页面举例来大致讲一下的，仔细想想其实并没什么好说的，不如在日常编写中运用还更有用一点。前端不仅仅是js，html和css同样很重要，不能顾此失彼，不能因框架写好了很多东西就忽视别的东西。
