css

css盒模型 你需要先了解CSS盒模型 CSS盒模型中 width 与 height 的计算规则： 在CSS中，你设置一个元素的width与height只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding，绘制到屏幕上时的盒子宽度和高度会加上设置的边框(border)和…

将整个网页全局变色有三种方法，分别是：css直接设置，添加svg滤镜，通过js遍历所有标签更改颜色。 1、css直接设置 直接编辑样式，然后在需要应用的地方设置class .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(…

一、文字的水平垂直居中 text-align: center; line-height: 单前元素高度; （视频教程推荐：css视频教程） 二、元素的水平垂直居中 1、使用绝对定位 立即学习“前端免费学习笔记（深入）”； 2、使用绝对定位+ calc() 3、使用绝对定位+transform 4、使…

相信很多小伙伴做过的项目里面都有轮播图这么一个需求，有的小伙伴可能会自己造轮子，有的小伙伴可能会直接Google轮播图插件 但是如果不使用javascript，能不能实现轮播图的效果呢？可能小伙伴们并没有考虑过这个问题，那么下面我们就一起来用css实现一个简易的轮播图 基本需求分析 由于css无法做…

display: none 1、DOM结构: 浏览器不会渲染display:none 的元素, 并且不占据页面空间 2、事件监听: 无法对元素进行事件监听 3、继承: 不会被子元素继承(子元素设置display: block 不会显示) 4、改动: 改动属性值会引起页面的重排和重绘 立即学习“前端免…

在实际项目中，总会遇到响应式布局的问题，如果未曾使用一些响应式UI框架的话，那么一般就会用媒体查询来实现响应式布局，由于遇到的实在太频繁了，所以我觉得还是有必要稍微进行一下总结的。 首先我们需要了解到的一点是，使用媒体查询这种方式，当重置浏览器大小的过程中，页面就会根据浏览器的宽度和高度重新渲染页面…

css的四种引入方式分别是：行内样式、内嵌样式、链接样式和导入样式。 1、行内样式 最直接最简单的一种，直接对HTML标签使用，例如： 缺点：HTML页面不纯净，文件体积大，不利于蜘蛛爬行，后期维护不方便。 （视频教程推荐：css视频教程） 立即学习“前端免费学习笔记（深入）”； 2、内嵌样式 内嵌…

CSS 中颜色有多种不同的应用方式；预定义的颜色名称、rgb、rgba 以及使用十六进制颜色值。下面的 CSS 展示的是使用预定义的颜色名称，背景色将设置为 ‘purple（紫色）’。 background-color: Purple; CSS 中有很多预定义的颜色，可以向上…

首先我们来看一下实现效果： css代码： *{ margin: 0; padding: 0; text-decoration: none; list-style: none; } .foot { width: 100%; height: 68px; background: #FFFFFF; posi…

目的： 生成如下图所示虚线 实现方式 实现方式，有的人用多个span生成，一个小圆点就是一个span，这样是可以，但是整个状态改变比较麻烦，有什么方式生成可以控制的虚线呢？ 立即学习“前端免费学习笔记（深入）”； （视频教程推荐：css视频教程） 生成dashed 生成横向线 生成dashed虚线，…