![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页笔记
文章平均质量分 51
笔记
小白白中之白
这个作者很懒,什么都没留下…
展开
-
自定义滚动条
代码1:<style> div{ height: 200vh; width: 200vh; } ::-webkit-scrollbar{ width: 0; height: 0; } </style>效果:由于都设置为零所以看不到代码2:...原创 2021-08-22 00:06:49 · 70 阅读 · 0 评论 -
overflow的用法
overflow有四个属性值,分别是:visible(默认值。内容不会被修剪,会呈现在元素框之外)hidden(内容会被修剪,并且其余内容不可见)scroll(内容会被修剪,浏览器会显示滚动条以便查看其余内容)auto(由浏览器定夺,如果内容被修剪,就会显示滚动条)inherit(规定从父元素继承overflow属性的值)示例:1:2:3:4:...原创 2021-08-16 20:40:56 · 2711 阅读 · 0 评论 -
transition过渡效果无效问题
因为一些事二停止学习了7天,为此我又重新回来了。问题引入代码:<style type="text/css"> div{ width: 100px; height: 100px; background-color: aqua; position: absolute; transition: all 2s; /* left: 0px; */ } </style>原创 2021-08-14 14:46:24 · 3514 阅读 · 1 评论 -
border图形小技巧
width为0或者height为0#a{ margin: 150px auto; height: 100px; width: 0; border-top: 50px solid red ; border-bottom: 50px solid yellow ; border-right: 50px solid gray; border-left: 50px solid aqua; }原创 2021-08-03 03:43:50 · 456 阅读 · 0 评论 -
transform的相关问题
半夜看手机看到以前的一些东西,想到以前的事,哪曾想回忆竟像开了闸样的水样涌过来,便睡不着起来听歌学习。transform变化相对于谁的问题transform是在现有的元素上浏览器做的渲染,不会改变位置和大小,这句话表明transform变化总是相对其正常位置的。*{ margin: 0; padding: 0; } div{ background-color: aqua; width: 100px; hei原创 2021-08-03 02:29:14 · 206 阅读 · 0 评论 -
flex布局与绝对定位
flex可以使绝对定位元素居中,但绝对定位元素会使flex-shrink失效代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-w原创 2021-07-30 21:39:25 · 2342 阅读 · 0 评论 -
flex布局下的宽度的问题
问题flex布局下,宽度达到100%以上,发现无效即实际效果最多只能达到100%。解答我发现是我对flex布局还不够熟悉。flex布局有如下两个属性。flex-grow属性:定义项目的放大比例flex-shrink属性:定义项目的缩小比例解释:1:flex-grow属性:定义项目的放大比例。默认值为0,即如果空间有剩余,也不放大。可以是小数,按比例占据剩余空间。2:flex-shrink属性默认值为1,即如果空间不足将等比例缩小。如果有一个项目的值为0,其他项目为1,当空间不足时,该项目原创 2021-07-30 20:21:12 · 5057 阅读 · 0 评论 -
video标签和source标签
介绍< video >元素用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。< source >元素为< picture >,< audio >或者< video >元素指定多个媒体资源video标签常见属性autoplay 如果出现该属性,则视频在就绪后马上播放。controls 如果出现该属性,则向用户显示控件,比如播放按钮。loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。muted 如果原创 2021-07-29 20:04:12 · 13829 阅读 · 0 评论 -
transition贝塞尔曲线
在线工具:Canvas贝塞尔曲线绘制工具cubic-beziertransition中的贝塞尔曲线:ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0原创 2021-07-28 18:20:31 · 914 阅读 · 0 评论 -
自定义属性
介绍自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。由自定义属性标记设定值(比如: --main-color: black;),由var() 函数来获取值(比如: color: var(–main-color);)复杂的网站都会有大量的CSS代码,通常也会有许多重复的值。举个例子,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它原创 2021-07-28 17:35:16 · 1443 阅读 · 0 评论 -
object-fit
介绍MDN解释:object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。来画画重点。object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。解释:可替换元素:CSS 可以影响可替换元素的位置,但不会影响到可替换元素自身的内容,常见的有img和video标签其使用的高度和宽度确定的框:是图片对自身高度和宽度的适应,而不是对父元素盒子的适应!常见属性值fill(默认)被替换的内容正好填充元素的内容框。整个对象原创 2021-07-28 11:03:30 · 174 阅读 · 0 评论 -
关系选择器,nth-child和nth-of-type
关系选择器后代选择器:E F 选择E元素的所有后代F元素子选择器:E > F 选择E元素的所有子元素F相邻同胞选择器:E + F 选择紧接在E元素之后的第一个兄弟元素F同胞选择器:E ~ F 选择E元素之后的所有兄弟元素Fnth-child和nth-of-type区别:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素。(标签优先)而ele:nth-child(n)是指原创 2021-07-26 14:11:01 · 112 阅读 · 0 评论 -
块格式化上下文
块格式化上下文(Block Formatting Context,BFC)具有BFC属性的元素也属于普通流定位方式,与普通容器没有什么区别,但是在功能上,具有BFC的元素可以看做是隔离了的独立容器(块级元素),容器里面的元素不会在布局上影响到外面的元素,并且具有普通容器没有的一些特性,比如包含浮动元素,以防止出现高度塌陷问题。创建块格式化上下文下列方式会创建块格式化上下文:根元素()浮动元素(元素的 float 不是 none)绝对定位元素(元素的 position 为 absolute 或原创 2021-07-26 02:03:51 · 180 阅读 · 0 评论 -
::before,::after使用注意事项
注意事项:::before,::after为伪元素,伪类元素的display是默认值inline::before和::after必须配合content属性来使用不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容,例如图标。...原创 2021-07-25 21:19:15 · 275 阅读 · 0 评论 -
calc()
calc() 函数用于动态计算长度值。特点:任何长度值都可以使用calc()函数进行计算支持四则运算和优先级运算及混合单位运算可以使用百分比、px、em、rem等单位注意事项:运算符前后都需要保留一个空格...原创 2021-07-25 20:12:38 · 61 阅读 · 0 评论 -
元素宽度和高度问题
不设置宽度不设置宽度涉及自适应子容器高度问题和继承问题设置高度百分比设置高度百分比涉及参照物问题(offset-parent与parent)不设置高度不行设置高度百分比同上原创 2021-07-25 18:38:39 · 52 阅读 · 0 评论 -
html中常见的居中方法
代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <原创 2021-07-24 19:37:54 · 285 阅读 · 0 评论 -
html快速简写(emmet写法)
Emmet—写HTML/CSS快到飞起Emmet使用详解转载 2021-07-24 14:12:19 · 216 阅读 · 0 评论 -
display:inline-block与float
区别相同处:具有类似的效果不同处:display:inline-block将会产生间隙(可使用font-size:0或去除代码中的空格消除)float会脱离文档流(对父元素使用overflow:hidden放置高度坍塌)display:inline-block采用底部对齐解决了float残次不齐的问题解释:1:3:display:inline-block:float:总结对于浮动布局就用于需要文字环绕的时候,毕竟这才是浮动真正的用武之地,水平排列的是就交给inline原创 2021-07-24 11:17:46 · 201 阅读 · 0 评论 -
border-radius
原理将某一特定的椭圆(圆属于特殊的椭圆)放置图形边角并与图形的角的两边相切,图形的边角变为其某一段弧(这里可能不好理解可以先看下面再反过来看上面)如何确定上面所说的特定的椭圆?下文黑色加粗部分一: 一个参数如果border-radius只有一个参数,参数则为px或百分比px代码#a{ width: 100px; height: 100px; background-color: aqua; border-radius: 25px;原创 2021-07-24 01:24:23 · 484 阅读 · 0 评论 -
font-size百分比
代码:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <原创 2021-07-23 18:07:21 · 1097 阅读 · 0 评论 -
手风琴html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-04-25 23:04:52 · 103 阅读 · 0 评论 -
html中定位问题
这里只介绍两种最常见的定位:absolute和relative相对定位相对于原来的位置进行位移原本在文本流中所占的空间仍保留绝对定位除了static,其他定位都可以做绝对定位的父元素来进行位移若向上寻找找不到可以定位的元素则以html进行定位脱离文档流...原创 2021-07-23 13:58:50 · 114 阅读 · 0 评论 -
line-height
CSS line-height概念与举例转载 2021-07-23 11:08:46 · 52 阅读 · 0 评论 -
浮动float
一: 对块级元素设置float所有行内元素承认浮动块级元素的宽度,相邻行内元素仍与浮动元素元素一行,同时行内元素会因为浮动属性而与浮动方向的元素换位置,一般位置为容器的边界或另外一个浮动元素。与之相邻且与浮动方向相同的块级元素分行,浮动的块级元素脱离文档流因为脱离了文档流,与浮动方向相反的其他块级元素会占领原块级元素的位置二:对行内元素设置floatList item...原创 2021-07-22 22:34:19 · 136 阅读 · 6 评论 -
Background:linear-gradient()详解
一般渐变未设置角度,则默认为180deg(从上到下)设置了角度,则0deg为竖直向上,然后顺时针旋转上图!块渐变.aq1{ background-image: linear-gradient(45deg,#87f 60%,#f78 60%); } .aq2{ background-image: linear-gradient(90deg,#87f 60%,#f78 60%); } .aq3{ background原创 2021-07-21 22:46:09 · 30361 阅读 · 1 评论 -
flex布局
我直接抄,就是不写,诶,就是玩儿~前端布局神器display:flex转载 2021-07-21 16:39:57 · 41 阅读 · 0 评论 -
body背景问题
哎哎哎,从期末复习到放假三个月没碰网页了,颇为生疏。。。引入:我们知道body类似于div,是一个块级元素,从下图中我们也可以看出body是带有margin的我们也可以给body设置高度和宽度:这确实印证了body是一个块级元素。它具有块级元素的一般特性:未指定高度,则高度为刚好能容下内部元素未指定宽度,则宽度默认值为100%,与父元素的宽度相等默认overflow行为是显示溢出内容那么问题来了,为什么给body设置背景,却不受width和height限制呢?如下图正文:根据查原创 2021-07-21 14:03:06 · 103 阅读 · 0 评论 -
scale缩放方式
scale缩放方式1.辐射缩放代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-04-16 23:02:47 · 581 阅读 · 0 评论 -
有关给body设置overflow无效的问题
有关给body设置overflow无效的问题最近写代码时发现给body设置overflow:hidden无效。css: html { /* overflow: auto; */ } body { height: 50vh; overflow: hidden; /* overflow-y: auto; */ }</style>html:<body> <img src原创 2021-04-15 22:59:34 · 1614 阅读 · 0 评论 -
transform并未改变元素大小等问题
transform并未改变元素大小等问题链接: https://segmentfault.com/q/1010000002557576.transform是在现有的元素上浏览器做的渲染,不会改变位置和大小,实现的原理肯定不会是什么position、在z-index,是独立的功能代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e原创 2021-04-16 13:35:35 · 1000 阅读 · 1 评论 -
虽然body设置高度,但是背景色还是会铺满整个屏幕!
虽然body设置高度,但是背景色还是会铺满整个屏幕!查到了但懒得写了。。。。嘿嘿: https://blog.csdn.net/weixin_44430893/article/details/115074758.原创 2021-04-16 15:50:17 · 76 阅读 · 0 评论 -
填充小问题
填充小问题代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-04-17 18:47:16 · 62 阅读 · 0 评论 -
2021-04-17
1.不给img标签设置宽高,就按原大小显示。2.运用perspective一定要注意观察点的位置。原创 2021-04-17 00:23:41 · 56 阅读 · 0 评论 -
perspective和-translateZ()的投影原理
perspective和-translateZ()的投影原理题记:最近做视差滚动的时候差点没被这两个东西逼疯…正文:这是MDN上有关perspective的部分解释,想要更详细的解释课上网查询。其中说到了Z=0的平面,那么我们先介绍下3D坐标轴。X轴正方向:以屏幕的左上点为原点指向你的右手方向。Y轴正方向:以屏幕的左上点为原点指向下。Z轴正方向:垂直屏幕出来只想外面(不严谨理解:指向你的眼睛?)图:...原创 2021-04-17 02:08:43 · 677 阅读 · 1 评论 -
选择器的权重
首先看两篇文章:一:https://www.cnblogs.com/wangmeijian/p/4207433.html.二:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php总结:权重:通配选择器:0,0,0,0,0 ()元素和伪元素:0,0,0,0,1(例如div;p; :first-line)类选择器,伪类,属性选择器:0,0,0,1,0(例如:hover;.main;input[type=“text”])ID原创 2021-04-25 22:00:42 · 54 阅读 · 0 评论 -
宽度和高度问题总结---转再转
点击链接: https://www.cnblogs.com/mumu122GIS/p/9854345.html.原创 2021-04-28 00:11:23 · 50 阅读 · 0 评论 -
亟待解决问题
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-02 18:03:40 · 98 阅读 · 0 评论 -
background属性写与合写问题
css中如果要用background,建议所有属性写在一起。因为background的默认值可能会覆盖你所需要的值。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2021-04-19 18:55:08 · 450 阅读 · 0 评论 -
z-index与层叠上下文
定位元素的z-index不是auto的时候就会创建层叠上下文,然后成为下等人。。。转载 2021-04-25 22:40:28 · 205 阅读 · 0 评论