随笔分类 -  css

置换和非置换元素
摘要：什么是置换元素？ 一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型 并不考虑对此内容的渲染 ，且元素 本身一般拥有固有尺寸（宽度，高度，宽高比）的元素 ，被称之为置换元素。 什么是非置换元素？ w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素。 行 阅读全文
posted @ 2017-04-17 18:59 戈多的等待 阅读(305) 评论(0) 推荐(0)
CSS进阶-深入理解vertical-align和line-height的关系
摘要：前言 实践出真知！ 昨天在写项目的过程中，碰到了许多的bug！我觉得是好的事情，证明不能光看书，还是要多动手。 比如说这样的bug： 这是一个导航栏，分为左右两个div，并设置成了inline block元素，但是问题来了，为什么这两个div在水平方向没有对齐呢？？？而是出现了左边的div是以基线b 阅读全文
posted @ 2017-04-11 00:22 戈多的等待 阅读(199) 评论(0) 推荐(0)
IE的特有属性hasLayout和BFC
摘要：IE多数的bug源于hasLayout属性，这个属性在IE8及以后的浏览器中被抛弃 IE7及以下版本不支持BFC 块级格式化上下文BFC BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何 对其内容进行定位 ，以及与 其他元素的关系和相互作用 。当涉及到可视化布局的时候， Block 阅读全文
posted @ 2017-03-15 20:53 戈多的等待 阅读(252) 评论(0) 推荐(0)
css深入理解之行高line-height
摘要：line height的定义 基线之间的距离 不同字体，基线位置不同 所有内联元素的样式表现都与行内框盒子模型有关，例如浮动的图文环绕效果 4种行内框盒子模型 上面一行普通的文字，包含了4种盒子。 四种盒子模型： 1.“内容区域”（content area） 围绕文字看不见的盒子， 内容区域的高度大 阅读全文
posted @ 2017-03-15 17:37 戈多的等待 阅读(4101) 评论(0) 推荐(1)
前端笔试题_css3三角形定位
摘要：代码： 效果： 如图所示：需要明确几个概念： 阅读全文
posted @ 2017-03-11 20:19 戈多的等待 阅读(252) 评论(0) 推荐(0)
定位学习笔记
摘要：原文: http://www.w3cplus.com/css/advanced html css lesson2 detailed css positioning.html © w3cplus.com 摘录： Position absolute 1.使用了绝对定位的元素但是 没有进行任何盒子位移属性 阅读全文
posted @ 2017-03-11 16:08 戈多的等待 阅读(244) 评论(0) 推荐(0)
深入理解css之float
摘要：float的设计初衷 文字环绕效果 BFC Block formatting context 【块级格式化上下文】 float属性的含义 元素使用了float属性之后，可以使该元素脱离标准流，浮动在其他元素之上，不再占据原本的空间，会导致后面的元素上移并占用该元素原本的空间。 float属性仅对使用 阅读全文
posted @ 2017-03-10 21:25 戈多的等待 阅读(343) 评论(0) 推荐(0)