随笔分类 -  CSS

1 2 下一页
深入理解css 笔记（完）
摘要：一个网站，从看起来还可以，到看起来非常棒，差别在于细节。在实现了页面里 某个组件的布局并写完样式之后，不要急着继续，有意识地训练自己，以挑剔的眼光审视刚刚完成的代码。如果增加或者减少一点内边距是不是看起来更好。调一下颜色是不是效果更好，如果在开发设计师详细的视觉稿，实现效果有没有做到完美还原。 接下 阅读全文
posted @ 2022-11-29 09:14 艾路 阅读(32) 评论(0) 推荐(0)
深入理解css 笔记（9）
摘要：模块化 CSS 是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且互相之间没有依赖关系。最终目的是，当我们修改其中一部分 css 时，不会对其他部分产生意料之外的影响。 开始写模块化样式之前，需要先配置好环境。每个样式表的开头都要歇一歇给整个页面使用的通用规则，模块化 CS 阅读全文
posted @ 2022-11-23 12:39 艾路 阅读(34) 评论(0) 推荐(0)
深入理解css 笔记（8）
摘要：接下来我们讲下响应式设计，最初开发人员通过创建两个网站来解决这个问题。桌面版和移动版，只是假如要兼容越来越多的设备，比如大屏的平板手机，ipad mini.这时候，强制分开的方案带来就比较多的麻烦，同时也要维护多个网站。 更好的方式时给所有用户提供一份html和css.通过使用几个关键技术，根据用户 阅读全文
posted @ 2022-11-16 14:53 艾路 阅读(22) 评论(0) 推荐(0)
深入理解css 笔记（7）
摘要：前面讲了几种控制网页布局的方式，flex,gird 和 float。这下我们初略讲下 position.这个我日常中用到的已经挺多了。定位和其他控制文档流的行为不同。它将元素彻底从文档流中移走，它允许你将元素放在屏幕的任意位置。还可以将一个元素放在另一个元素的前面或后面，彼此重叠。 浏览器将 htm 阅读全文
posted @ 2022-10-31 13:57 艾路 阅读(21) 评论(0) 推荐(0)
深入理解css 笔记（6）
摘要：网格布局：flexbox 彻底改变了网页布局方式，但这只是开始。它还有一个大哥：另一个称作网格布局模块的新规范。这两个规范提供了一种前所未有的全功能布局引擎。跟 flexbox 类似，网格布局也是作用于两级的 dom 结构。设置为 display:grid 的元素成为一个网格容器（grid cont 阅读全文
posted @ 2022-10-21 10:56 艾路 阅读(49) 评论(0) 推荐(0)
深入理解css 笔记（5）
摘要：创造浮动的初衷并不是为了用于页面布局。浮动能将一个元素，通常是一张图片，拉到其容器的一侧，这样文档流就能够包围它。word 文档中，报纸，杂志中很常见。所以 css 增加了浮动来实现这种效果。尽管这才是浮动的是设计初衷，我们却并不总是这样使用它。flexbox 正在迅速取代浮动在页面布局中的地位。f 阅读全文
posted @ 2022-10-16 14:27 艾路 阅读(30) 评论(0) 推荐(0)
深入理解css 笔记（4）
摘要：深入理解css 笔记（4）处理元素高度的方式跟处理宽度不一样。之前对 border-box 的修改依然适用于高度。而且很有用，但是通常最好避免给元素指定明确的高度。当明确设置一个元素的高度时，内容可能会溢出容器。当内容再限定区域放不下，渲染到父元素外面时。用 overflow 属性可以控制溢出内容的行为，该属性支持以下 4 阅读全文
posted @ 2022-10-13 21:03 艾路 阅读(63) 评论(0) 推荐(0)
深入理解css 笔记（3）
摘要：深入理解css 笔记（3）过去经常将网页的根元素字号设置为 0.625em 或者 62.5%。这样是为了将全局的 font-size 改成 10px。这样设计师希望字号 14px 时，只需要写成 1.4rem 就好了。还使用了相对单位。一开始，这会很方便，但是这样有两个缺点。第一，我们被迫写很多重复的代码。10px 对大部分 阅读全文
posted @ 2022-10-10 11:52 艾路 阅读(43) 评论(0) 推荐(0)
深入理解css 笔记（2）
摘要：还有一种给元素添加样式的方式：继承。经常有人会把层叠跟继承混淆。虽然两者相关，但是应该分别理解它们。如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。比如给 body 元素添加上 font-family,里面所有的祖先元素都会继承这个字体，不必给页面的每个元素明确指定字体了。但不是所有 阅读全文
posted @ 2022-10-08 20:31 艾路 阅读(52) 评论(0) 推荐(0)
深入理解css 笔记（1）
摘要：如果要掌握 css,一定要理解基础知识，并且深入的理解。css 的意思是层叠样式表。我们先讲层叠。我们需要理解浏览器如何解析样式规则。每条规则单独看很简单，但是当两条规则提供了冲突的样式会发生什么呢。如果你发现一条规则没有按照预期生效，可能是因为另一条规则跟它冲突了。要想预测规则最终的效果，就需要理 阅读全文
posted @ 2022-10-07 12:38 艾路 阅读(40) 评论(0) 推荐(0)
CSS3 动画效果
摘要：相比较3D变形，CSS3动画的支持度更高。CSS3动画由两部分组成：首先是关键帧声明，然后是在动画属性中使用该关键帧声明。 可以设置多个关键帧选择器（用百分比定义）。可以把它们想象成时间轴上的点。 也可以使用关键词：等价于0%和100%的关键词：form，to。只是WebKit内核的浏览器对from 阅读全文
posted @ 2018-02-23 12:20 艾路 阅读(111) 评论(0) 推荐(0)
CSS 变形动画 水平，垂直翻转元素
摘要：CSS3的2D变形属性，scale：用来缩放元素（放大和缩小），translate:在屏幕上移动元素（上下左右），rotate:按照一定角度旋转元素（单位为度），skew:沿X和Y轴对元素进行斜切，matrix:允许以像素精度来控制变形效果。变形是在文档外发生的。一个变形的元素不会影响它附近未变形元 阅读全文
posted @ 2018-02-23 11:40 艾路 阅读(1695) 评论(0) 推荐(0)
CSS3中的动画
摘要：css3主要通过三个代理完成大部分动画工作。过渡(transition)，变形(transform)和动画(animation)。 当知道动画的起始状态和终止状态，并且需要一个简答的变形方法时，使用CSS过渡(transition)。 当需要在视觉上改变某个元素但又不想影响页面布局的时候，使用CSS 阅读全文
posted @ 2018-02-12 18:26 艾路 阅读(133) 评论(0) 推荐(0)
SVG可伸缩矢量图
摘要：SVG是响应式设计中十分重要的一项技术。它是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术。 web领域中的图像，png,jpg都是它们的可视数据保存为像素形式。放在两倍宽高上，就会有局限性。除了最小的图片资源，如果可能的话，使用svg替换png。这样可以产生和分辨率无关的图片，而且大小也比位图 阅读全文
posted @ 2018-02-06 16:58 艾路 阅读(156) 评论(0) 推荐(0)
CSS3 高级技术
摘要：盒阴影容许在元素的内部或者外部创建盒状的阴影效果。它们遵循相同的语法：水平偏移值、垂直偏移值、模糊距离、阴影尺寸，以及阴影颜色。.shadow{ box-shadow:0 3px 5px #444;}默认的box-shadow是设置在元素外部的。另外一个可选关键词inset容许在元素内部使用box- 阅读全文
posted @ 2018-02-05 18:37 艾路 阅读(171) 评论(0) 推荐(0)
一些CSS3特性
摘要：文本多列展示。 column-width:12em;设定列宽。改变视口宽度会动态改变列数。假如想让列数固定，宽度可变。可以写成column-count:4;column-gap:2em;设置劣间间距。column-rule:thin dotted #999;设置列之间的分割线样式。多列布局中，如果每 阅读全文
posted @ 2018-02-01 18:42 艾路 阅读(161) 评论(0) 推荐(0)
2018前端学习路线
摘要：引用：https://github.com/kamranahmedse/developer-roadmap 引言： 前端路线图 后端路线图 DevOps路线图 阅读全文
posted @ 2018-01-18 16:06 艾路 阅读(366) 评论(0) 推荐(0)
媒体查询以及flexbox，响应式图片
摘要：媒体查询包含媒体类型和零个或多个检测媒体特性的表达式。width.height和color都是可用于媒体查询的特性。使用媒体查询，可以不必修改内容本身，而让网页适应不同的设备。 媒体查询的使用方式：在css文件输入@media screen。在Link标签中使用媒体查询。<link rel="sty 阅读全文
posted @ 2018-01-04 16:40 艾路 阅读(570) 评论(0) 推荐(0)
网页自适应的几种方式。
摘要：微信小程序的像素大小使用rpx，rpx换算px屏幕宽度/750。 传统的自适应布局有几种： 响应式，根据屏幕大小配置多个样式文件。 使用em,rem.rem是页面的font-size尺寸，不同的页面设置不同的font-size。 使用百分比或者flex，铺满屏幕，高度字体还使用px. scale通过 阅读全文
posted @ 2017-12-04 18:35 艾路 阅读(2549) 评论(0) 推荐(0)
sass 使用，快捷方法
摘要：sass-convert命令行工具，可以将一种语法转换成另外一种语法。sass与scss之间的切换。 sass,不适用大括号和分号；另一种是scss文件，这种和我们平时写得css文件格式差不多，使用大括号和分号。scss后缀名的文件要求比较严格。 sass变量声明和css属性的声明很像。任何可以用作 阅读全文
posted @ 2017-12-01 16:07 艾路 阅读(278) 评论(0) 推荐(0)

1 2 下一页