赤蓝紫の博客

CSS隐藏元素的几种方式前言开始之前，先来了解一下回流和重绘的概念。(经小伙伴评论提醒，后来加的内容)回流：当我们修改元素的几何位置属性，如宽度、高度时，浏览器会重新布局，这个过程就叫回流重绘：当我们修改元素的绘制属性，如背景色、颜色等，浏览器不会重新布局，但是需要重新进入绘制阶段，这个过程就是重绘。可以通过css triggers网站查询元素是否会导致回流、重绘。回流一定会触发重绘，重绘不一定会触发回流display: none最常见的隐藏元素的方法，不会渲染该元素，所以该元素不会占位置，

CSS布局(二)等高布局等高布局，顾名思义，就是指子元素在父元素中高度相等的布局。开始之前，先看一个情境。html代码<main> <div class="left"> <p> 《绝园的暴风雨》（绝园のテンペスト）是城平京原作、左有秀构成、彩崎廉作画的日本漫画。 漫画单行本日文版由史克威尔艾尼克斯（SQUARE ENIX）出版发行，繁体中文版分别由中国台湾的尖端出版社和中国香港的玉皇朝代理发行 该作讲述了日本突然开

CSS布局(一)看面试题，看到两个没听说过的布局圣杯布局、双飞翼布局。这就来学习一波CSS布局。单列布局只需要让header，footer充满整个屏幕，header的内容区、foooter的内容区，content设置一样的宽度，然后都设置 margin: 0 auto实现居中即可。<style> html, body { margin: 0; padding: 0; } header, footer { width: 100%;

CSS画圆、三角形、品字、骰子前言：这篇文章主要是本人正在看面试题，面试题当成八股文来背，太难了。所以，通过写笔记，并自己实践来加深印象。如果这篇文章对你有帮助，请不要吝啬你的赞。圆让 border-radius属性的值等于盒子高度的一半就行(当然，盒子得是正方形才能得到圆，否则便不是圆)<style> .circle { width: 200px; height: 200px; border-radius: 50%; background-col

清除浮动的四种方式浮动是什么CSS 的 Float（浮动），会使元素向左或向右移动，直到外边缘碰到包含框或另一个浮动元素位置。浮动元素的特征：浮动的元素会脱离文档流浮动的元素会紧挨在一起浮动元素具有类似行内块元素的特性。所以行内元素有了浮动，不再需要转换为块级或行内块级元素元素收缩。浮动的元素，如果没有设置width，会自动收缩为内容的宽度。比如块级盒子，如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，会收缩成内容的宽度<style> div[clas

居中对齐的几种方法看面试题，自己总结了下，顺便写了对应例子，加深印象。水平居中给div设置一个宽度，再添加margin: 0 auto必须要添加宽度，只对块级元素有效<style> .container { width: 400px; height: 400px; background-color: pink; color: #fff; } .box { width: 100px; height: 100px; ba

CSS实现渐变字先来下前置知识。如果想速通，也可指直接到渐变字实现什么是渐变CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的时间和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。渐变类型渐变主要有三种类型：线性渐变(linear-gradient)、径向渐变(radial-gradient)、圆