![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 67
woowen!
这个作者很懒,什么都没留下…
展开
-
【css】深入解析CSS (5)定位和层叠上下文
跟固定或者绝对定位不一样,不能用top、right、bottom和left改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。可以用top或者bottom,但它们不能一起用(bottom会被忽略)。跟固定元素一样,属性top、right、bottom和left决定了元素的边缘在包含块里的位置。定位一个元素时,不要求指定四个方向的值,可以只指定需要的方向值,然后用width和/或height来决定它的大小,也可以让元素本身来决定大小。这些属性的值决定了固定定位的元素与浏览器视口边缘的距离。原创 2022-12-27 16:36:52 · 191 阅读 · 0 评论 -
深入解析CSS (3)Flexbox
Flexbox,全称弹性盒子布局给元素添加display: flex,该元素变成了一个(flex container),它的直接子元素变成了弹性子元素默认是在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度,但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等,该高度由它们的内容决定。flex属性控制弹性子元素在主轴方向上的大小(在这里指的元素的宽度)flex属性是三个不同大小属性的简写:flex-grow、flex-shrink和flex-basis。原创 2022-12-19 17:35:50 · 441 阅读 · 0 评论 -
深入解析CSS (2)盒模型
用百分比指定高度存在问题。百分比参考的是元素容器块的大小,但是容器的高度通常是由子元素的高度决定的。这样会造成死循环,浏览器处理不了,因此它会忽略这个声明。原创 2022-10-08 15:34:09 · 631 阅读 · 0 评论 -
rem如何使用
在这个例子里,根元素的字号为浏览器默认的字号16px(根元素上的em是相对于浏览器默认值的)。因为相对根元素,所以所有字号始终一致,就算是嵌套列表也一样。在文档中,根节点是所有其他元素的祖先节点。这等价于类型选择器html,但是html的优先级相当于一个类名,而不是一个标签。一般会用rem设置字号,用px设置边框,用em设置其他大部分属性,尤其是内边距、外边距和圆角。掌握CSS很重要的一点是学会在适当的场景使用适当的工具。rem是root em的缩写。rem不是相对于当前元素,而是相对于根元素的单位。...原创 2022-08-10 14:49:04 · 921 阅读 · 0 评论 -
深入解析CSS (1)
对于想要精通CSS的人而言,这本书是一张宝贵的“地图”,覆盖了CSS世界的大部分“疆土”,从CSS基础知识开始(如层叠、优先级、继承、相对单位、盒模型等),到多种布局(如浮动布局、Flexbox、网格布局、响应式设计等),再到大型应用程序中的CSS(如模块化CSS和模式库),最后是关于CSS的高级话题(如背景、阴影和混合模式,对比、颜色和间距,以及排版、过渡、变换、动画等)。........................原创 2022-08-09 09:28:41 · 684 阅读 · 0 评论 -
vscode 编辑器 scss转css如何操作?
编辑index.scss文件并保存,会自动生成index.min.css和index.css这两个文件。首选项-->设置(在设置页面找到setting.json)以上就实现了scss文件转css文件的目的。原创 2022-07-22 10:29:08 · 4201 阅读 · 0 评论 -
Sass/Scss 入门不慌
SCSS 语法使用 .scss 文件扩展名。除了极少部分的例外, 它是 CSS 的超集,也就是说 所有有效的 CSS 也同样都是有效的 SCSS 。 由于其与 CSS 的相似性,它是最容易上手的语法, 也是最流行的语法。原创 2022-07-21 11:48:47 · 1132 阅读 · 0 评论 -
关于css的一些基础 :css省略号
以前总是记不住省略号,没有理解透彻「😮💨」css 单行省略号/css多行省略号 单行省略号有三个要素:多行文本省略号:【webkit内核】原创 2022-07-07 17:01:47 · 6535 阅读 · 2 评论 -
css 时间轴样式
51个纯html和css时间轴(包括横向时间轴和纵向时间轴),只有少部分时间轴有用到javascript。示例和下载代码都在zip文件中。转载 2022-07-05 22:48:19 · 2485 阅读 · 0 评论 -
css 自定义滚动条样式
<div class="content-wrap"> <div> 内容XXXX </div></div><style>// content-wrap样式.content-wrap { flex: 1; overflow-y: scroll; box-sizing: border-box; padding: 0 10px; margin: 10px 0; .原创 2021-09-14 14:44:45 · 518 阅读 · 0 评论 -
box-shadow 阴影
请查看:http://note.youdao.com/noteshare?id=1c6adf383a1b6a210024e10e3cf14fb5&sub=E3C64739AC0F43CBB1CA8E6BAB661BED 阴影:box-shoaow:h-shadow v-shadow blur spread color insetbox-shadow: 水平边距 竖直边距...原创 2018-07-24 19:29:52 · 417 阅读 · 0 评论 -
display:none 和 visibility:hidden的区别
display:none及visibility:hidden 两者均是隐藏元素,但是还是有区别的区别:dispaly:none 隐藏元素后,不占据文档流--会产生回流和重绘visibility:hidden 隐藏元素,但却占据文档流--会重绘例如:<p>我是第一行元素</p><p style='display:none'>我是第二行元素</p>...原创 2018-06-30 12:02:02 · 560 阅读 · 0 评论 -
position 的值相对于哪些原点定位
position的值有:relative absolute fixed static inheritfixed 固定定位,相对于浏览器窗口进行定位举例:.container{ width: 300px; height:300px; border: 1px solid #890;}.container>.myFixed{ position:fixed; ...原创 2018-06-23 18:26:30 · 1905 阅读 · 0 评论 -
表单--控制光标颜色
input textarea 控制光标颜色---caret-color//代码:<input type="text" class="input-text"/><textarea rows="10" cols='30' class="input-text"/>//样式:.input-text{caret-color:#890}大家也可以查看该篇文章:https原创 2018-06-07 11:27:34 · 568 阅读 · 0 评论