随笔分类 -  CSS

line-height
摘要：注：个人学习笔记，不具备参考性 参考博文：https://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 一、“行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。 二、line-height 被用来控制行与 阅读全文
posted @ 2021-07-21 17:18 Jaye8584 阅读(175) 评论(0) 推荐(0)
flex布局最后一行列表左对齐的方法
摘要：先贴出鑫大神的文章：https://www.zhangxinxu.com/wordpress/2019/08/css-flex-last-align/ 这里记录下自己使用其中第一种方法时的用法和思路详解。 问题说明： 用 flex 布局时，当设置 justify-content: space-bet 阅读全文
posted @ 2020-05-23 18:32 Jaye8584 阅读(1883) 评论(0) 推荐(0)
flex.css 属性说明
摘要：flex属性大全 dir：主轴方向 top：从上到下 right：从右到左 bottom：从下到上 left：从左到右（默认） main：主轴对齐方式 right：从右到左 left：从左到右（默认） justify：两端对齐 center：居中对齐 cross：交叉轴对齐方式 top：从上到下（默 阅读全文
posted @ 2020-04-29 10:40 Jaye8584 阅读(875) 评论(0) 推荐(0)
js 固定底部 footer/自动计算页面高度
摘要：更新一种更简单的 css 方法： .main { /* header: 30px; footer:100px; total:130px*/ min-height: calc(100vh - 130px); } calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如： 阅读全文
posted @ 2020-03-30 18:22 Jaye8584 阅读(1128) 评论(0) 推荐(0)
web 字体 font-family
摘要：衬线字体与无衬线字体 衬线字体：serif 无衬线字体：sans-serif （衬线的意思是在字符笔画末端有叫做衬线的小细节的额外装饰，而且笔画的粗细会有所不同） web 字体 font-family 再探秘：https://www.cnblogs.com/coco1s/p/11350642.htm 阅读全文
posted @ 2019-12-21 18:11 Jaye8584 阅读(610) 评论(0) 推荐(0)
css 禁止点击事件触发
摘要：鼠标不可点击主要是两种表现： 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none 阅读全文
posted @ 2019-07-10 11:21 Jaye8584 阅读(11642) 评论(0) 推荐(0)
font-family 字体
摘要：推荐博文：https://segmentfault.com/a/1190000006110417?utm_source=tag-newest 阅读全文
posted @ 2019-04-26 15:42 Jaye8584 阅读(270) 评论(0) 推荐(0)
CSS 命名规范
摘要：CSS样式命名说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航 #menu 菜单 #submenu 子菜单 #sideBar 侧栏 #s... 阅读全文
posted @ 2019-03-11 15:38 Jaye8584 阅读(185) 评论(0) 推荐(0)
css :root 选择器
摘要：:root css 伪类匹配文档的根元素。 对于 HTML 来说， :root 表示<html>元素，除了优先级更高之外，与 html 选择器相同。 在声明全局 css 变量时 :root 会很有用： 阅读全文
posted @ 2019-01-28 14:21 Jaye8584 阅读(1793) 评论(0) 推荐(0)
css-块级格式上下文
摘要：定义： 块级格式上下文（Block Formatting Context）是CSS中一个相对冷门的概念，今天被问到才引起注意，下文简单介绍下它的用法，学习资料多来源于网络，实际开发中遇到再继续更博吧。 BFC(Block formatting context)直译为"块级格式化上下文"。 它是一个独 阅读全文
posted @ 2018-11-13 21:56 Jaye8584 阅读(501) 评论(0) 推荐(0)
背景图片自适应
摘要：background-image: url("../../common/img/chat-bg.jpg"); background-image: url("../../common/img/chat-bg.jpg"); background-size: 100% 100%; 阅读全文
posted @ 2018-10-16 16:56 Jaye8584 阅读(149) 评论(0) 推荐(0)
Media Query-响应式布局
摘要：做响应式网站的时候，一定要在页面头部加入如下的声明： width=device-width 样式中定义的宽度等于设备中定义的宽度 initial-scale=1.0 缩放比例1 minimum-scale=1.0 最大缩小比例1 maximum-scale=1.0 最大放大比例1 上段代码的最终作用 阅读全文
posted @ 2018-08-21 11:04 Jaye8584 阅读(303) 评论(0) 推荐(0)
Chrome表单文本框自动填充黄色背景色样式
摘要：chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式： input:-webkit-autofill { background-color: #FAFFBD 阅读全文
posted @ 2018-05-19 14:47 Jaye8584 阅读(249) 评论(0) 推荐(0)
子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素
摘要：纯粹的CSS无法实现。因为position:absolute就是脱离文档流，怎么能让父元素不塌陷呢？ 目前想到的只能用js和jquery来实现了，用js获取子元素的高度，赋值给父元素。 jquery写法： 阅读全文
posted @ 2018-03-23 09:29 Jaye8584 阅读(5761) 评论(1) 推荐(1)
css3：盒模型以及box-sizing属性
摘要：文档中的每个元素被描绘为矩形盒子。渲染引擎的目的就是判定大小，属性——比如它的颜色、背景、边框方面——及这些盒子的位置。在CSS中，这些矩形盒子用标准盒模型来描述。这个模型描述了一个元素所占用的空间。每一个盒子有四条边界：外边距边界margin, 边框边界border, 内边距边界padding与内 阅读全文
posted @ 2016-09-20 14:34 Jaye8584 阅读(535) 评论(0) 推荐(0)
input的file 控件及美化
摘要：在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用input的file控件来实现就好啦~ 效果图是酱婶的： 注意！别以为这个是由一个text和一个button组合成的，其实它就是一个file控件哦 今天工作中遇到要求：不显示“未选择任何文件”，捣鼓够一个小 阅读全文
posted @ 2016-06-30 19:36 Jaye8584 阅读(2551) 评论(0) 推荐(2)
表格table嵌套，边框合并问题
摘要：【问题】 外层table与内层table嵌套，内外表格都需边框时，设置“border=1”，但边框会重复，造成某些地方边框粗，有些地方边框细的问题。 【解决办法】： 外表格样式： <table border="1" cellspacing="0" cellpadding="0" style="bor 阅读全文
posted @ 2016-05-16 09:04 Jaye8584 阅读(4054) 评论(0) 推荐(2)