前端实践总结

一、前端基础

盒子模型     位置（相对   绝对）  浏览器渲染顺序（从上而下，从外到里;若是里面有宽度则再从里而在，如div没有设置宽度则一直撑大到设置了宽度的div为止）    浮动

二、基础布局

中间固定两边自适应（就是居中了）

可用display:inline-block 和text-align:center

或者margin:0 auto来处理

 

两边固定中间自适应（从盒子模型入手理解）

可用左右两个固定浮动div加上中间有margin-left  margin-right偏移的div便可

 

其余瀑布流布局  左右布局  左中右布局  上下布局 浮动布局 

 

三、实际应用模块

应该注意的是除了最外面的框应该有确实的百分比或者宽度以外，内部的都不该该指定

都应该按照百分比开写，上面应为

<div >

   <!--得先有一个padding的宽-->

    <div style="padding:5px">

            <img style="width:100%;display:block;" src="" />

           <p style="height:4rem;font-size:2rem"></p>

           <p>123</p>

     </div>

</div>

 

上面利用的image设置百分比宽度，而后浏览器自动补高度的过程，（缺陷是一、加载时高度沦陷，而是不重要的图片在加载的时候第一时间加载，造成阻塞；若是background-image能够解决后加载问题，不过若是要实现延时加载用这个方式就要将样式写到页面上了）

第二种响应式的方式使用padding-top=(图片高度/图片宽度)*100%来设置，这样就能够用background-image来设置图片了。

如：

.figure {

            padding-top: 30.85%; /* 316 / 1024 */

            background: url("http://images2015.cnblogs.com/blog/561794/201603/561794-20160310002800647-50077395.jpg") no-repeat;

            background-size: cover;

            background-position: center;

        }  

 

<div class="figure"></div>  

 

 

 

 

注意4个，那么用百分比平分便可，里面的图片文字居中

 

 

 

四、应该注意的事情

div  span  文字与图片

例如文字居中只要text-align指定便可 可是图片不行   图片用margin:0 auto来指定居中 div和span则二者均可以，区别在于若是用文字的方式，那么须要指定容器是像文字同样（display:inline-block），推荐用margin:0 auto

 

垂直居中须要用到display:inline-block  verxxxalign:middle   父对象要指定line-hight  便可

 

文字的height与line-height的区别，怎么作到相等？

 

手机版本百分比和rem的适用情形

百分比只用于宽度的百分比，rem是通常用于文字大小和高度。

 

浮动要清除，要总结经常使用清除浮动方式代码

 

 

 

 

来自为知笔记(Wiz)