css
css
阿贵的代码生活
这个作者很懒,什么都没留下…
展开
-
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 · 266 阅读 · 0 评论 -
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 · 740 阅读 · 0 评论 -
rem布局
rem布局 学习rem 先学em 1.em 是指父元素的字体大小 2.rem 是指html的字体大小 3.rem 布局是用 媒体查询来改变(js改变)HTML的字体大小来实现自适应 rem 的优点就是可以通过修改html里面的文字大小来改变页面中元素的控制大小rem其实不是布局 是单位 rem适配方案原理 (动态更改html的字体大小)布局方式有两种rem+媒体查询 js+remrem+媒体查询 (动态设置方法...原创 2022-04-30 22:49:31 · 215 阅读 · 0 评论 -
flex布局
目录display: flex; 将元素改为flex布局 记住一定是给父元素首先我们来了解一下flex布局原创 2022-04-16 21:59:43 · 95 阅读 · 0 评论 -
css 文字溢出为省略号
单行溢出多行行溢出body标签原创 2022-03-30 14:53:55 · 49 阅读 · 0 评论 -
图片底部的空白解决
img默认是底线对其方法1.只要改变为 vertical-align: middle中部;2.img为快级元素原创 2022-03-30 14:09:29 · 72 阅读 · 0 评论 -
css 的书写顺序
css 的书写顺序原创 2022-03-30 13:59:25 · 1193 阅读 · 0 评论 -
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 · 456 阅读 · 0 评论 -
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 · 2156 阅读 · 0 评论