CSS
文章平均质量分 69
火兰
正在努力的人
展开
-
详解clientWidth,scrollWidth,offsetWidth,innerWidth,outerWidth
3.document.documentElement.offsetWidth:元素的内容宽度(不只是你能看到的部分,含滚动条/包含border)2.document.documentElement.scrollWidth:内容可滚动宽度(不只是你能看到的部分,不含滚动条)1.document.documentElement.clientWidth:可视区屏幕宽度(你能看到的页面部分,不含滚动条)5.window.outerWidth:窗口的整个实际宽度(包含你查看console.log时这样的控制台边栏)原创 2022-11-25 00:23:44 · 3075 阅读 · 1 评论 -
前端移动端的rem适配计算原理
1 屏幕宽为 clientWidth(px)。6 则有 w/clientWidth(px) = ruleW(px)/750(px) 单位化简===> w/clientWidth(px) = ruleW/750。7 化简 w = (clientWidth/750)*ruleW(px) 化简==> w = n*ruleW(px) 转换 w = ruleW * n(px)3. 则有 n2(px) = 1(rem) , n (px) * 100 = 1(rem) , n(px) = 1/100 (rem);原创 2022-10-30 20:29:14 · 2780 阅读 · 0 评论 -
px、em、rem的区别
在做项目的时候用什么单位长度取决于你的需求,我一般是这样的:1、像素(px):用于元素的边框或定位。2、em/rem:用于做响应式页面,不过我更倾向于rem,因为em不同元素的参照物不一样(都是该元素父元素),所以在计算的时候不方便,相比之下rem就只有一个参照物(html元素),这样计算起来更清晰。1、rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。2、em 单位基于使用他们的元素的字体大小。3、rem 单位基于 html 元素的字体大小。...转载 2022-08-03 18:48:10 · 5642 阅读 · 0 评论 -
BFC、IFC、GFC、FFC概念理解、布局规则、形成方法、用处浅析
接着聊一下BFC、IFC,与FFC、GFC,GFC是一种二维度的布局方式,现在也蛮火,但是因为兼容性问题比较大,现在用的不多。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是包含块的顶部。BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。不同类型的 Box,会参与不同的 Formatting Context。的时候,此元素将会获得一个独立的渲染区域,我们可以通过在网格容器。...原创 2022-08-03 13:55:28 · 1612 阅读 · 0 评论 -
你以为border-radius只是圆角吗?【各种角度】
6、border-radius:10px 20px 40px/20px 50px 斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。,这个CSS3属性不仅能够创建圆角,还可以创建椭圆角(如下图),把这些角按照不同的顺序和大小来展现,能够绘制成多种多样的图形。斜杠前面的一组四个值分别表示四个角的。...原创 2022-08-03 12:23:53 · 484 阅读 · 0 评论 -
css3新单位vw、vh、vmin、vmax的使用介绍
有时为了突出弹出框,或者避免页面元素被点击。我们需要一个覆盖整个可视区域的半透明遮罩,这个使用。)是你的浏览器实际显示内容的区域—,换句话说是你的不包括工具栏和按钮的网页浏览器。是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。)单位除了可以用来设置元素的宽高尺寸,也可以在文本中使用。),在竖屏和横屏状态下显示的字体大小是不一样的。是相对于父元素的大小设定的比率,)大小来决定的,单位。:视窗宽度的百分比(...原创 2022-08-03 10:32:54 · 3559 阅读 · 0 评论 -
浅析什么是伪类和伪元素?伪类和伪元素的区别解析
1、伪类种类伪类作用对象是整个元素尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。2、伪元素种类伪元素作用于元素的一部分:一个段落的第一行或者第一个字母}伪元素其实相当于伪造了一个元素,例如 before,first-letter 达到的效果就是伪造了一个元素,然后添加了其相应的效果而已;而伪类没有伪造元素,例如 first-child 只是给子元素添加样式而已。伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但。...原创 2022-08-02 23:23:49 · 9046 阅读 · 0 评论 -
浅析css动画知识:用法介绍(规则与关键帧)animation-delay为负值提前进行动画、动画函数(三次贝塞尔曲线与步骤缓动函数)补间动画与逐帧动画效果、如何控制动画运行或暂停及控制元素各阶段状态
因此,两种动画效果都是很有必要掌握的,在实际使用的时候灵活尝试,选择更适合的。forwards:一句话总结,元素在动画开始之前的样式为 CSS 规则设定的样式,而动画结束后的样式则表现为由执行期间遇到的最后一个关键帧计算值(也就是停在最后一帧)我们都知道,正常情况下,动画应该是运行状态,那如果我们将一些动画的默认状态设置为暂停,只有当鼠标点击或者 hover 的时候,才设置其。这个其实是不准确的,不全面的。但是,在动画的前 2s,另外两个元素是不会动的,只有 2s 过后,整个动画才是我们想要的。...原创 2022-08-02 23:08:47 · 3767 阅读 · 0 评论 -
什么是浮动?什么是文档流?清除浮动的几种方式及原理?什么是BFC,如何触发BFC,BFC的作用
float是css样式中的定位属性,用于设置标签对象(如标签盒子、标签、标签、标签等html标签)的浮动布局,浮动也就是我们所说标签对象浮动居左靠左(floatleft;理解BFC属于普通流,相当于一块独立的渲染区域,BFC看成是元素的一种属性,当元素拥有了BFC属性后,这个元素就可以看做成隔离了的独立容器。BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响。...原创 2022-07-30 13:28:27 · 296 阅读 · 0 评论 -
(border-box)盒子模型w3c、IE的区别
主要看这两种盒子模型的优缺点及适用场景。原创 2022-07-30 12:44:41 · 2922 阅读 · 0 评论 -
深度解析 z-index
没有使用z-index该元素的position是否是static,如果是static,那么这个元素就称为;反之,如果position值是relative,absolute,fixed,或sticky则称positioned。positioned元素享受特权,会覆盖元素。而元素中,有float样式的元素覆盖没有float的。元素的“出场”顺序——即在html中的顺序,同类型元素遵循后来者居上的原则。z-index属性设定了一个定位元素及其后代元素或flex项目的z-order。z-indexz轴。...原创 2022-07-28 23:11:29 · 1530 阅读 · 0 评论 -
浅析重复线性渐变repeating-linear-gradient如何使用
repeating-linear-gradient原创 2022-07-28 16:51:09 · 1854 阅读 · 0 评论 -
CSS之浮动布局(float,浮动原理,清除/闭合浮动方法)
1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认)4.浮动的影响:对附近的元素布局造成改变,使得布局混乱 浮动后的元素可以设置宽度和高度等,也就是说元素浮动后会变成块级原创 2021-04-22 17:46:54 · 2107 阅读 · 0 评论 -
关于css @import url(); 和如何导入样式
@import url()总结: 1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。2,@import 是css2里面的,所以古老的ie5不支持。3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。4,link除了能加载css外还能定义RSS,定义rel连接属性...原创 2021-03-12 15:24:13 · 10348 阅读 · 0 评论 -
实现多行文字垂直居中几种方法及其解析
场景:父元素 高度固定,如何使其中的文字垂直居中?1、table布局: 利用display:table+display:table-cell的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .middle-box{原创 2021-03-16 20:32:31 · 1596 阅读 · 0 评论 -
CSS简化思想,少写很多代码
Css简化思想写HTML几年了,再到如今的JSX,最大的感受不是枯燥,而是眼花。写样式的时候,往往需要在HTML/JSX文件和CSS文件之间来回切换,眼球频繁转动,再加上大屏刺眼,很容易引起眼疲劳,如果个人有抽烟,喝酒或是玩手游的习惯,每天早上起床眼睛里都会有血丝,时间长了,就容易引起眼疾。将atom.css定义为提供基础类的CSS库,一个class对应一个单独的CSS属性,与Bootstrap、Ant Design等UI框架提供的块状CSS不同的是,atom.css单一属性class将各种CSS块原创 2021-03-12 15:57:51 · 169 阅读 · 0 评论 -
CSS position详解
一、position1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位置。2.各个属性值的描述:static(静态)没有特别的设定,不脱离文档流,遵循基本的定位规定,不能通过z-index进行层次分级,在普通流中,各个元素默认的属性。 relative(相对定位)..原创 2021-04-22 17:45:20 · 204 阅读 · 0 评论 -
box-shadow详解
1.box-shadow属性语法box-shadow 属性接受值最多由五个不同的部分组成。box-shadow: offset-x offset-y blur spread color position;换句说: 对象选择器 {box-shadow:X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式 }不像其它的属性,比如 border,它们的接受值可以被拆分为一系列子属性,box-shadow 属性没有子属性。这意味着记住这些组成部分的顺序更加重要,尤其是那些长度值。2.o原创 2021-04-23 09:26:29 · 111508 阅读 · 5 评论 -
Flex布局
Flex布局 任何一个容器都可以指定为 Flex 布局。行内元素也可以使用flex布局(display:inline-flex;)。 注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 采用 Flex 布局的元素,称为 Flex 容器,它的所有子元素自动成为容器成员,称为 Flex 项目(flex item) 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交原创 2021-03-16 20:34:57 · 65 阅读 · 0 评论 -
如何画一个三角形
前言:网上最普遍的实现三角形的方法,就是通过控制border来实现,那为什么可以呢?原理我们先来看看border的表现形式。#box{ width:100px; height:100px; background:yellow; border-top: 20px solid red; border-right:20px solid black; border-bottom:20px solid green; border-left:20px solid blue;}原创 2021-07-01 20:05:41 · 1025 阅读 · 0 评论 -
设置文本溢出省略号,换行
最简单的省略号(单行,溢出隐藏)p{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}效果:多行省略号p{display: -webkit-box;-webkit-box-orient: vertical;/*设置省略号在容器第四行文本后*/-webkit-line-clamp: 4;overflow: hidden;}效果:局限性:使用webkit的css扩展属性(.原创 2021-03-09 16:06:38 · 334 阅读 · 0 评论 -
垂直居中的几种常用方法
垂直水平居中的方法块级元素1.Flex关键语句:display: flex;(弹性盒子)justify-content: center;(左右居中)align-items: center;(垂直居中).songtao{ width: 500px; height: 300px; background-color: dodgerblue; margin: auto; /* 添加样式 */ display: flex; justify-cont...原创 2021-03-09 15:20:29 · 620 阅读 · 0 评论 -
背景颜色透明度的改变同时也影响文本颜色的解决方法
使用rgba这里的0.1就代表是不透明度首先区别一下RGB和RGBArgb就只有三个数值,来设置颜色rgba有四个值,这里注意和rgb相比多了一个alpha我们知道opacity:;可以设置0不透明度,alpha就是数值,直接在第四个位置输入0.1就相当于opacity:0.1;...原创 2021-03-08 15:21:02 · 1644 阅读 · 0 评论 -
CSS
CSS高级语法选择器分组:h1,h2,h3,h4,h5,h6{color:red;}继承:body{color:green;}CSS背景背景:background-attachment 背景图像是否固定或者随着页面的其余部分滚动background-color 设置元素的背景颜色background-image 把图片设置为背景background-position 设置背景图片的起始位置background-repeat 设置背景图片是否如何重复CSS文本color 文本颜原创 2020-12-04 18:11:12 · 90 阅读 · 0 评论