随笔分类 -  css

阅读MDN文档之StylingBoxes(五)
摘要：目录 "BoxModelRecap" "Box properties" "Overflow" "Background clip" "Background origin" "Outline" "Advanced box properties" "Setting width and height con 阅读全文
posted @ 2017-07-16 13:30 动机在未来 阅读(638) 评论(0) 推荐(0)
阅读MDN文档之布局(四)
摘要：<! vim markdown toc GFM "Introducing positioning" "Static positioning" "Relative positioning" "Introducing top, bottom, left and right" "Absolute posi 阅读全文
posted @ 2017-07-16 13:20 动机在未来 阅读(470) 评论(0) 推荐(1)
关于a标签颜色的探索
摘要：``` 这是a标签，有href 这是a标签，没有href 这是文字 我是标题 下面，我理一理有哪些情况 1. 设置body的颜色为red, a标签颜色不改变, 原因是因为user agent的a自带有 ':any-link'.权重为10，覆盖了a标签继承a标签的样式。为什么是user agent的样式高于了开发者定义的样式呢... 阅读全文
posted @ 2017-07-16 13:10 动机在未来 阅读(652) 评论(0) 推荐(0)
文字与箭头对齐的多种实现方式
摘要：直接上代码: 阅读全文
posted @ 2017-07-16 12:59 动机在未来 阅读(546) 评论(0) 推荐(0)
使用CSS画图之三角形(一)
摘要：简单的画一个三角形，代码如下: 阅读全文
posted @ 2017-07-16 12:58 动机在未来 阅读(200) 评论(0) 推荐(0)
阅读MDN文档之基本盒模型(三)
摘要：<! vim markdown toc GFM "Box properties" "Margin collapsing" "Adjacent siblings(相邻兄弟)" "Parent and first/last child" "Empty blocks" "Active learning: 阅读全文
posted @ 2017-03-30 15:13 动机在未来 阅读(578) 评论(0) 推荐(0)
阅读MDN文档之层叠与继承(二)
摘要：目录 <! vim markdown toc GFM "The cascade" "Importance" "Specificity" "Source order" "A note on rule mixing" "Inheritance" "Controlling inheritance" <! 阅读全文
posted @ 2017-03-30 15:08 动机在未来 阅读(336) 评论(0) 推荐(1)
阅读MDN文档之CSS选择器介绍(一)
摘要："本文为阅读MDN文档笔记" 目录 <! vim markdown toc GFM "Different types of Selectors" "Attribute Selectors" "Presence and value attribute selectors" "Substring and 阅读全文
posted @ 2017-03-30 15:05 动机在未来 阅读(629) 评论(0) 推荐(0)
几种常见的三列布局，中间自适应，两边定宽
摘要：在这里，介绍几种我所了解到的几种三列布局。实现的方法分别是： 1. 两边绝对定位，中间设置margin left和margin right。 2. 两边分别左右浮动，中间设置margin left和margin right。 3. 圣杯布局。 4. 双飞翼布局。 5. BFC布局，左边左浮动，设置m 阅读全文
posted @ 2017-03-15 08:34 动机在未来 阅读(357) 评论(0) 推荐(0)
常见的两列布局
摘要：想要实现的效果是，一列宽度固定，一列宽度自适应。想到的有三种方法。 1. 绝对定位 2. 浮动 3. 两列都绝对定位 下面请看代码： 阅读全文
posted @ 2017-03-15 08:16 动机在未来 阅读(197) 评论(0) 推荐(0)
浮动后会发生哪些事情？
摘要：目录 <! vim markdown toc GFM "清除浮动" "浮动的特点" "浮动造成的影响" "浮动问题" "参考" <! vim markdown toc 浮动过后的任何元素都成了block level element 清除浮动 所有内容在浮动，如果不处理，那么就会很可怕。幸运的是有一个 阅读全文
posted @ 2017-03-13 09:04 动机在未来 阅读(837) 评论(0) 推荐(0)
inline元素的margin与padding
摘要：替换元素与非替换元素 替换元素(replaced element)：所谓替换元素就是浏览器根据元素的标签和属性，来决定元素具体显示什么内容。比如说：img标签的src属性的值用来读取图片信息并且显示出来。又比如说，input标签的type属性决定是显示输入框还是单选按钮。html中的img、inpu 阅读全文
posted @ 2017-03-12 11:05 动机在未来 阅读(1916) 评论(0) 推荐(1)
多种居中的方式
摘要：``` 水平居中 参考https://css-tricks.com/centering-css-complete-guide/ 我是span元素，想要居中, 父级设置了text-align: center; 我是div，已经有固定宽度，想要居中,设置我的margin: 0 auto; 我是div，已经有固定宽度，想要居中,设置我的父级p... 阅读全文
posted @ 2017-03-12 11:01 动机在未来 阅读(192) 评论(0) 推荐(0)
关于label和input对齐的那些事
摘要：input文本和label对齐 默认状态下，也就是下面这样, 文字和input是居中的。 但是经常设计图中有label的行高，或者input的高度设计，默认状态下，依然是居中的。但是很多时候label和input要浮动，一旦浮动，后面的input标签就紧紧的贴住了label标签，也就造成了视觉上看到 阅读全文
posted @ 2017-03-12 10:57 动机在未来 阅读(3095) 评论(0) 推荐(0)
浅谈清除浮动
摘要：一直以来，被清除浮动给困惑了许久，终于，今天还是要搞懂它，只能算是自己简单的弄懂。 下面引用了别人文章里的一些知识才弄懂。 http://www.cnblogs.com/dolphinX/p/3508869.html 问题来了，为什么要清除浮动? 当内层元素浮动后，父级元素会出现下面几种情况: 1. 阅读全文
posted @ 2016-11-22 13:12 动机在未来 阅读(185) 评论(0) 推荐(0)