随笔分类 -  css学习笔记

summery notes for css
overflow:hidden 影响inline-block元素周围元素下移
摘要：前言： 最近在切页中，我想实现左边一个类似下拉选框，且不允许输入，右边有一段垂直居中的文字描述的效果。我对文字用的是p标签。其实可以用个i/b/em等其他行内标签，同时也具有一定语义，做为强调提示，（当时事实证明用行内标签问题一样存在）。最后我的问题出现了。一个设置了overflow:hidden 阅读全文
posted @ 2016-08-03 10:12 印前 阅读(3320) 评论(4) 推荐(1)
参加360前端星计划总结（二）--HTML&CSS
摘要：HTML学习手册（英文版）html:the living standard 重要知识点 动手练习是最好的提高方式 附赠学习网址平台资料查找前端教程微格式(这个不是很懂，需要消化消化) 阅读全文
posted @ 2016-05-09 21:49 印前 阅读(438) 评论(1) 推荐(0)
Difference between link and @import
摘要：原文don’t use @import Using @import within a stylesheet adds one more roundtrip to the overall download time of the page. Using @import in IE causes the 阅读全文
posted @ 2016-04-05 11:23 印前 阅读(151) 评论(0) 推荐(0)
css3 学习图谱
摘要：摘要 最近看了一篇文章，建立最近的知识体系，对于工作了几年的大牛需要，但对学生学习同样也需要，我试着做了自己的css知识总图，类似目录，引导我的学习路线。 3-28日总结 根据该图谱，我学习得更有方向，同时也能够索引到其他的内容，根据不同分类展开扩展，学习效率高而且快。 再深入学习时，也可以根据图谱 阅读全文
posted @ 2016-03-26 16:00 印前 阅读(429) 评论(0) 推荐(0)
清除浮动（闭合浮动）的方法
摘要：一、在元素后面添加元素清除浮动 添加空的标签来清除浮动：<div style="clear:both | left | right | none“></div>.出现位置要紧挨着浮动元素。缺点 带来多于标签 添加br标签来清除浮动：<br style="clear:left | right | al 阅读全文
posted @ 2016-02-27 15:17 印前 阅读(197) 评论(0) 推荐(0)
BFC (Block formatting context)
摘要：一：BFC 是什么 MDN解释： A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occ 阅读全文
posted @ 2016-02-27 11:05 印前 阅读(993) 评论(0) 推荐(0)
css笔记--用户界面样式
摘要：1.系统字体，系统颜色。根据关键字设置为系统某方面相同的字体和颜色 2.光标：鼠标移入时光标的不同显示方法，有十字键，手型：cursor:pointer;cursor:hand;要按顺序，cursor：hand为兼容ie6 3.轮廓：outline,脱离文档流，outline-width,outli 阅读全文
posted @ 2016-02-26 15:04 印前 阅读(195) 评论(0) 推荐(0)
css权威指南学习笔记--列表与生成内容
摘要：列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承，子级列表会继承该图像 3.list-style-position:inside|outside|inherit inside:列表符号在内容开始的地方，outside：列表符号单独列 阅读全文
posted @ 2016-02-26 12:33 印前 阅读(217) 评论(0) 推荐(0)
css学习之LInk & import
摘要：一、用link加载外部样式表 1.放置位置：放在head元素中 2.样式表中只能包含样式规则，不能包含其他标记语言。如出现了标记，会导致其中一部分或全部被忽略。 3.type = 'text/css'可以指定文件是以.css后缀名传递的，并以样式表的规则处理导入数据，较老的浏览器不可以必须要以.cs 阅读全文
posted @ 2016-01-15 15:24 印前 阅读(301) 评论(0) 推荐(0)
清除浮动元素的margin-top失效原因（更改之前的错误）
摘要：在所有的浏览器中都是如下图所示，box3的margin-top失效 原因：查找clear属性是如何清除浮动的 clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在 阅读全文
posted @ 2015-10-29 10:30 印前 阅读(1107) 评论(0) 推荐(0)
p标签不自动换行原因
摘要：前言：发现以前写的就像是笔记，哪像博客啊，这里再次修改。 问题描述： 在固定宽度的p元素里（任何块级元素同理），长单词不自动换行，中文字符会自动换行，效果如：http://codepen.io/aliceluojuan/pen/rrxbpO 产生原因：1.英文会将不包含空格、换行的连续文本认为是一个 阅读全文
posted @ 2015-10-23 11:23 印前 阅读(19444) 评论(0) 推荐(0)
img底边空隙问题原因和解决方案（修改）
摘要：转载自:http://www.cnblogs.com/minelucky/p/4746071.html 练习切图时发现img和父级div之间总是有2px空隙（chrome），上网搜索解决。 图片IMG与容器下边界之间有空隙怎么办？这里介绍3种简单的解决方法。 第一，给图片img标签display:b 阅读全文
posted @ 2015-10-22 12:04 印前 阅读(975) 评论(0) 推荐(0)
display:inline、block、inline-block的区别（摘抄）
摘要：display:inline、block、inline-block的区别 display:inline、block、inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容 阅读全文
posted @ 2015-10-14 10:55 印前 阅读(226) 评论(1) 推荐(0)
表格细边框问题
摘要：这是关于怎么设置HTML表格细边框的问题，把表格边框设置为细小的线条边框 一般我们用表格的时候总会给它个border属性，比如：<table border="1">，其效果如下： ID NAME GENDER 1001 mike male 可以发现表格的边框好像很宽，当然这里的“很宽”绝对不是表格b 阅读全文
posted @ 2015-07-10 21:52 印前 阅读(213) 评论(0) 推荐(0)
css选择器，样式表导入
摘要：css笔记1.选择器（selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 *{} 页面上所有元素应用样式，利用此可以删除每个元素上默认 浏览器的填充和空白边。可以用来对特定 阅读全文
posted @ 2015-06-14 11:27 印前 阅读(298) 评论(0) 推荐(0)