随笔分类 -  CSS

css的一些特效方法
CSS实现鼠标移上去按钮表面光影划过特效
摘要：初始状态 鼠标移上去时，光影表面掠过 代码如下 html部分 <header style="text-align: center;"> <h1 class="btn">标题</h1> </header> css部分 .btn { display: inline-block; width: 140px 阅读全文
posted @ 2022-02-10 11:02 七度丢失的梦 阅读(801) 评论(0) 推荐(0)
flex实现左中固定不变，右边自适应
摘要：html结构 css样式 .tab1-main { display: flex; justify-content: space-between; align-items: stretch; .tab1-tree { width: 300px; padding: 10px; } .tab1-line 阅读全文
posted @ 2021-05-11 14:17 七度丢失的梦 阅读(332) 评论(0) 推荐(0)
纯CSS画尖角符号
摘要：ui设计图大概长这样↓ 因为这是在表格里展示的对应的样式的，我直接写成了一个组件 下面是一个.vue文件，可以直接使用 <template> <div class="column-row"> <!--#409eff--> <div class="one">{{ column[0] || '' }}< 阅读全文
posted @ 2021-02-05 13:55 七度丢失的梦 阅读(513) 评论(0) 推荐(0)
CSS内部div设置上min-height或max-height滚动条就会出现在父元素上
摘要：<div id="body"> <div id="left"></div> <div id="right"></div> </div> 如上结构 如果#left的样式加上了min-height/max-height当里面内容超出对应高度时，滚动条会出现在#body上 阅读全文
posted @ 2020-11-02 14:50 七度丢失的梦 阅读(2142) 评论(0) 推荐(0)
CSS中position的定位
摘要：先来看一下css中position属性值在谷歌浏览器里可以有哪些值↓ 我们可以看到在F12开发者模式下，当我们准备写position属性时给我们提示了8个值 其中static就是position的默认值（当我们不写position这个属性时就是这个状态），另外如果使用默认值，在css中为元素设置的t 阅读全文
posted @ 2020-03-01 22:47 七度丢失的梦 阅读(351) 评论(0) 推荐(0)
解决flex布局space-between最后一行左对齐
摘要：首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100p 阅读全文
posted @ 2020-02-29 21:15 七度丢失的梦 阅读(6900) 评论(1) 推荐(1)
CSS 关键字 initial、inherit 和 unset
摘要：initial initial 关键字用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式。（IE 不支持该关键字） inherit 每一个 CSS 属性都有一个特性就是，这个属性必然是默认继承的 (inherited: Yes) 或者是默认不继承的 (inherited: no)其中之一 阅读全文
posted @ 2020-02-29 16:37 七度丢失的梦 阅读(368) 评论(0) 推荐(0)
word-spacing与white-space
摘要：1.word-spacing 不要被表面意思误导，word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格，则该属性无效。下面代码设定空格间隙是20px，也就是说空格现在占据的宽度是原有的空格宽度+20px的宽度： <p>这 空 格 ，会一样吗？</p> <style> p { wo 阅读全文
posted @ 2020-02-29 15:54 七度丢失的梦 阅读(495) 评论(0) 推荐(0)
元素隐藏方法总结：
摘要：如果希望元素不可见、不占据空间、资源会加载、DOM 可访问：display: none； 如果希望元素不可见、不能点击、但占据空间、资源会加载，可以使用：visibility: hidden； 如果希望元素不可见、不占据空间、显隐时可以又transition淡入淡出效果： div{ position 阅读全文
posted @ 2020-02-27 01:58 七度丢失的梦 阅读(171) 评论(0) 推荐(0)
display: none与visibility: hidden的区别
摘要：display: none的元素不占据任何空间，visibility: hidden的元素空间保留； display: none会影响css3的transition过渡效果，visibility: hidden不会； display: none隐藏产生重绘 ( repaint ) 和回流 ( rel 阅读全文
posted @ 2020-02-27 01:54 七度丢失的梦 阅读(132) 评论(0) 推荐(0)
一个margin就可以让块状元素响应居中，很实用
摘要：之前总结过水平居中的很多方法，但今天在《css世界》这本书里看到margin的一个特性，一行代码就搞定很实用，分享一下 margin: auto能在块级元素设定宽高之后自动填充剩余宽高。margin: auto自动填充触发的前提条件是元素在对应的水平或垂直方向具有自动填充特性，显然默认情况下块级元素 阅读全文
posted @ 2020-02-27 01:04 七度丢失的梦 阅读(432) 评论(0) 推荐(0)
Flex布局如何实现最后一个元素右对齐，或者第一个元素左对齐
摘要：先来看看一个例子 在一个div我们把四个按钮全部放到右边去了，看下效果↓ 这个时候我们想把第一个按钮左对齐，其他保持不变 这时候我们来个第一个按钮样式上加上 ：margin-right: auto; 再看页面效果↓ 同理如果你是左对齐，让最后一个右对齐，就给最后一个按钮样式加上：margin-lef 阅读全文
posted @ 2020-02-11 17:18 七度丢失的梦 阅读(9088) 评论(1) 推荐(1)
在页面布局中，怎么实现水平居中和垂直居中？
摘要：先给出DOM结构 <div class="box"><div class="box-center"> </div> </div> 一：水平居中 若是行内元素，给其父元素设置text-align:center即可实现行内元素水平居中 若是块级元素，该元素设置margin:0 auto即可（元素需要定宽 阅读全文
posted @ 2019-11-11 15:28 七度丢失的梦 阅读(1397) 评论(0) 推荐(0)
在页面布局中，CSS如何实现左侧宽度固定，右侧宽度自适应的布局？
摘要：首先给出DOM结构 <divclass="box"> <divclass="box-left"></div> <divclass="box-right"></div></div> 1.利用float + margin实现 .box { height: 200px; } .box > div { he 阅读全文
posted @ 2019-11-11 14:37 七度丢失的梦 阅读(305) 评论(0) 推荐(0)
CSS 去掉a、button、input点击出现蓝色边框
摘要：button:focus {outline:none;} 阅读全文
posted @ 2019-06-28 11:06 七度丢失的梦 阅读(1137) 评论(0) 推荐(0)
SCSS的基本操作
摘要：Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。 特性概览 CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、 阅读全文
posted @ 2019-05-09 10:44 七度丢失的梦 阅读(491) 评论(0) 推荐(0)