随笔分类 -  CSS

CSS:nth-child用法
摘要：1.我对 :nth-child的理解 利用该选择器我们可以轻松的修改特定标签的样式 2. :nth-child的用法 （1）选取第几个标签，这里的数字可以是我们想要的，如下面选取对应的第二个P标签 （2）选取大于等于2的标签，n表示整数，整数代表大于等于，负数代表小于等于，如下面所示 p:nth-c 阅读全文
posted @ 2019-09-17 19:28 Kbin24 阅读(729) 评论(0) 推荐(0)
CSS优先级与计算规则
摘要：1.CSS的计算规则 选择器的特殊性值表述为4个部分，用0,0,0,0表示 2.CSS优先级 一般来说： 内联样式>ID选择器（#id）>属性选择器（a[href=""]）=伪类选择器（：hover）>标签选择器（span、p）=伪元素选择器（::before） 但当权级相同时，后面定义的CSS会覆 阅读全文
posted @ 2019-05-29 14:25 Kbin24 阅读(274) 评论(0) 推荐(0)
Grid网格布局
摘要：1.Grid网格布局 基本概念 Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局。 采用网格布局的区域，成为 “容器”，容器内部采用网格定位的子元素，成为“项目”容器里面的水平区域称为 行（row），垂直区域称为 列（column）行和列的交叉区 阅读全文
posted @ 2019-05-28 19:20 Kbin24 阅读(300) 评论(0) 推荐(0)
CSS单位
摘要：css常见单位 em : 相对于父元素的字体大小，若父元素fon-size为16px,那么1em就为16px rem: 相对于根元素字体大小，若根元素font-size为16px,那么1em就为16px vw : 相对于视窗的宽度：视窗宽度是100vw vh : 相对于视窗的高度：视窗高度是100v 阅读全文
posted @ 2019-05-25 16:46 Kbin24 阅读(209) 评论(0) 推荐(0)
CSS定位
摘要：position的取值主要有如下图： 官方给出的总是不那么容易懂得，所以有了以下简洁易懂的总结： relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处于文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设 阅读全文
posted @ 2019-05-23 23:48 Kbin24 阅读(131) 评论(0) 推荐(0)
CSS清除浮动
摘要：1.浮动产生的原因 一般来说一个盒子使用了CSS float 浮动属性，导致父级对象盒子不能被撑开，这样浮动就产生了。简单地说，浮动就是因为使用了float属性而产生的 2.浮动产生的负作用 由于浮动产生，如果对父级设置 background背景属性，而父级不能被撑开，所以导致CSS背景不能显示 如 阅读全文
posted @ 2019-05-23 20:55 Kbin24 阅读(148) 评论(0) 推荐(0)
浮动元素水平垂直居中
摘要：方法一：使用transform属性 方法二：未知父元素高宽 方法三：使用Flex 方法四：使用table-cell，vertical-align:middle 阅读全文
posted @ 2019-05-23 20:17 Kbin24 阅读(2857) 评论(0) 推荐(0)
Flex布局基本语法
摘要：1.Flex布局基本概念 采用Flex布局的元素，成为FLex容器，简称“容器”，它的所有制子元素自动成为容器成员，称为Flex项目（flex item）,简称为“项目”容器默认存在两根轴：水平的主轴（main axis)和垂直的交叉轴（cross axis） 主轴的开始位置（与边框的交叉点）叫做m 阅读全文
posted @ 2019-05-23 16:56 Kbin24 阅读(379) 评论(0) 推荐(0)