css
文章平均质量分 68
不要跟我说对不起
这个作者很懒,什么都没留下…
展开
-
CSS-小技巧-持续更新
1、js css禁止多次点击选中文字js方法<div onselectstart="return false;" >屏蔽双击选中文字的区域</div>css方法<div style="-webkit-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;" >屏蔽双击选中文字的区域</div>2. 利用background 和 backgr原创 2022-03-23 11:12:25 · 431 阅读 · 0 评论 -
css-自适应盒模型的特性
文章目录一、自适应盒模型的特性一、自适应盒模型的特性特性: 自适应盒模型是指当盒子不设置宽度时,盒模型相关组成部分的处理方式是如何的。现象: 父子元素,要求子元素往里收缩。如图:这种布局,基本在日常开发中都会遇到。当我们固定了子元素宽度也就相当于子元素的content区域,如果这个时候再给子元素添加padding、margin或者border,盒模型会自动向四周扩散,最终导致溢出父元素。那就有很大的一部分人直接算出左右间距,然后用父盒子的宽度,减去间距然后设置子盒子的宽度。其实,如果了解盒模型的特原创 2021-09-11 20:54:22 · 306 阅读 · 0 评论 -
css-margin-top传递的现象及解决方案
文章目录一、margin-top传递的现象及解决方案一、margin-top传递的现象及解决方案现象: 父子盒子,希望子盒子顶部距离父盒子有一定的高度。然后我们设置了子盒子的margin-top:20px,但是当我们这么设置的时候,却发现父盒子和子盒子都向下偏移了20px。这就是标题中提到的margin-top的传递现象。基础代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF原创 2021-09-11 20:50:06 · 605 阅读 · 0 评论 -
[浏览器知识点] 重排/回流 重绘 合成
文章目录一、 [浏览器知识点] 重排/回流 重绘 合成1. 重排/回流2. 重绘3. 直接合成阶段二、减少重绘、重排一、 [浏览器知识点] 重排/回流 重绘 合成1. 重排/回流从上图可以看出,如果你通过 JavaScript 或者 CSS 修改元素的几何位置属性,例如改变元素的宽度、高度等,那么浏览器会触发重新布局,解析之后的一系列子阶段,这个过程就叫重排/回流。无疑,重排需要更新完整的渲染流水线,所以开销也是最大的。2. 重绘比如通过JavaScript更改某些元素的背景颜色,那么布局阶段不转载 2021-06-24 11:02:08 · 146 阅读 · 0 评论 -
经典布局-双飞翼
文章目录一、双飞翼布局1. 具体实现一、双飞翼布局产生的背景:针对圣杯布局的缺点,淘宝的工程署们提出了双飞翼布局,原理:在中间区域加一层dom节点,然后添加左右margin,实现三栏布局。1. 具体实现代码骨架:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=原创 2021-06-09 22:24:05 · 502 阅读 · 0 评论 -
经典布局-圣杯
文章目录一、圣杯布局1. 什么是圣杯布局?或者说圣杯布局是解决什么问题?2. 具体实现3. 优化实现一、圣杯布局1. 什么是圣杯布局?或者说圣杯布局是解决什么问题?左右两边是个固定的宽度,中间自适应的三栏布局。2. 具体实现代码骨架:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"原创 2021-06-09 17:19:03 · 233 阅读 · 0 评论 -
font-size: 0的作用和用途
文章目录1. 解决表格之间空隙2. 解决图片之间的空隙3. 解决行内元素空隙多种方法解释:font-size: 0 不是指字体大小是0px代码自动格式化的时候,往往会设置一些适当的缩进、换行,但当元素的display为inline或者inline-block的时候,这些缩进、换行就会产生空白,导致前端页面展示变形。1. 解决表格之间空隙以ul和li为例:最合适的方法就是给li的父级ul设置: font-size: 0;给li设置:font-size: a px; 如此就达到了所需效果,转载 2021-06-08 17:22:14 · 866 阅读 · 0 评论 -
css使用padding-bottom百分比进行提前占位,防止抖动
文章目录一、css使用padding-bottom百分比进行提前占位,防止抖动。1. 页面加载抖动问题一、css使用padding-bottom百分比进行提前占位,防止抖动。1. 页面加载抖动问题在html5开发网页中,经常会遇到这样一个问题,比如一个宽度百分百,高度自适应的图片,在网速慢的情况下加载过程中会出现抖动的问题(未加载图片前容器的高度为0,图片加载完成后下面的内容会被挤下去)。这种问题如果是图片有固定高度,就不会出现加载抖动。但一般情况下,为了使图片不被拉伸,高度一般设为自适应,那转载 2021-06-04 10:45:00 · 1628 阅读 · 0 评论 -
3分钟搞定CSS的4种引入方式
文章目录一、3 分钟搞定 CSS 的 4 种引入方式一、3 分钟搞定 CSS 的 4 种引入方式在 HTML 样式中有 4 种 CSS 引用方式,分别为:行内样式(行间样式、内联样式、行嵌样式)、内部样式、链入外部样式、导入外部样式。行内样式(行间样式、内联样式、行嵌样式): 在网页元素上通过 style="" 属性直接写样式。如:<div style="color: green; margin-top: 30px;border: 1px solid red;width: 500px">转载 2021-06-02 16:05:30 · 196 阅读 · 0 评论 -
前端知识点整理-CSS
文章目录1. CSS中文全称是什么?最新版本是?功能是?2. 前端分为哪几层?功能分别是什么?3. 样式表的书写位置有哪些?我们常用哪些?4. CSS选择器有哪些?请按CSS2.1和CSS3分别回答5. 类名的使用很灵活,它有哪些用法?6. 什么是伪类?什么是伪元素?7. 选择器权重计算8. 文字颜色、字体、倾斜、加粗和下划线9. 什么是行高?如何制作单行文本垂直居中?10. 如何使用font属性快速设置加粗、字号、行高、字体?11. 什么是继承性?哪些属性有继承性?什么是就近原则?12. 什么是width原创 2021-05-13 20:53:54 · 151 阅读 · 0 评论 -
详解CSS-09-过渡动画
文章目录一、过渡1. 过渡的基本使用2. 过渡的缓动效果二、动画1. 动画的定义和调用一、过渡1. 过渡的基本使用transition过渡:transition过渡属性是CSS3的特性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画”兼容性:过渡从IE10开始兼容,移动端兼容良好。网页上的动画特效基本都是由JavaScript定时器实现的,现在逐步改为使用CSS3过渡。优点:动画更细腻,内存开销小。transition属性基本使用:transition属性有4个要素原创 2021-05-13 20:25:51 · 1219 阅读 · 0 评论 -
CSS-盒子垂直居中-持续更新
文章目录一、CSS-盒子垂直居中几种姿势1. 使用table-cell + vertical-align2. 使用inline-block + line-height3. 使用伪元素,inline-block元素特性4. 使用flex5. 使用grid6. 使用定位居中【absolute + transform】7. 使用定位居中【absolute + calc】8. 使用定位居中【absolute + 负margin】9. 使用定位居中【absolute + margin:auto】一、CSS-盒子垂直原创 2021-05-13 12:45:36 · 526 阅读 · 0 评论 -
CSS-盒子水平居中-持续更新
文章目录一、CSS-盒子水平居中几种姿势1. 使用margin2. 使用text-algin + inline-block3. 使用fit-content + margin4. 使用flex5. 使用grid6. 使用定位居中【absolute + transform】7. 使用定位居中【absolute + calc】8. 使用定位居中【absolute + 负margin】9. 使用定位居中【absolute + margin:auto】一、CSS-盒子水平居中几种姿势演示环境代码:// css原创 2021-05-12 13:14:18 · 2312 阅读 · 0 评论 -
详解CSS-08-变形
文章目录一、2D变形1. 旋转变形2. 缩放变形3. 斜切变形4. 位移变形二、3D变形1. 3D旋转2. 空间移动3. 制作一个正方体一、2D变形1. 旋转变形transform属性的rotate():将transform属性的值设置为rotate(),即可实现旋转变形。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。transform-origin属性:可以使用transform-origin属性设置自己的自定义变换原点。 /* 以左上角为中心点进行旋转 */ tran原创 2021-05-10 11:10:33 · 254 阅读 · 0 评论 -
详解CSS-07-背景
文章目录一、背景的基础知识1. 背景颜色基础知识2. 背景图片基础知识二、背景图片高级属性三、渐变背景一、背景的基础知识1. 背景颜色基础知识background-color属性:background-color属性表示背景颜色。背景颜色可以用十六进制、rgb()、rgba()表示法表示。padding区域是有背景颜色的。2. 背景图片基础知识background-image属性:background-image属性用来设置背景图片,图片路径要写到url()圆括号中,可以是相对路径,原创 2021-05-09 19:29:33 · 190 阅读 · 0 评论 -
详解CSS-06-圆角和边框
文章目录一、边框1. 边框的三要素2. 四个方向的边框二、圆角三、盒子阴影一、边框1. 边框的三要素border属性需要三要素线型边框的三要素小属性2. 四个方向的边框四个方向边框的三要素小属性去掉边框border-left:none;属性即可去掉左边框,以此类推。利用边框制作三角形口诀:宽度为0,三边透明,大小调边比较好的推荐写法:二、圆角border-radius属性的值通常为px单位,表示圆角的半径。border-radiu原创 2021-05-09 11:21:12 · 155 阅读 · 0 评论 -
详解CSS-05-浮动与定位
文章目录一、浮动1. 浮动的基本概念2. 使用浮动实现网页布局3. BFC规范和浏览器差异4. 清除浮动二、定位1. 相对定位2. 绝对定位3. 固定定位一、浮动1. 浮动的基本概念浮动的最本质功能:用来实现并排。浮动使用要点:要浮动,并排的盒子都要设置浮动父盒子要有足够的宽度,否则子盒子会掉下去。子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找再前一个兄弟元素浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流,一律能够设置宽度和高度,即使它是span或者a标原创 2021-05-07 23:21:01 · 408 阅读 · 0 评论 -
css的两种盒模型【转载】
前言 初学 css 的时候 div 的一些宽高问题经常会引起一些不好理解的问题,这里做一个关于css盒模型的分享。 问题 下面的代码可以直接复制出去运行哦 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css盒模型</title> </head> <style ty..转载 2021-05-07 10:31:40 · 123 阅读 · 0 评论 -
详解CSS-04-认识盒模型
一、盒模型基本概念1. 认识盒模型什么是盒模型:所有HTML标签都可以看成矩形盒子,由width、height、 padding、margin、border构成,称为“盒模型”。2. width和height属性详解width属性:width属性表示盒子内容的宽度width属性的单位通常是px,移动端开发也会涉及百分数、rem等单位。当块级元素(div、h系列、li等)没有设置width属性时,它 将自动撑满,但这并不意味着width可以继承。height属性:height原创 2021-05-06 20:54:23 · 216 阅读 · 0 评论 -
详解CSS-03-文本与字体属性
文章目录一、文本与字体属性1. 常用文本样式属性2. 字体属性详解3. 段落和行相关属性4. 继承性一、文本与字体属性1. 常用文本样式属性color属性:color属性可设置文本内容的前景色color属性主要可以用英语单词、十六进制、rgb()、rgba()等表示法。英语单词表示法,比如color:red;仅仅用于学习时临时设置一下颜色,工作时基本不用设置这样的形式,因为追求精确。十六进制表示法,是所有设计软件中都通用的颜色表示法,设计师给我们的设计图上面的标注的颜色,通常是 十六进制表原创 2021-05-05 18:48:24 · 119 阅读 · 0 评论 -
详解CSS-02-选择器
一、选择器1. 传统CSS2.1选择器标签选择器:标签选择器也称为元素选择器、类选择器,它直接使用元素的标签名当做选择器,将选择页面上所有该种标签标签选择器将选择页面上所有该种标签,无论这个标签所处位置的深浅。标签选择器的常见作用:标签选择器“覆盖面”非常大,所以通常用于标签的初始化ID选择器:标签可以有id属性,是这个标签的唯一标识id的名称只能由字母、数字、下划线、短横构成,且不能以数字开头,字母区分大小写,但习惯上一般为小写字母同一个页面上不能有相同id的标签。CSS原创 2021-05-05 12:21:12 · 341 阅读 · 0 评论 -
详解CSS-01-基本介绍
一、CSS-基本介绍1. CSS简介CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言。CSS3是CSS的最新版本,增加了大量的样式、动画、3D特效和移动端特性等。CSS使样式和结构分离,样式和结构不用“杂糅着写”,而是彼此分开:HTML就负责结构,CSS负责样式。通过选择器,进行结合。CSS的本质:CSS就是样式的“清单”,要书写合适的选择器,然后把指定元素的样式“一条一条罗列”出来CSS没有加减乘除、与或非、循环、选择、判断,CSS不是“原创 2021-05-03 18:50:31 · 349 阅读 · 0 评论 -
css-5分钟看懂BFC以及实际应用
文章目录一、BFC1. 现象2. 怎么形成BFC3. BFC的其他作用一、BFCBFC[Box Formatting Context,块级格式化上下文]是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,容器外面的元素也不会影响到容器里面的元素。1. 现象一个盒子不设置高度,当里面的子元素浮动的时候,无法撑起自身 <style> .box { width: 600px; border: 1px原创 2021-03-10 15:58:03 · 134 阅读 · 1 评论 -
css-常用布局方法05-flexbox布局
文章目录一、css-常用布局方法1. flexbox布局一、css-常用布局方法1. flexbox布局弹性盒子盒子本来就是并列的指定宽度即可<div class="container"> <div class="flex"> flex </div> <div class="flex"> flex </div> <div class="flex"> flex </div&g原创 2021-03-04 10:11:03 · 115 阅读 · 1 评论 -
css-常用布局方法04-inline-block布局
文章目录一、css-常用布局方法1. inline-block 布局一、css-常用布局方法1. inline-block 布局像文本一样排block元素没有清除浮动等问题需要处理间隙问题原因:字符间距解决:消灭字符或者消灭间距效果:当我们将父容器的宽度改成400px明显看到中间有一道缝隙,这就是inline-block产生的问题解决方案:方案一:推荐做法将父元素的字体设置为0到各子元素,再将字体设置成正常的值.container { width:原创 2021-03-04 10:08:53 · 292 阅读 · 1 评论 -
css-常用布局方法03-float浮动 + margin布局
文章目录一、css-常用布局方法1. float2. float影响3. float浮动 + margin4. 如何清除浮动一、css-常用布局方法1. float元素“浮动”脱离文档流但不脱离文本流<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2021-03-04 10:06:37 · 506 阅读 · 1 评论 -
css-常用布局方法02-table布局
文章目录一、css-常用布局方法1. table表格布局一、css-常用布局方法1. table表格布局// 使用表格标签进行布局<table> <tr> <td class="left">左</td> <td class="right">右</td> </tr></table>.left { background: blue;}.right { backgrou原创 2021-03-04 10:04:06 · 1725 阅读 · 1 评论 -
css-常用布局方法01-盒模型
文章目录一、盒模型[Box Model]1. 不同部分说明2. display / position一、盒模型[Box Model]所有HTML元素可以看作盒子,它包括:边距、边框、填充和实际内容1. 不同部分说明margin:外边距border:边框padding:内边距content:内容区域,宽度和高度只对内容生效,设置的宽度和高度,并不是盒子占用的空间,一个盒子的占用空间=content + padding+border2. display / position确定元素的原创 2021-03-03 10:43:41 · 82 阅读 · 0 评论 -
css-display相关知识点
文章目录一、css-display一、css-displaydisplay:blockblock元素会占一行;默认情况下,block元素宽度为父元素宽度。block元素可以设置width,height属性;块级元素设置了宽度,宽度小于父元素宽度,仍会占一行显示。block元素可以设置margin和padding属性。display:inlineinline元素不会占一行,多个行内元素排列直到一行排列不下就会重新换行,其宽度随元素的内容变化inline元素设置width,height属性原创 2021-03-03 10:13:13 · 239 阅读 · 0 评论 -
史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经验和理解,做...转载 2021-02-03 15:53:09 · 396 阅读 · 0 评论 -
浏览器厂商前缀
文章目录一、浏览器厂商前缀1. 是什么2. 为什么会有浏览器前缀3. 各厂商浏览器使用的渲染引擎4. 哪些css的属性是需要前缀的一、浏览器厂商前缀1. 是什么浏览器厂商前缀是CSS属性之前的小字符串,可确保该属性仅在给定的浏览器引擎中有效并呈现。2. 为什么会有浏览器前缀实现没有工作标准并且可能永远不会成为标准的专有CSS属性提供标准属性的早期实现提供标准以外的替代语法3. 各厂商浏览器使用的渲染引擎Chrome和Safari => WebKit ==> 前缀 -原创 2020-12-23 14:02:08 · 561 阅读 · 0 评论