随笔分类 -  css

摘要:CSS flex 子项目中的 flex 属性家族 零、参考文章 一文搞懂 flex 属性 聊聊Flexbox布局中的flex的演算法 一、基础概念 语法 flex 是简写语法,其作用是设置弹性项目如何增大或缩小以适应其弹性容器中可用的空间,其具体代表是: flex-grow:扩展子元素长度 flex 阅读全文
posted @ 2024-12-10 16:52 shiweiqianju 阅读(66) 评论(0) 推荐(0) 编辑
摘要:零.序言 前两天在逛 blog 的时候看见一些内联样式新奇的写法时很纳闷,虽然说不上多么熟练,但是从来没见过 --color: brown 这样的写法,百度一番之后仍然没啥头绪,今天偶然看到一篇文章之后才知道这是 css 变量,不禁感叹自从 V8 引擎之后花样越来越多。经过翻查总结(也没啥总结的,翻 阅读全文
posted @ 2019-08-23 15:12 shiweiqianju 阅读(1691) 评论(1) 推荐(0) 编辑
摘要:零.序言 css 3 的新特性,很多都停留在听说而非实际使用。transform, transition, translate 这三长得实在太像,刚开始的时候总是迷迷糊糊,分不清它们的功能。而最近新接入的项目以视觉效果为主,故也算是被动弄清基础含义。 先说结论,transform 与 transit 阅读全文
posted @ 2019-08-14 11:09 shiweiqianju 阅读(996) 评论(0) 推荐(0) 编辑
摘要:参考资料: “display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法; 正文: 场景:两个 div 排在一行上,各有固定宽高,其中有一个 div 内部有文字和排版等其他填充;两个 div 杂七杂八的宽度加起来远小于 fathe 阅读全文
posted @ 2019-08-05 16:25 shiweiqianju 阅读(3454) 评论(0) 推荐(1) 编辑
摘要:原文:你真的了解回流和重绘吗-陈纪庚 序言 回流和重绘,浏览器(客户端)优化的重要思考方向之一,同时也将会是面试隐藏 boss,不过,要说难,排除掉浏览器底层渲染原理后也并不是那么困难。作为进阶资料,还是有必要掌握的。 先说核心结论:回流一定会触发重绘,而重绘不一定会回流。 浏览器的渲染过程 上图是 阅读全文
posted @ 2019-05-16 14:01 shiweiqianju 阅读(407) 评论(0) 推荐(0) 编辑
摘要:原文: [布局概念] 关于CSS-BFC深入理解; 深入理解 BFC; - 页面内可演示 BFC的概念以及通俗理解 通俗理解:BFC就是css布局的一个概念,是一块区域,一个环境。可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元 阅读全文
posted @ 2019-02-22 14:40 shiweiqianju 阅读(265) 评论(0) 推荐(0) 编辑
摘要:原文链接:scss 教程 手头上疯狂在用 scss,虽然可以在里面写原生的 css, 但是为了保持风格的一致性,还是滚去看了看 scss 文档。 一、变量 变量的引入是 scss 的一个核心特性,变量用来存储需要在CSS中复用的信息,例如颜色和字体。SASS通过$符号去声明一个变量。 编译后,变量的 阅读全文
posted @ 2018-12-28 17:08 shiweiqianju 阅读(342) 评论(0) 推荐(0) 编辑
摘要:一 历史 Float的设计初衷仅仅是:文字环绕效果(向word中的文字环绕效果) 二 特性 1.包裹性:块级元素如果不设置float,它默认会撑满整个屏幕,而如果设置了float,则只会包裹住其内容。 例子: 没有float的div: 添加了float的div: 2.破坏性:设置了float的元素会 阅读全文
posted @ 2018-12-18 16:28 shiweiqianju 阅读(130) 评论(0) 推荐(0) 编辑
摘要:最终的效果如下: 以上演示浏览器对 border-color 的渲染。 由此,我们就可以制作梯形、三角形的图标。 例如: 梯形的代码: 三角形的代码: 可以在此两基础上进行控制(宽度等)形成其他图形; 实际应用的场景: 阅读全文
posted @ 2017-10-27 15:09 shiweiqianju 阅读(1354) 评论(0) 推荐(0) 编辑
摘要:一:一个小图标的制作 我们在支付宝、微信等某些地方上传文件时会遇到以下的图标,但是这样的图标其实可以用<a/>标签以及css样式完成, 具体代码如下: <!DOCTYPE html> <html> <head></head> <style> .add{ display: block; /*以块级元素 阅读全文
posted @ 2017-10-26 16:17 shiweiqianju 阅读(294) 评论(0) 推荐(0) 编辑
摘要:一、一列布局(例如百度首页) 通常用 {margin:0 auto;} 控制。 二、两列布局 通常用 {float:left/right} 控制。 三、三列布局 使用 {position:absolute;} 控制。 1.通常设置宽度为%即可;如: 2.特殊情况,左右两列宽度固定,中间一列宽度自适应 阅读全文
posted @ 2017-10-21 17:23 shiweiqianju 阅读(326) 评论(0) 推荐(0) 编辑
摘要:一、行内元素-水平居中 在父元素的样式中添加: 二、定宽块级元素-水平居中 所谓定宽块级元素指块级元素的宽度指定,而不是默认的100%,否则此方法无效; 代码: 三、不定宽块级元素-水平居中 三种思路: 以上是例子代码。 四、父元素高度确定的单行文本-垂直居中 思路:设置父元素的 height 和 阅读全文
posted @ 2017-09-09 16:32 shiweiqianju 阅读(200) 评论(0) 推荐(0) 编辑
摘要: 阅读全文
posted @ 2017-09-09 15:20 shiweiqianju 阅读(1312) 评论(0) 推荐(0) 编辑
摘要:一、流动模型(默认布局) 1.特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置。 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示。 二、浮动模型 三、层模型(定位) 阅读全文
posted @ 2017-09-09 14:14 shiweiqianju 阅读(169) 评论(0) 推荐(0) 编辑
摘要:1.常见的块级元素均具有盒子模型的特征; 2. 等价于: 其中: 1)、border-style(边框样式)常见样式有: dashed(虚线)| dotted(点线)| solid(实线)。 2)、border-color(边框颜色)中的颜色可设置为十六进制颜色,如: 3)、border-width 阅读全文
posted @ 2017-09-09 14:07 shiweiqianju 阅读(124) 评论(0) 推荐(0) 编辑
摘要:在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。 常用的块状元素有: <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 注:块级元素都具有 阅读全文
posted @ 2017-09-03 12:33 shiweiqianju 阅读(187) 评论(0) 推荐(0) 编辑
摘要:一、继承性: 继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。 二、特殊性(优先级?) 定位一个元素,选择器的特殊性值则是决定哪一个胜出的关键。 其形式(不在代码中体现)如:0,0,0,1/1,1,0,1/0,0,0,3/…. 主要有四个规则: 几个例子: 题外话:c 阅读全文
posted @ 2017-09-03 12:06 shiweiqianju 阅读(136) 评论(0) 推荐(0) 编辑
摘要:class选择器: id选择器: 异同: 相同点:可以应用于任何元素不同点: 1.id全局唯一;class无要求; 2.class选择器可以写成下面形式: id只能有一个。错误示例: 阅读全文
posted @ 2017-09-03 11:38 shiweiqianju 阅读(652) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示