随笔分类 - CSS
css
摘要：relative，参照物为自己。
absolute，参照物为有定位(非static定位)的父元素。
fixed, 参照物为浏览器的视口。
sticky，参照物为浏览器视口。设置不同方向的值，会粘住于不同方向。
阅读全文
摘要：多列等高布局。主要是视觉效果。可以利用float/table/display:flex等技术来实现。
阅读全文
摘要：## A + B（相邻兄弟选择器）
定义：css2。 匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）。
## A ~ B （通用兄弟选择器）
定义： css3。匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）
## A > B （子选择器）
定义：css2。匹配B元素，满足条件：B是A的直接子节点。
阅读全文
摘要：CSS中的水平居中和垂直居中实现
阅读全文
摘要：box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。
阅读全文
摘要：web应用程序，切换主题，给其换肤，是一个比较常见的需求。
阅读全文
摘要：content-box 标准盒模型。`width` 和 `height` 只包括内容(`content`)的宽和高。在宽度和高度之外绘制元素的内边距和边框。
border-box IE的怪异模型。`width`和`height`属性包括内容(`content`)、内边距(`padding`)、边框(`border`)，但是不包括外边距(`margin`)。在宽度和高度之内绘制元素的内容、内边距和边框。
阅读全文
摘要：在网页布局的时候，在特定的地方，光标形状各有区别。这个时候，就需要用到css的cursor属性。根据自身需要选择设置鼠标指针样式。
阅读全文
摘要：所有的三角形，都是通过盒子模型来设定。 border（边框）的不同大小来决定 border width: 边框的宽度 border style: 边框的样式 border color: 边框的颜色 1：2个颜色 <!DOCTYPE html css的直角三角形 .content trigon zhi
阅读全文
摘要：页面布局，固定头部，滚动下方内容 实际场景 在制作页面的时候，经常会遇到要这样的情况：整个页面，整体分三大模块，头部固定，内容区域，左边固定，右边可以滚动。 最终想要的效果 案例源码 <!DOCTYPE html css固定div头部，滚动条滚动内容 .headDiv { position: fix
阅读全文
摘要：checkbox复选框的对勾样式
阅读全文
浙公网安备 33010602011771号