随笔分类 -  css

css定位中的百分比
摘要：转载自自己在牛人部落中的相关文章 在前端css定位中经常面对的一个问题是，百分比定位究竟是针对于谁定位？ 一、margin，padding的百分比 首先从css的设计意图说起，在浏览器默认的 writing-mode: horizontal-tb; 和 direction: ltr; 的情况下，因为 阅读全文
posted @ 2017-05-26 10:10 bobo的学习笔记 阅读(3566) 评论(0) 推荐(0)
实现多列等高布局_flex布局
摘要：详情参见此篇博客 http://www.w3cplus.com/css/creaet-equal-height-columns 建议掌握方法四、五 其实，利用最新的flex布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html http 阅读全文
posted @ 2017-01-09 09:18 bobo的学习笔记 阅读(6767) 评论(0) 推荐(0)
css3的新特性transform,transition,animation
摘要：一、transform css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性 transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上 阅读全文
posted @ 2017-01-05 16:26 bobo的学习笔记 阅读(9169) 评论(0) 推荐(0)
css响应式布局RWD
摘要：响应式布局结合了三大理念： 1）用于布局的弹性网络（百分比定义宽度） 2）用于图片和视频的弹性媒体 3）媒体查询 在布局中，需要注意的点有： 1）尽量用min-width/max-width,max-height/min-height代替width,height 2)尽量使用百分比，em为单位代替精 阅读全文
posted @ 2016-12-29 22:26 bobo的学习笔记 阅读(807) 评论(0) 推荐(0)
css元素position定位和z-index
摘要：网页元素定位 1.注意点： 1）给元素设定高度要小心，除非给已知大小的图片设置高度，否则无法得知指定元素在页面上会有多高。此时最好使用min-height。 2）对于同一个元素，不要讲float属性和（absolute,fixed）定位方式结合使用，但是和(static,relative)一起使用， 阅读全文
posted @ 2015-08-12 16:50 bobo的学习笔记 阅读(1344) 评论(0) 推荐(0)
css实现元素居中
摘要：参见详细教程，该教程涵盖了所有居中的情况： https://css-tricks.com/centering-css-complete-guide/ css元素居中 1.水平居中 1）文本，图片等行内元素的水平居中 给父块状元素添加text-align:center属性。 2）确定宽度的块级元素的水 阅读全文
posted @ 2015-08-12 16:50 bobo的学习笔记 阅读(231) 评论(0) 推荐(0)
前端实战——带有时间轴的博客首页布局
摘要：一、布局参照模板http://www.yangqq.com/web/24/二、布局的html页面 个人博客模板 网站首页 个人博客模板 ... 阅读全文
posted @ 2015-06-24 11:28 bobo的学习笔记 阅读(1138) 评论(0) 推荐(0)
前端学习——css实用技术
摘要：一，css控制文本样式 文本相关的css属性有很多，包括： color;font-size;font-weight;text-transform(大小写uppercase等);text-decoration(下划线等)；letter-spacing;word-spacing;text-shadow( 阅读全文
posted @ 2015-05-07 16:46 bobo的学习笔记 阅读(212) 评论(0) 推荐(0)
前端学习——css基础知识，选择器与html模板、值得收藏的html标签
摘要：一、css需要的html（采用html5标准） DTD,文档类型声明： <!Doctype html> 文本编码声明： <meta charset="utf-8">,或者<meta http-equiv="content-type" content="text/html;charset=utf-8" 阅读全文
posted @ 2015-05-07 16:33 bobo的学习笔记 阅读(526) 评论(0) 推荐(0)