随笔分类 -  html/css

html/css/css高级
摘要:把整个页面的html 的滚动条的宽改成0px就行了 html::-webkit-scrollbar { width: 0px; } 阅读全文
posted @ 2023-03-06 11:02 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:2D转换 定义:2D变换,是在一个平面对元素进行的操作。 可以对元素进行水平或者垂直位移、旋转或者拉伸。确定坐标系默认状态下,x轴是水平的,向右为正。默认状态下,y轴是垂直的,向下为正。 变形属性:transform属性值:transform:none;默认值transform:translate( 阅读全文
posted @ 2023-01-30 14:04 罗砂 阅读(26) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2023-01-30 11:33 罗砂 阅读(10) 评论(0) 推荐(0) 编辑
摘要:骰子一到六 决定主轴的排列方式 display:flex; 给父级加让父级变为容器 flex-direction:row;(默认值) 向左对齐(默认) flex-direction:row-reverse; 向右对齐 flex-direction:column; 垂直排列 flex-directio 阅读全文
posted @ 2022-09-16 17:30 罗砂 阅读(153) 评论(0) 推荐(0) 编辑
摘要:像素: 屏幕是由一个一个发光的小点构成,这一个个的小点就是像素 分辨率,1920 x 1080 说的就是屏幕中小点的数量 在前端开发中像素要分成两种情况讨论:css像素 和 物理像素 物理像素,上述所说的小点点就属于物理像素 CSS像素,编写网页时,我们所用像素都是css像素 浏览器在显示网页时,需 阅读全文
posted @ 2022-03-29 22:27 罗砂 阅读(86) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 21:20 罗砂 阅读(69) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 16:01 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 15:02 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:网页中字体大小最小是12px,不能设置一个比12像素还小的字体 如果我们设置了一个小于12px的字体,则字体自动设置为12 0.13333333vw = 1px 5.33333vw = 40px 阅读全文
posted @ 2022-03-29 11:02 罗砂 阅读(54) 评论(0) 推荐(0) 编辑
摘要:vw是由视口的宽度计算的 不同的设备完美视口的大小是不一样的 iPhone6 375 iPhone6plus 414 由于不同设备视口和像素比不同,所以同样的375像素在不同的设备下意义是不一样的. 比如在iPhone6中 375就是全屏,而到了 plus 中375就会缺一块 所以在移动端开发时,就 阅读全文
posted @ 2022-03-29 10:42 罗砂 阅读(933) 评论(0) 推荐(0) 编辑
摘要:移动端默认的视口大小是980px(css像素), 默认情况下,移动端的像素比就是 980/移动端宽度 (980/750) 如果我们直接在网页中编写移动端代码,这样在9980的视口下,像素比是非常不好 导致网页中的内容非常非常的小 编写移动页面时,必须要确保有一个比较合理的像素比: lcss像素 对应 阅读全文
posted @ 2022-03-29 10:09 罗砂 阅读(93) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-29 09:21 罗砂 阅读(29) 评论(0) 推荐(0) 编辑
摘要:/* 设置自动换行 */ flex-wrap: wrap; 原图: 效果: /* 简写属性 */ flex-flow: row wrap; /* 居中排列 */ justify-content: center; /* 元素左靠*/ justify-content: flex-start; /* 元素 阅读全文
posted @ 2022-03-28 22:59 罗砂 阅读(26) 评论(0) 推荐(0) 编辑
摘要:flex(弹性盒) 比浮动方便 是css中有一种布局手段,它主要用来替代浮动来完成页面的布局 flex可以使元素具有弹性,让元素可以跟随页面的大小的而改变而改变 弹性容器 要使用弹性盒,必须先将一个元素设置为弹性容器 我们通过 display 来设置弹性容器 display:flex 设置为块级弹性 阅读全文
posted @ 2022-03-28 13:44 罗砂 阅读(240) 评论(0) 推荐(0) 编辑
摘要:// 混合函数,在混合函数中可以直接设置变量 // .p5(@w:100px,@h:100px,@bg-color:red ){ .p5(@w,@h,@bg-color ){ width: @w; height: @h; background-color: @bg-color; } // 必须得按照 阅读全文
posted @ 2022-03-28 10:04 罗砂 阅读(41) 评论(0) 推荐(0) 编辑
摘要:.box1 { width: 300px; height: 100px; background-color: chartreuse; .box2 { width: 100px; height: 100px; background-color: aqua; color: rgb(226, 55, 55 阅读全文
posted @ 2022-03-28 09:46 罗砂 阅读(227) 评论(0) 推荐(0) 编辑
摘要:.box1 { width: 300px; height: 100px; background-color: chartreuse; .box2 { width: 100px; height: 100px; background-color: aqua; color: rgb(226, 55, 55 阅读全文
posted @ 2022-03-28 09:01 罗砂 阅读(50) 评论(0) 推荐(0) 编辑
摘要:less是一门预处理语言 less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式 在less中添加许多的特性,像对变量的的支持、对mixin的支持…… …… less的语法大体上和css语法一致,但是less中增添了许多对CSS的扩展, 所以浏览器无法直接执行less代码,要执 阅读全文
posted @ 2022-03-27 22:59 罗砂 阅读(58) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content 阅读全文
posted @ 2022-03-27 19:45 罗砂 阅读(22) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-e 阅读全文
posted @ 2022-03-27 13:35 罗砂 阅读(44) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示