随笔分类 - css
摘要：前言 相较于定位，浮动来说，Flex和Grid才是真正为了浏览器布局而开发的CSS布局系统。两列布局是我们经常使用的一种布局 1 – 经典两列布局 效果如图 <style> * { margin: 0; padding: 0; } #left-bar { background-color: red;
阅读全文
摘要：为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 1.如下，我给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 2.当我给内部两个盒子加上float属性的时候 顶部深蓝色盒子就会顶上
阅读全文
摘要：什么是fc? FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC(Block Formatting Contexts)直译为"块级格式化上下文
阅读全文
摘要：我们经常面临一个抉择：到底使用JavaScript还是CSS动画，下面做一下对比 JS动画 缺点：(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。 (2)代码的复杂度
阅读全文
摘要：引言 CSS3中的 Flexible Box，或者叫flexbox，是用于排列元素的一种布局模式。 顾名思义，弹性布局中的元素是有伸展和收缩自身的能力的。 相比于原来的布局方式，如float、position，根据盒子模型，就可以计算出元素的展示尺寸（长宽非百分比），除非溢出，否则不依赖于父容器的大
阅读全文
摘要：轮播在各个公司的官网上是非常常见的一种功能，能够有效的展示多个动态信息。之前一般实现轮播，是使用的js的动画。今天来介绍一种使用纯css实现的轮播图。 <div class="slide"> <ul class="slide-auto"> <li>one</li> <li>two</li> <li>
阅读全文
摘要：一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ，还新增了更细粒度的'min-content'和'max-content'。这几个值都可用在 width, height, min-width,
阅读全文
摘要：CSS3 硬件加速又叫做 GPU 加速，是利用 GPU 进行渲染，减少 CPU 操作的一种优化方案。由于 GPU 中的 transform 等 CSS 属性不会触发 repaint，所以能大大提高网页的性能。 动画与帧 浏览器中动画也是由一帧一帧的图片组成的。我们首先看一下，浏览器每一帧都做了什么。
阅读全文
摘要：1. 实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div></div> </bod
阅读全文
摘要：一、常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新
阅读全文
摘要：CSS继承可定义为特定的css属性向下传递到子孙元素，就是指被包在内部的标签将拥有外部标签的样式，即子元素可以继承父元素的属性。 一、能继承的属性 1. 字体系列属性:font、font-family、font-weight、font-size、font-style;2. 文本系列属性:（1）内联元
阅读全文
摘要：1.content-box(标准盒模型) Chrome浏览器box-sizing默认是content-box，content-box就是元素的width和height决定了元素的宽高，这意味着元素的border和padding等不能算在元素的width和height中 ，padding和border
阅读全文
摘要：详情： grid布局：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html flex布局：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 问题：怎么让一个 d
阅读全文
摘要：我们知道，css文件引入方式有两种：1. HTML中使用link标签 <link rel="stylesheet" href="style.css" /> 2.CSS中@import @import "style.css"; 第一种方式最为常见最为主流，第二种方式则很少见到有人这么写，因而也常被开发
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .border-wrapper { position: relative; margin: 100px auto; width: 200px; h
阅读全文
摘要：比如：黑色渐变到白色，代码如下： .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left botto
阅读全文
摘要：示例： <html> <head> <style type="text/css"> p { white-space: pre-wrap } </style> </head> <body> <p> 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些
阅读全文
摘要：1.Sass安装（Windows版） npm install -g sass 2.预处理 sass src/assets/main.scss(输入文件) src/assets/output.css(输出文件) 还可以利用 --watch 参数来监视单个文件或目录。 --watch 参数告诉 Sass
阅读全文
摘要：Sass是什么 SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。 Scss是什么 Scss是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。大部分扩展，例如变量、par
阅读全文
摘要：语法： border-radius：length/persentage； 1.一个属性值。如border-radius:6px; 它表示元素四个方向的圆角大小都是6px，即每个圆角的“水平半径”和“垂直半半径”都设置为6px； 2.四个属性值，分别表示左上角、右上角、右下角、左下角的圆角大小（顺时针
阅读全文
