![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 65
平平无奇小码农qwq
这个作者很懒,什么都没留下…
展开
-
css之clear属性,both left right详解,解决父元素高度塌陷
目录现象1、 clear 属性2、both left right 区别举例示例2.1 left2.2 right2.3 both3、借助父元素的::after清除浮动现象我们常说用clear: both来清除浮动,那么原理是什么呢?首先我们来看一个例子:<style> .fa { width: 200px; border: 1px solid red; } .son { width: 100px; height: 100px; floa原创 2022-03-14 15:49:27 · 2478 阅读 · 1 评论 -
css之 vertical-align用法详解
vertical-align 属性设置元素的垂直对齐方式。css中的vertical-align 属性只能用于 行内元素 和 置换元素(例如 图像和表单输入框) ,此属性不继承。接下来我们用例子去分析这些值的意思及产生的效果:首先我们先看一张图,文字的顶线、中线、基线,基线是字母x的下边缘默认例子<style> * { margin: 0; padding: 0; } div { width: 200px; line-height: 60原创 2022-03-11 18:29:26 · 27686 阅读 · 6 评论 -
css之 删除input标签type为number时末尾的箭头
当input输入框的类型为number时,输入框的最右边会有小箭头:去掉小箭头:<input type="number" class="my-input" />.my-input::-webkit-outer-spin-button,.my-input::-webkit-inner-spin-button { -webkit-appearance: none; }加上上述样式后的输入框没有了右侧的小箭头:...原创 2022-03-04 15:37:24 · 877 阅读 · 2 评论 -
css之 修改光标颜色
属性:caret-colorinput { width: 200px; height: 30px; font-size: 20px; outline: none; /* 修改光标颜色 */ caret-color: #ffd476;}结果:原创 2022-03-04 15:22:21 · 633 阅读 · 1 评论 -
css之 img 图片底部有间距原因及解决方法
目录前言现象原因解决方法1、给img(图片)设置display: block;2、给img(图片)设置vertical-align: bottom;3、修改line-height值(div的line-height)4、div的font-size=0前言在开发中,我们经常会遇到图片底部多出几个px间距的问题 ,这是什么原因,我们又该如何解决呢?现象我们可以看到,图片和div之间会有空隙,并不是紧贴着div底部。原因 因为图片是行内元素,默认的图片对齐方式为vertical-align:bas原创 2022-03-04 14:32:31 · 6431 阅读 · 1 评论 -
CSS 之 line-height 实现单行文字垂直居中的原理
基础知识line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。我们暂且称之为顶部距离和底部距离,就是上图中的蓝色区域。也就是说: line-height = 顶部距离 + 内容高度(顶线和底线之间的距离) + 底部距离;顶部距离 = 底部距离;示例一: 当line-height 等于 height 时,文字垂直居中文本默认大小16px。结果:文字垂直居中。顶部距离 = 底部距离 = (line-heig原创 2022-03-04 11:32:06 · 1681 阅读 · 2 评论 -
input输入框自动填充后默认样式修改
最近在做登录页时发现,当我们的账号名和密码被浏览器记住,自动填充以后,原本我们写好的input输入框的样式变了,特此记录:这是设计的样子:当账号密码自动填充以后:字体颜色变了,背景色也变了,这时候我们就得修改:input { background-color: #595959; }input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 50000s ea.原创 2021-12-07 18:02:58 · 2783 阅读 · 1 评论 -
BFC块格式化上下文
BFC是什么根据W3C的标准,在页面元素都有一个隐含的属性叫Block Formatting Context。简称BFC(Block Formatting Context,块格式化上下文),该属性可以设置打开或关闭,默认关闭。详情定义查看:MDN解释定义看起来有点晦涩难懂,那么到底什么是BFC呢?具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。怎样触发 BFC只要元素满足下面任一条件即可触发 BFC 特原创 2021-09-13 19:10:01 · 123 阅读 · 0 评论 -
CSS之伪元素 ::before
这里写目录标题1、 伪元素不设置display:block,也不设置宽高2、 伪元素设置display:block,不设置宽高2、 伪元素设置display:block,设置宽高1、 伪元素不设置display:block,也不设置宽高<style> .div6 { width: 200px; height: 100px; margin: 100px; background-color: yellow; } .d原创 2021-01-22 11:54:28 · 7914 阅读 · 0 评论 -
overflow与定位
什么是绝对定位: 设置为绝对定位的元素框从文档流完全删除。绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。例子: 有两个父子关系的div元素<style> * { margin: 0; padding: 0; } .box { position: relative; margin: 100px; width: 200px;原创 2021-02-19 17:12:08 · 2570 阅读 · 0 评论 -
绝对定位与inset
实现一种这样的布局:屏幕中间有一块滚动区域,滚动滚动条时,里面的猫猫图片会随之滚动。滚动条滚动一点时:继续滚动滚动条,把猫猫图片展示在中间区域:代码:<style> body { background-color: antiquewhite; } .contain { position: absolute; inset: 100px; overflow: auto; backgr原创 2021-02-21 16:56:25 · 3406 阅读 · 0 评论