随笔分类 -  CSS

摘要：对于一些布局和样式比较复杂的网页，如何构建一个健康、优雅的CSS文件是一个很令人苦恼的问题。在书写静态页面的时候，我总是遇到布局结构累赘和重复样式复用性不高的问题，当然，对于这些问题归根究底还是要多联系和思考，和使用LESS带来好处并没有什么关系，但是使用LESS书写CSS样式能够清楚的看到样式的布 阅读全文

摘要：由于在学习CSS的display的属性值只针对block、inline、inline-block和flex进行过了解，并且自己观察得知列表中li的display属性是list-item，而想要触发BFC可以将容器类型定义为table-cell、tabble-caption和inline-block， 阅读全文

摘要：CSS选择器的准确书写，保证了元素应用样式的正确性，CSS中选择器主要包括： 1、元素选择器： 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。元素选择器又称为类型选择器（type selector）。类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类 阅读全文

摘要：HTML5增加了一系列的伪类选择器和伪元素选择器，增加的伪元素选择器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文档高亮部分，如鼠标选中文字)、::backdrop(不常用)。前面四者可能比较常用，会聚集到具体 阅读全文

摘要：对元素CSS的display属性设置flex或者inline-flex，那么这个元素就是弹性盒模型容器(flex container)，其子元素就是弹性盒模型子元素(flex item)。在容器中，水平的主轴(main axis)和垂直的交叉轴(cross axis)撑起这个弹性盒模型，对于子级元素 阅读全文

摘要：对于网页页面布局来说，使用定位进行布局十分的方便。 绝对定位（使用绝对定位应当将父元素设置为相对定位，否则元素绝对定位的基准会一直寻找外层非静态定位元素）： 结果如下： 0-1 0-2 0-1 0-2 如果不使用定位，要实现这样的效果，需要使用CSS属性为： 使用边距和浮动是一个计算的过程，需要把握 阅读全文

摘要：CSS具有两个核心的概念——继承和层叠。一般文本类的属性会被继承，即某个元素的CSS属性会传递给内部嵌套的元素。一个元素可能有一个或者多个样式的来源，当属性发生冲突时，就会根据加载顺序和权重大小决定层叠之后显示的属性。先看一个层叠机制表，并对照例子观察层叠规律： 不同的选择器具有不同的权重值，只有在 阅读全文