随笔分类 -  CSS

【转】浅析BFC及其作用
摘要：1. 什么是BFC BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。 中文译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和 阅读全文
posted @ 2017-08-27 21:20 gq_orange 阅读(381) 评论(0) 推荐(0)
高度塌陷问题引发的清除浮动的方法
摘要：1. 高度塌陷原因分析 看下面的代码，总的父元素parent包含三个浮动的子元素，容器的高度不能自动伸长以适应内容的高度，出现了高度坍塌问题。 （最上面的一条黑线就是parent元素了，可以看到它的高度为0） 原因就是浮动使子元素脱离文档流，父元素无法感知子元素的存在，而且父元素内部不存在其他处于文 阅读全文
posted @ 2017-08-27 20:47 gq_orange 阅读(602) 评论(0) 推荐(0)
两栏式布局和三栏式布局
摘要：两栏式布局 要求：先加载内容区域，内容区域宽度自适应 1.使用绝对定位 2.使用浮动 三栏式布局 要求：两边宽度固定，中间自适应 （1）先加载内容中间区域 （2）后加载内容中间区域 阅读全文
posted @ 2017-08-18 10:34 gq_orange 阅读(766) 评论(0) 推荐(0)
Less学习总结
摘要：Less is More , Than CSS 1. Less是什么？ LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用，包括浏览器端、 阅读全文
posted @ 2017-08-16 18:49 gq_orange 阅读(218) 评论(0) 推荐(0)
【转】 解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
摘要：先产生一个元素集合，然后从后往前判断； 浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。举个例子，有选择器： body.ready 阅读全文
posted @ 2017-08-10 21:36 gq_orange 阅读(779) 评论(0) 推荐(0)
CSS命名规范
摘要：常用的CSS命名规则 头：header 内容：content/Container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banne 阅读全文
posted @ 2017-07-12 20:20 gq_orange 阅读(172) 评论(0) 推荐(0)
一个满屏 品 字布局 如何设计?
摘要：需要用到的技术 1. 元素水平居中对齐 1) 使用margin对齐(推荐) 2) 使用left：50% 3) 使用text-align 2. 元素对相对窗口定位 1) 使用filxed（推荐） 2) 使用absolute定位 3) 使用html和body的width和height填?这个窗口 3. 阅读全文
posted @ 2017-07-11 12:50 gq_orange 阅读(1685) 评论(0) 推荐(0)
CSS Tools: Reset CSS
摘要：样式初始化 reset.css 阅读全文
posted @ 2017-04-05 18:50 gq_orange 阅读(342) 评论(0) 推荐(1)
元素居中显示
摘要：1.水平居中 for inline, inline-block, inline-table, inline-flex……（前提：该元素的父元素为块级元素） for block-level elements（前提：该元素的width值确定） for 两个及以上的块级元素需要在一行中居中显示 2.垂直居 阅读全文
posted @ 2017-03-31 13:08 gq_orange 阅读(216) 评论(0) 推荐(0)
css float（浮动）
摘要：CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素 阅读全文
posted @ 2017-03-29 20:34 gq_orange 阅读(584) 评论(0) 推荐(0)
css position（定位）
摘要：一个定位元素（positioned element）是其计算位置属性为 relative, absolute, fixed 或 sticky 的一个元素。 相对定位元素（relatively positioned element）是计算后位置属性为 relative的元素。 绝对定位元素（absol 阅读全文
posted @ 2017-03-29 20:08 gq_orange 阅读(1258) 评论(1) 推荐(0)