- 博客(10)
- 收藏
- 关注
RSS订阅原创 vw和vh布局
vw和vh是相对于当前视口 100%是相对于父亲 vw和vh 理解 他是把视口分为100份 1vw = 1份 和rem 的区别就是 不用使用 媒体查询 视口是多大 100vw 就是多大 div { width: 100vw; height: 100vh; } 宽度就是浏览器的大小 vw和vh 布局要了解 50px 是都少 vw 假如视口是375 那么100vw就是375px 1vw就是3.75px 那50px*50px就是 50 / 3.75 = 13.3333...
2022-05-02 18:05:47
427
原创 less基础
less基础 less可以帮助我们计算rem布局的值 css的扩展语音(想了解的可以去问百度有官网的) 缺点 要编译成css代码才能被html读取 用(vocode less插件)来编译 编译方法(安装好插件 在less页面保存就会自动生成) less变量 (不用重复的改 只要改变量就行) 写法 @color: pink; @font14: 14px; body { back...
2022-04-30 22:58:05
374
原创 css3媒体查询
媒体查询 (Media Query) 是css3的新语法 1.使用 @media 查询，可以针对不同的媒体类型定义不同的样式 2.@media 可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中，页面也会根据浏览器的宽高重新渲染页面 4.目前手机平板多在用媒体查询 语法规范 @media mediatype and|not|only (media feature) { css-code...
2022-04-30 22:53:15
841
原创 rem布局
rem布局 学习rem 先学em 1.em 是指父元素的字体大小 2.rem 是指html的字体大小 3.rem 布局是用 媒体查询来改变(js改变)HTML的字体大小来实现自适应 rem 的优点就是可以通过修改html里面的文字大小来改变页面中元素的控制大小 rem其实不是布局 是单位 rem适配方案原理 (动态更改html的字体大小) 布局方式有两种 rem+媒体查询 js+rem rem+媒体查询 (动态设置方法...
2022-04-30 22:49:31
324
原创 css 的垂直居中和 图片居中
方法一 利用定位(常用方法,比较推荐) 方法二 利用margin:auto 方法三 利用display:table-cell 方法四 利用display:flex 设置垂直水平都居中 方法五 计算父盒子与子盒子之间的空间距离 道理如方法一 方法六 利用 transform 页面布局如下 img居中 img { display: table-cell; text-align: center; vertical-ali...
2022-03-30 13:54:25
578
原创 css 可以继承的属性和不可继承的属性
首先我们来看一下css优先级： !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性。 常用的css不可继承的属性 display元素转换、 text-decoration文字装饰、 text-shadow文本阴影、 white-space空格换行、 width宽、height高、margin外边距、border边框、padding内边距 background背景 float浮动、clear不允许
2022-03-30 12:44:50
2314
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人