前端入门实践：CSS & 调试工具篇

Lavender 发布于2019-08-30 15:54 / 992人阅读

摘要：篇块级元素行内元素文档流将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

CSS篇 1.块级元素 VS 行内元素

文档流!

将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素，即为文档流。

块级元素：自动换行；垂直排列；width/height/margin/padding都可控制；默认宽度100%，除非设置width/margin

div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , menu , noframes , noscript , ol , p , pre , table , ul , li...

行内元素：水平排列；width/height无效，只能通过line-height设置；margin/padding左右有效，上下无效

a , b , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup...

display/float/position可以改变元素显示类型， inline->block, block->inline

2.CSS盒模型

box-sizing

3. display

none

inline

block

inline-block

table

table-cell

flex

4.布局

position

static, relative, absolute, fixed

top, left, right, bottom

float
桌面浏览器，二三栏布局，需要清除浮动

flex
移动端的时代，弹性布局，浏览器前缀兼容

http://zh.learnlayout.com/

http://www.runoob.com/w3cnote...

5.兼容性查看

https://caniuse.com/

工具篇 1.chrome/ff开发者工具

html&css调试

console

断点, debugger

网络请求

...

2.Fiddler / Charles

mock数据

修改header

3.weinre

远程调试

GPU云服务器云服务器入门篇 ASPNET入门数据篇机器人制作入门篇 python3入门到实践

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116867.html

前端资源系列（4）-前端学习资源分享&amp;前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

zxhaaa 2019-08-22 16:11 评论0 收藏0
前端资源分享-只为更好前端

摘要：一团队组织网站说明腾讯团队腾讯前端团队，代表作品，致力于前端技术的研究腾讯社交用户体验设计，简称，腾讯设计团队网站腾讯用户研究与体验设计部百度前端研发部出品淘宝前端团队用技术为体验提供无限可能凹凸实验室京东用户体验设计部出品奇舞团奇虎旗下前一、团队组织网站说明腾讯 AlloyTeam 团队腾讯Web前端团队，代表作品WebQQ，致力于前端技术的研究 ISUX 腾...

JouyPub 2019-08-02 10:10 评论0 收藏0