css
关注
分享
扫一扫
文章平均质量分 84
css相关
木木林_
这个作者很懒，什么都没留下…
展开
-
关于文本的换行、溢出(单行溢出、多行溢出)与样式
1.前言1.在日常开发过程中我一直对文本的处理都是模棱两可，因为会认为就是样式问题肯定简单，不用记，用到了就查，可是今天竟然一个小小的问题让我困惑了很久，所以下定决心把它拿下。2.分享疑惑1.让我疑惑了一下的是这个 到底文本默认是换行还是不换行呢？2.平时写文本限制宽度的情况都是换行的,为什么还疑惑呢？给大家看一下<div class="box1"> <p class="p1"> 我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我原创 2021-02-03 00:03:03 · 2554 阅读 · 0 评论 -
css实现滚动时选中区域字体颜色加深
在封装日期选择器时，需要选中时字体颜色加深，先看一下实现后的效果可以看到加深的不是整个文字，而是中间那片区域今天聊的重点不在选择器的封装，主要看这个样式效果，想了解此组件的实现思路可以看之前的文章日期选择器实现思路：1. 首先它是进入所在区域颜色就会加深，不是整个字体，所以我们就不能从选中是改变文字样式着手了，看到是区域首先想到的就是蒙层了2. 可是蒙层实现中间颜色变浅容易，就加蒙层+透明+定位就好，那如何加蒙层中间颜色反而变深呢，如果纠结从选中部分解决颜色加深的效果将会陷入深思。。。3. .原创 2020-12-22 18:03:30 · 1629 阅读 · 3 评论 -
最常用的1px解决方案
为什么会有1px问题大致来说，首先要了解以下概念1.主屏幕分辨率比如iphone4 940*640像素，就是横向个640像素，纵向个960像素，一个像素可以看成一个小方块2.逻辑像素和物理像素比如上面所说的主屏幕分辨率就是用的物理像素，逻辑像素就是程序认为屏幕上横纵分别有多少个像素点。3.屏幕倍率比如iphone4来说 横向逻辑像素320个，横向物理像素640个，那么这就是一个二倍屏，屏幕倍率(devicePixelRatio)就是2,也就是（逻辑像素于物理像素的比）...原创 2020-11-12 17:22:03 · 805 阅读 · 1 评论 -
关于line-height设置的问题
在平时做项目的时候，因为盒子高度使用的百分比，就想尝试行高也设置为100%，来实现这个垂直居中，但是效果并不会想我们想象的这样，今天就来重新认识一下行高line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离行高也是可以撑开容器高度的，当元素没有定义 height 属性时，元素表现的高度是由 line-height 决定的我们一般常常用来把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中经过简单的介绍，我们来..原创 2020-09-08 16:57:59 · 2104 阅读 · 0 评论 -
css的权重和层叠关系
在刚开始学习前端的时候，写样式时总是时不时的会遇到样式失效，可能操作了一些什么就有可以显示。这些现象可能都是css优先级的问题我们先大致列举一下css的权重1、 !import 规则的权重最大2、行内样式，权重会加10002、id选择器，权重会加1004、类选择器、属性选择器、伪类选择器，权重会加105、标签选择器，权重会加11、对于相同的样式属性 组合起来权值大的优先，如果权重一样，那么会根据先后顺序，后面的覆盖前面的2、对于不同的样式属性不管权重、先后顺序 总是会合并在一起 (.原创 2020-09-07 13:07:42 · 351 阅读 · 0 评论 -
css 父子盒子的width 问题
平时在写css的时候，并没有刻意关注盒子的width属性，有时候要加，有时候不加，有时候默认占满父盒子，有时候却又没有宽度。今来看看到底有哪些情况首先width它不是一个可以继承的属性，之所以可以和父盒子宽度一样，应该还是因为块级元素默认独占一行的缘故会撑满父盒子的宽度知道它是因为块级元素的特性撑满父元素，很多现象就可以解释了下面我们通过代码来一探究竟//dom结构<body> <div class="box"> <div class="son"&g.原创 2020-08-31 22:40:48 · 2863 阅读 · 0 评论 -
css实现自适应的两边无间隙的三栏布局（自动换行）
我们先看一下下面的布局要是实现自动换行排列，我们首先想到float加margin-right来实现，那我们来实现一下比如一个box为宽1000px 每个item宽320px margin-right：20px 我们会发现效果如下 会自动换行 因为最右边超出了20px的margin值-这时我们可以给item的外层加一个div 设置margin-right：-20px； 使得这个盒子的宽度增加20px；来承载item 代码如下<body> <div class="box.原创 2020-08-29 13:21:11 · 1714 阅读 · 0 评论