首页 > > 网页制作 > css >

前端实践总结

2018-06-24 00:38:00来源：未知阅读 ()

1、前端基础

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

2、基础布局

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

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

或者margin:0 auto来处理

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

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

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

3、实际应用模块

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

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

<div >

</div>

上面利用的image设置百分比宽度，然后浏览器自动补高度的过程，（缺陷是1、加载时高度沦陷，而是不重要的图片在加载的时候第一时间加载，形成阻塞；如果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;

}

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

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)

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：模拟哔哩哔哩导航条模糊效果

下一篇：nrm NPM源管理工具

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签