随笔分类 - # CSS
摘要：设置 行内元素盒模型 与其 行内元素容器 垂直对齐方式。 只对行内元素、行内块元素和表格单元格元素生效。 基线 小写字母“x”的最下方 恰好是基线 中文的基线会略往上 图片和overflow:hidden样式的元素的基线位置是最下方(当有文字时图片下方就会存在间隙) 参考博客 DOM操作: elem
阅读全文
摘要：参考文章 参考视频 main { height: 100vh; scroll-snap-type: y proximity|mandatory; /*proximity是接近时触发翻页，mandatory是强制翻页*/ overflow-y: scroll; } /*隐藏滚动条*/ main::-w
阅读全文
摘要：/* 滚动条整体部分 */ div::-webkit-scrollbar {} /* 滚动条里面的滑块 */ div::-webkit-scrollbar-thumb {} /* 滚动条的轨道的两端按钮 */ div::-webkit-scrollbar-button {} /* 滚动条的滑槽 */
阅读全文
摘要：参考博客 参考博客2 MDN 块级格式化上下文 块级渲染区域 与其他渲染区域 不重叠 可嵌套 一个独立的BFC 需要具备以下条件中的一条 根元素<html>浮动元素float （float：非none）绝对定位或固定定位 （absolute 或 fixed）行内块 inline-block表格单元格
阅读全文
摘要：CSS 样式的继承规则 宽高的继承 宽度 子元素对父元素继承（子元素默认100%宽度） 高度 父元素会被子元素撑开 与文本相关样式，子元素默认会继承父元素 当 固定定位（fixed）和绝对定位（absolute）时，子元素不会继承父元素的宽度 当父元素为inline-block时，宽度会被子元素撑开
阅读全文
摘要：MDN CSS 层叠与继承 冲突 创建了应用于同一个元素的同一样式的多个规则时，只会生效一个，其他规则不生效，我们称之产生冲突 样式生效的判别依据 三步走： 资源顺序优先级重要程度 资源顺序 相同优先级的情况下，后创建的规则优于之前的规则（覆盖） 优先级 优先级顺序： 1.!important1-0
阅读全文
摘要：MDN CSS 值与单位 绝对长度单位 单位名称描述cm厘米mm毫米Q1 Q = 1/4 mmin英寸1 in = 2.54 cmpxpixel像素1 px = 1/96 in 低 dpi (每英寸的像素数) 的设备，1px 是显示器的一个设备像素ptpoint点1 pt = 1/72 inpc派卡
阅读全文
摘要：counter-reset - 创建或重置计数器 在父元素中定义一个计数器 counter-reset: sectioncounter-increment - 递增计数器值 在子元素中添加 对指定计数器进行累加 counter-increment: sectioncounter(section) 或
阅读全文
摘要：属性选择器 [属性=“属性值”] ~= / *= 表示包含|= / ^= 表示以其开头 ~= 和 |= 需要进行完整单词的匹配 [class*='box'] { } /* 选择了 类中包含 ..box.. */ $= 表示以其结尾 组合器 后代选择器 (空格)子选择器 (>)相邻兄弟选择器 (+)
阅读全文
摘要：MDN position position 定位 默认static （top，bottom等无效）绝对定位 absolute fixed相对定位 relative （偏移量）粘性定位 sticky 兼容性差（当页面发生滚动时，不会脱离视窗，直到容器离开视窗） 根据滚动位置在相对（relative）和
阅读全文
摘要：margin元素居中，仅仅对块元素有效 父级元素 文本居中 也可使 子级元素居中 display 属性： 值描述none此元素不会被显示block此元素将显示为块级元素，此元素前后会带有换行符inline默认。此元素会被显示为内联元素，元素前后没有换行符inline-block行内块元素。（CSS2
阅读全文
摘要：浮动float 浮动的出现：最早使文字环绕图片，后来发现能很容易的实现元素并排显示 右浮动打破了常规流的布局 特点： 浮于页面之上，下面的元素会提高占据空位 浮动可以使行内元素拥有块框，也就可以设置宽高 元素浮动的影响： 子元素浮动父元素高度坍塌（父元素继承子元素高度）会对之后的元素产生影响 布局发
阅读全文
摘要：行内元素 - 水平居中 方法一: 对子元素设置 text-align: center; 方法二: 父元素设置 width: fit-content 再让父元素居中 以达到居中目的 - 垂直居中 方法一: 使子元素行高与高度相同（仅对单行有效） 方法二: 子元素设置 vertical-align: m
阅读全文
摘要：边框 border border-radiusborder-imagebox-shadow 圆角 border-radius 背景 background 不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张 background-imagebackground-sizebackgrou
阅读全文
摘要：参考链接 一个 flexbox 一次只能处理一个维度上的元素布局 父元素设为 Flex 布局 (display: flex/inline-flex;) 以后： 子元素的 float 、clear 和 vertical-align 属性将失效。（但子元素的内层不会受到影响）宽度width 会受到 fl
阅读全文
摘要：参考链接 文章目录 媒体查询CSS3 @media 限制生效media属性 限制生效 Flex布局flex的基本概念： 栅格系统栅格系统的实现原理： 媒体查询 根据设备视口尺寸选择性生效 CSS3 @media 限制生效 媒体查询可针对不同设备场景使用不同css，一般栅格系统和多套代码逻辑匹配页面是
阅读全文
摘要：内联样式 在标签中加入style=“属性名：属性值；属性名：属性值；***” 内嵌样式表 在<head>中加入<style>标签 选择器的方式设置样式 外部样式表 link 链接css文件 <link rel="stylesheet" href="xxx.css的路径"> import 链接css文
阅读全文
