随笔分类 - CSS
摘要：原子化 CSS 框架 我记得很久之前有时候为了少写些css，我们通常会有如下的样板代码 .block { display: block; } .flex { display:flex } .flex-center { align-items: center; justify-content: cen
阅读全文
摘要：盒子模型 所有HTML元素可以看作盒子，它包括：边距，边框，填充，和实际内容。 CSS中组成一个块级盒子需要: Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height. Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关
阅读全文
摘要：文档流 文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式布局，文档流可以分为定位流、浮动流、普通流三种 普通流(Normal flow) 在常规流中，盒一个接着一个排列，也就是常说的默认的文档流 在块级格式化上下文里面， 它们竖着排列 在行内格式化上下文里面， 它们横着
阅读全文
摘要：背景 在20年初时总感觉自己的css 不够用，想把css 相关的东西整理下，去年一整年都比较忙，忙着就到2021了，今天趁着有点时间，先从选择器开始吧。 听说图片可以提升颜值.... 选择器 CSS选择器用于选择你想要的元素的样式。简单划分为简单选择器、组合选择器、伪类选择器。 简单选择器 通配符
阅读全文
摘要：圣杯布局、双飞翼 圣杯布局、双飞翼布局是经典的三栏式布局，都是两边宽度固定，中间宽度自适应。在HTML结构上中间栏在最前面保证了最先渲染，两种布局的实现方法前半部分相同，后半部分的实现各有利弊，下面会简单介绍两者的区别。 源码 圣杯布局 代码、demo 双飞翼布局 代码、demo 圣杯布局 两边固定
阅读全文
摘要：css 看起来比较简单，但是要想做的好也不是那么容易，我们在平时开发中，主要用css 来美化我们的html结构，所有我觉得css 还是挺重要的，这里记录整理一些关于css 的技巧以及容易忘记的知识点。 1、css 问题解决思路 在遇到css问题时，我一般从以下思路来思考 从元素本身的属性出发，组合各
阅读全文
摘要：MDN定义 https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit 该 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。简单的说是处理替换元素（replaced elements） 的自适应
阅读全文
摘要：css 预处理器 CSS 预处理器用一种专门的编程语言，进行 Web css编码，然后再编译成正常的 CSS 文件，以供项目使用；说简单点就是在某个环境下写css 可以写变量、表达式、嵌套等，在通过该环境将css预处理的语言编译成正常的css文件; sass与scss 学习网站： http://sa
阅读全文
摘要：win10 下如何调试Ie 网上有很多ie的测试工具，包括ms自己出的有，但是如果是win10系统，压根不需要这些玩意。 win10 浏览器edge虽然是重写过的,但是win10并没有完全抛弃ie，可能是为了照顾xxx人习惯ie,打开之后,按F12打开开发工具， 这样就可以用各个版本调试了。 Ie注
阅读全文
摘要：块格式化上下文（block formatting context） 无意间发现这个东西，看了下MDN发现这个东西跟布局有点关系; MDN上的介绍： 块格式化上下文（block formatting context）是页面 CSS 视觉渲染的一部分，它是用于决定块盒子的布局及浮动相互影响的一个区域。
阅读全文
摘要：水平居中 行内元素 行内元素：（img、span、文字等行内元素），通过在父级元素设置 text-align:center 使元素水平居中。 块级元素 块级元素：（div、p、h1...h6、ul、li等块级元素），通过在要居中元素设置 margin:0 auto(上、右、下、左)，这里表示上下0
阅读全文
摘要：布局常用的三种:标准流、定位、浮动； 1、文档流-标准流 窗体自上而下分成一行行（元素在 (X)HTML 中的位置），并在一行行中从左到右排放元素； 2、CSS 定位 Position 属性（绝对定位、固定定位、相对定位、静态（默认）） 可以设置左右上下偏移； 绝对定位：脱离了文档流，位置是相对与父
阅读全文
摘要：1、简单了解浏览器是如何渲染页面和加载页面 浏览器就是通过HTTP 协议与服务器进行通信，取到数据之后进行渲染的过程，如图：这图是园友的看着挺符合我思路就直接拿来用了，从服务器端返回的是HTML代码，浏览器渲染、加载也是从这里开始；浏览器有不同的厂商，所以内部肯定会有不同的处理方式，所以这里只是记录...
阅读全文
摘要：CSS 选择器1、CSS3 选择器简介在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。语法：下面中"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） 下面是W3C中选择器参考手册：选择器例子例子描述CSS.class.intro选择 cla...
阅读全文
摘要：1、 Css基础1.1CSS（层叠样式表 Multiple Styles） CSS 是 Cascading Style Sheets(层叠样式表)的简称。CSS 语言是一种标记语言，它不需要编译，可以直接由浏览器解释执行。CSS 文件也可以说是一个文本文件，它包含了一些 CSS 标记，CSS 文件必...
阅读全文