随笔分类 -  HTML/CSS

CSS 盒模型
摘要：盒模型包括 名称 属性 内容区域 content 内边距区域 padding 边框区域 border 外边距区域 margin 通过 box-sizing 来设置盒模型的类型，默认是 content-box。 content-box 即 W3C 盒模型，元素的宽高大小表现为内容（content）的大 阅读全文
posted @ 2020-07-14 15:36 月半流云 阅读(138) 评论(0) 推荐(0)
BFC 简述
摘要：BFC 是什么 BFC 全称为块级格式化上下文（Block Formatting Context），BFC 是 W3C CSS2.1 规范中的一个概念。 它决定了元素如何对其内容进行定位以及与其它元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context 提供了 阅读全文
posted @ 2020-07-14 15:28 月半流云 阅读(335) 评论(0) 推荐(0)
CSS 优先级计算
摘要：CSS 的优先级是根据样式声明的特殊值来判断的。 选择器的特殊值分为四个等级，如下： 内联样式 1,0,0,0 ID 选择器 0,1,0,0 类选择器/属性选择器/伪类选择器 0,0,1,0 元素和伪元素选择器 0,0,0,1 或者更加直观一点概括为 6 个，包括以下两个： !important 1 阅读全文
posted @ 2020-07-12 10:04 月半流云 阅读(294) 评论(0) 推荐(0)
在页面上隐藏元素的方法有哪些
摘要：|方法|是否占据空间|是否响应事件|补充说明| |: |: |: |: | | |否|否|会引起回流和重绘| | |是|否| | | |是|是|会引起重绘| | 将元素移除可见区域|是| | | | 将元素缩放为 0 尺寸|是|否| | | 层级调低的同时在同样的位置上用其他元素覆盖|是|否| | 阅读全文
posted @ 2020-03-23 14:28 月半流云 阅读(360) 评论(0) 推荐(0)
圣杯布局与双飞翼布局
摘要：圣杯布局跟双飞翼布局的实现，目的都是左右两栏固定宽度，中间部分自适应。 圣杯布局 整体布局，main 为外部容器，容器内 middle，left，right 依次排列（注意排列顺序）。 1. 设置外部容器 ； 2. 左中右部分，均设置 ； 3. middle 部分 占满； 4. 设置 使其占住 mi 阅读全文
posted @ 2020-03-23 10:46 月半流云 阅读(183) 评论(0) 推荐(0)
ECharts 设置背景图片
摘要：实现的思路： 1. 设置 echarts 实例的背景为透明； 2. 外层容器设置背景图片。 阅读全文
posted @ 2020-03-20 14:28 月半流云 阅读(12441) 评论(0) 推荐(0)
CSS 实现叉号
摘要：``` html ``` ``` css .close { position: relative; width: 40px; height: 40px; } .close::before, .close::after { position: absolute; content: ' '; background-color: red; left: 20px; width: 1px; height: 阅读全文
posted @ 2020-03-19 20:45 月半流云 阅读(5861) 评论(0) 推荐(1)
解决 sticky 粘性布局顶部空白
摘要：粘性布局，在移动端浏览器上顶部会有一条空隙。 用一个不对盒模型尺寸、位置产生任何影响的 1 像素高的阴影来覆盖掉这个缝隙。 阅读全文
posted @ 2020-03-19 11:12 月半流云 阅读(1333) 评论(0) 推荐(0)
img 标签与外层容器底部存在距离
摘要：首先是以下代码： 在浏览器中预览会发现，图片并没有填充满外层的``，底部存在一定的距离。 具体原因在网上查找后有这么一段话： 图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font size，font family 相关，不 阅读全文
posted @ 2020-03-18 23:11 月半流云 阅读(355) 评论(0) 推荐(0)
link 与 @import 区别
摘要：规范 @import 是 CSS 提供的语法规则，只能用于导入样式表。 link 是 HTML 标签，不仅可以加载 CSS 资源，还可以用于引入网站图标等。 加载顺序 加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完成后下载。 关于这一点，只在 C 阅读全文
posted @ 2020-03-17 15:21 月半流云 阅读(158) 评论(0) 推荐(0)
网站整体变灰
摘要：```css html { filter: grayscale(100%); } ``` 阅读全文
posted @ 2019-12-13 11:15 月半流云 阅读(478) 评论(0) 推荐(0)
移除HTML5 input在type="search"时的清除按钮
摘要： 阅读全文
posted @ 2018-11-20 11:51 月半流云 阅读(2231) 评论(0) 推荐(1)
移除HTML5 input在type="number"时的上下小箭头
摘要：Chrome FireFox 参考： "https://stackoverflow.com/questions/3790935/can i hide the html5 number input s spin box" 阅读全文
posted @ 2018-11-20 11:49 月半流云 阅读(178) 评论(0) 推荐(0)
flex基本概念
摘要：基本使用 任何一个容器都可以指定为flex布局 行内元素也可以使用flex Webkit内核的浏览器，必须加上 前缀 容器的属性 flex direction flex wrap flex flow justify conteng align items align content flex dir 阅读全文
posted @ 2017-12-14 20:28 月半流云 阅读(331) 评论(0) 推荐(0)
css选择器:nth-child()与:nth-of-type()的差异
摘要：:nth-child()和:nth-of-type()都是Css3中的伪类选择器，其作用相似却又不完全相同。 名词解释 :nth-child()选择器匹配其父元素的第n个子元素，不论元素类型。 :nth-of-type()选择器匹配其父元素特定类型的第n个子元素的每个元素。 例子一 html代码 将 阅读全文
posted @ 2017-02-15 15:39 月半流云 阅读(458) 评论(0) 推荐(1)