CSS
css
laluneX
这个作者很懒,什么都没留下…
展开
-
css的变量
一、变量的声明:root { --color: red; /*变量的声明,使用 -- */ --background-color: black; }二、变量的使用h2 { color: var(--color); /*变量的使用*/ background-color: var(--backgrou...原创 2020-04-29 10:05:10 · 95 阅读 · 0 评论 -
SCSS的具体详解和与less的区别
一、SCSS的四种删除格式与SCSS与Sass的区别可以参考这位老哥的简单来说SCSS更简单一点,没有什么奇怪的语法与奇怪的缩进,与less相差不大,利于使用与学习(推荐)Sass有更加严格的语法(反正我看起来怪怪的)不过SCSS与Sass是同宗同族的,不过Sass是老大哥二、注释与less相同关于/**/多行注释,会在原生css文件里面保留注释,但在压缩时注释就会消失/*...原创 2020-04-10 10:28:46 · 7607 阅读 · 0 评论 -
width为auto与100%的区别
我们平常在使用的时候width为auto与100%好像没有什么区别,但这里有一点点问题因为盒模型的box-sizing默认为content-box,而导致了当width为100%的时候,盒子会被撑大,继而超过父盒子的大小,如下例HTML <div class="container"> <div class="box"> ...原创 2020-04-07 15:18:03 · 643 阅读 · 0 评论 -
CSS的盒垂直水平居中
盒子的代码<div class="container"> <div class="box"> </div></div>一、垂直水平居中第一种:.container{ width: 400px; height: 400px; margin: 0 auto; background-color: #ccc; position...原创 2020-04-07 10:26:33 · 100 阅读 · 0 评论 -
css里面的网格布局
那么首先来说说一下CSS 中 Grid 网格布局与 Grid 栅格系统的关系CSS跟Grid布局没有半毛钱关系,Grid只不过是人们在遵循CSS规范的框架内摸索出来的一个最佳实践,你完全可以不鸟栅格布局,用CSS裸~奔。上面似乎等于没说,对不对?CSS是石头,Grid是砖头,页面是一扇墙,整个站点是房子,石头就可以砌墙建房,砖头不过是优化了的石头,砖头跟石头看起来那么理所当然,实际并非必须。...原创 2020-04-06 11:28:39 · 361 阅读 · 0 评论 -
css媒体查询的具体详解和说明
一、在内部样式的style里面的media属性<style type="text/css" media="screen,print"> /*这里是对应的媒体是屏幕和打印机*/ #container{ width: 100px; height: 200px; }</style>注意:如果在style里面没有说明media属...原创 2020-04-02 16:32:04 · 422 阅读 · 0 评论 -
less详解和说明
一、注释以 /*/包裹的注释会被编译到css文件里面以//开头的注释不会编译到css里面二、less里面的变量用@来声明变量注意:1、作为普通属性值来使用:@hello(变量名):yellow(变量值)2、作为选择器和属性名:@{selector}3、作为URL:@url4、变量的延迟加载less文件:@wnum:60%; /*定义普通变量*/@hig...原创 2020-04-01 19:26:31 · 852 阅读 · 0 评论 -
CSS3的新增内容
一、选择器a)、属性选择器属性选择器说明举例E[attr]查找存在 attr属性的E元素div[class]E[attr=val]查找存在 attr属性且值完全为val的E元素div[class=mydemo]E[attr*=val]查找存在 attr属性且值包含为val的E元素div[class*=mydemo]E[attr^=val]查...原创 2020-03-30 17:32:52 · 300 阅读 · 0 评论 -
更改Chrome的缩放会影响CSS渲染
举个例子<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ ...原创 2020-03-07 11:11:14 · 340 阅读 · 0 评论 -
offset、client、scroll及jQuery的尺寸和位置问题
1、offsetelement.offsetLeft:是element到带有定位的父元素左边的距离(如果父元素没有定位就以body为标准)element.offsetTop:是element到带有定位的父元素上边的距离(如果父元素没有定位就以body为标准)element.offsetWidth:是element宽度(包含padding、border,不包含margin)element...原创 2020-03-05 10:14:43 · 197 阅读 · 0 评论 -
实现网页图片的放大镜效果
实现某东上面的商品放大镜效果实现代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css">...原创 2020-03-03 12:58:39 · 1963 阅读 · 1 评论 -
CSS3动画变化——扑克牌效果
实现扑克牌翻牌效果a)确定3D变换,及其他相关元素<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"...原创 2020-02-27 11:50:40 · 902 阅读 · 0 评论 -
弃用的 HTML 的Table属性---border、align
虽然HTML里面的border、align属性已被弃用,但是还是可以正常使用并渲染出效果的,可是在idea里面老是报出警告只要需要使用margin、border属性就可以达到同样的效果并且没有警告...原创 2020-02-26 17:16:02 · 5930 阅读 · 0 评论