HTML/CSS
文章平均质量分 77
HTML和CSS相关知识点及应用
你脸上有BUG
一只头秃程序媛
展开
-
如何解决input输入时存在浏览器缓存问题?
浏览器有时会在你输入表单过后缓存你的输入,有时候能提供方便。但是在某些新建或新页面情况下出现历史的输入信息,用户体验很差。原创 2024-06-19 15:40:00 · 309 阅读 · 0 评论 -
CSS-counter 计数器详细教程+使用场景示例
计数器是一种特殊的数字跟踪器,通常用于为CSS列表项自动编号,早期无序列表ul和有序列表ol元素定义时,会自动添加`counter()`计数器,列表也会自动递增序号,属性都会取默认值。CSS计数器只能跟content属性在一起的时候才有作用,而content属性专门用在before/after伪元素上。于是,就有了,“计数器↔伪元素↔content属性”的铁三角关系。原创 2022-11-23 17:50:07 · 2859 阅读 · 0 评论 -
在静态页面中使用Scss(windows)
平时在脚手架配置中勾选sass或者npm安装,就可以在项目中使用sass。但如果是在一个静态页面中该如何使用呢?一、Ruby安装安装sass前必须安装ruby环境,因为Sass是用Ruby语言写的。前往Ruby官网(https://rubyinstaller.org/downloads/)按默认配置下一步,即可在开始菜单找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板二、运行命令,安装sass1.输入gem install sass,如图安装成功2.检查版原创 2021-10-18 11:26:29 · 1020 阅读 · 0 评论 -
CSS3——@keyframe动画的基本用法,常见错误及解决方案
文章目录一、基本用法1.关键帧@keyframes2.示例二、常见错误及解决方案(1)@keyframes 不能实现突变的状态变化display替代方案1.占据空间:visiblity2.不想占据空间:绝对定位+visiblity3.消失前占据空间但是消失后不占据空间:timeout和visiblity(2)@keyframes会增添/覆盖属性一、基本用法CSS3 动画动画:指定一组或多组成套的动作,按照指定时间,指定的方式自动完成。h5中动画的运用效率要高于使用js来体现动画效果,因为动画是渲染式原创 2021-08-04 12:27:54 · 30878 阅读 · 1 评论 -
CSS / CSS3(新增)选择器及优先级原则
一、CSS基本选择器1.元素(标签)选择器2.类选择器3.ID选择器二、CSS3新增选择器原创 2021-06-29 14:26:59 · 831 阅读 · 0 评论 -
css3新增特性集合贴
1、CSS3选择器2、CSS3边框(Borders)3、CSS3背景4、CSS3渐变5、CSS3文本效果6、CSS3字体7、CSS3转换和变形1)2D转换方法2)3D转换属性8、CSS3过度9、CSS3动画10、CSS3多列11、CSS3盒模型12、CSS3伸缩布局盒模型(弹性盒子)13、CSS3多媒体查询...原创 2021-06-29 14:21:17 · 61 阅读 · 0 评论 -
CSS之布局方式(内/外部显示及inline-block显示类型)附<行内块空白间隙解决方案>
文章目录一、布局方式1. 外部显示类型a.块级盒子/元素b.行内盒子/元素2. 内部显示类型2.1 flex 流式布局二、行内块元素inline-block 显示类型一、布局方式tip:以下示例代码为方便观察已在css中加上边框布局方式分为外部显示类型和内部显示类型两种:1. 外部显示类型浏览器默认的布局方式,控制的是相邻盒子之间的布局,分为块级盒子和行内盒子两种:a.块级盒子/元素比如 <div>,<h1>..<h6> ,<p> 等,单独成行,原创 2021-06-10 11:00:20 · 807 阅读 · 0 评论 -
CSS之盒子的边距塌陷(兄弟、父子)与解决方案
一、边距塌陷CSS 盒子模型中,如果给两个盒子同时设置外边距,那么它们距离可能并不是外边距之和,称为边距塌陷。导致边距塌陷的原因是外边距,有以下四种情况:case1:如果都是正数,则取最大值,case 2:如果相同,则取其中之一case 3:如果有正有负,则取最大的正数加上最小的负数之和case4:如果都是负数,则取最小值。1.相邻盒子之间相邻的盒子之间的边距一般都会有塌陷的情况,比如一个盒子的下边距和下面盒子的上边距:示例1:#block1 { margin-bottom:原创 2021-06-02 17:39:24 · 3928 阅读 · 3 评论 -
CSS盒子的三种类型(border-box、content-box)
文章目录一、CSS盒子1.1 盒子的四个区域二、CSS盒子的类型1.content-box 内容盒子content-box盒子的宽高计算公式2.border-box 边框盒子3.特殊的盒子:替换元素一、CSS盒子一个盒子通常包括四个区域,让我们先写一个设置好width和height属性的div。1示例1:<style>.box { width: 100px; height: 200px;}</style><div class = "box"&原创 2021-06-01 20:27:34 · 30782 阅读 · 2 评论 -
HTML基础概念——head头部,及标签(文本、图像类型)
本文非新手向教程,不讲解具体标签,只记录部分重点内容……文章目录一、HTML示例代码二、如何书写一个标准的HTML5.0 网页三、HTML:HyperText Markup Language 超文本标记语言四、PC端常用浏览器/概念4.1浏览器内核4.2软件项目开发二个不同体系五、Head头部六、标签6.1 标签类型6.2 布局标签七、文本类型标签 (h1重要文字)八、 图像标签8.1 标签属性:8.2 图像类型8.3 图像路径一、HTML示例代码<!DOCTYPE html><原创 2021-06-01 10:32:03 · 1357 阅读 · 2 评论 -
十分钟轻松搞懂CSS的五大定位方式!(建议收藏)
一、CSS之position定位方式position 属性规定元素的定位类型,有以下五种:staticrelativeabsolute(脱离文档流)fixed(脱离文档流)sticky(新属性)两种脱离正常文档流的定位方法,会把元素的宽高设置成内容的宽高常用 top/bottom/left/right 属性进行偏移1.static静态定位,是position的默认值,可不设置。默认布局方式,从上到下,从左到右,正常文档流。position: static;2.relative原创 2021-05-31 18:52:29 · 2156 阅读 · 0 评论 -
HTML/CSS水平垂直居中方法(待补充)
一、绝对定位 + margin适用情况:明确盒子宽度与高度让明确宽高的盒子水平垂直居中于窗口:①position: absolute; 元素会变成块元素,脱离普通文档流②top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子。因此这个元素会填满它相对父元素(body标签、设置了position: relative; 样式的容器)的内部空间。③设置了宽高:浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算原创 2021-01-30 16:24:04 · 81 阅读 · 0 评论