随笔分类 -  CSS

眼见为实 — CSS的overflow属性
摘要：1. overflow属性 CSS的 属性指定当内容溢出一个元素的框，会发生什么。举个栗子： 在没有指定元素的 属性时，其默认值为 。因此，不指定 属性和指定 属性的值为 的效果是一样的。 指定 属性的值为 ： 指定 属性的值为 ： 指定 属性的值为 ： 提示： 其实，也可以同时设置宽度和高度，这样 阅读全文
posted @ 2020-03-26 10:33 gzhjj 阅读(420) 评论(0) 推荐(0)
为什么overflow:hidden能达到清除浮动的目的？
摘要：1. 什么是浮动 《精通CSS》（第3版）关于 浮动 的描述： 浮动盒子可以向左或向右移动，直到其外边沿接触包含块的外边沿，或接触另一个浮动盒子的外边沿。 浮动盒子也会脱离常规文档流，因此常规流中的其他块级盒子的表现，几乎当浮动盒子根本不存在一样。 为什么说“几乎”？因为其他元素盒子中的文本内容会记 阅读全文
posted @ 2019-08-21 16:44 gzhjj 阅读(1963) 评论(0) 推荐(0)
CSS品控与流程
摘要：精通CSS意味着不仅能写出可用的标记和样式，还能让代码好阅读、方便移植、易维护。 1.外部代码质量：调试CSS 外部代理质量就是用户能体验到的最终结果。主要体现在几个方面。 正确性。 CSS属性名都写对了吗？浏览器能否支持？ 健壮性。 声明两套属性，其中一套用作旧版浏览器的后备。 性能。 页面加载快 阅读全文
posted @ 2019-06-14 15:06 gzhjj 阅读(500) 评论(0) 推荐(0)
CSS高级特效（下）
摘要：3.混合模式与合成 在图形编辑软件（比如 Photoshop ）中，设计师很早就可以选择两个设计元素叠加时的颜色如何混合了。 CSS Compositing and Blending 标准使我们可以在CSS中使用图形编辑软件的 混合模式 。 最简单的混合模式是“正片叠加”（multiply），计算方 阅读全文
posted @ 2019-06-13 14:35 gzhjj 阅读(509) 评论(0) 推荐(0)
CSS高级特效（上）
摘要：1.CSS Shapes CSS Shapes 是一个新标准，旨在让Web设计者能使用各种形状。 CSS Shapes包含两组新属性，一组用于设置影响盒子中内容的形状，另一组用于设置影响形状元素周边内容流的形状。 属性只能应用给浮动元素。这个属性不改变元素自身的外观，只会通过设置形状影响其外部内容流 阅读全文
posted @ 2019-06-05 18:31 gzhjj 阅读(712) 评论(0) 推荐(0)
CSS变化、过渡与动画
摘要：CSS 变换 用于在空间中移动物体，而CSS 过渡 和CSS 关键帧动画 用于控制元素随时间推移的变化。 变换、过渡和关键帧动画的规范仍然在制定中。尽管如此，其中大多数特性已经在常用浏览器中实现了。 1.二维变换 CSS变换支持在页面中平移、旋转、变形和缩放元素。 从技术角度说，变换改变的是元素所在 阅读全文
posted @ 2019-06-04 11:47 gzhjj 阅读(969) 评论(0) 推荐(0)
CSS表单与数据表（下）
摘要：2.表单 表单 是用户输入内容的地方。表单涉及的控件很多，而且一直很难给它们应用样式。无法控制样式的部分，可以通过自定义控件来解决。 2.1 简单的表单 2.1.1 fieldset与legend 用于分组相关信息块， 表明每个fieldset的目的。 2.1.2 字段名 元素用于给每个表单元素添加 阅读全文
posted @ 2019-06-03 10:27 gzhjj 阅读(351) 评论(0) 推荐(0)
CSS表单与数据表（上）
摘要：表单 在现代Web应用中占据着重要地位。 表单可以很简单，也可以非常复杂，要横跨几个页面。 除了从用户哪里获得数据，Web应用还需要以容易看懂的方式展示数据。 表格 是展示复杂数据的最佳方式。 1.设计数据表 1.1 表格专有元素 HTML 中的表格是通过 元素来创建的，表格由 （table row 阅读全文
posted @ 2019-05-31 11:17 gzhjj 阅读(592) 评论(0) 推荐(0)
响应式Web设计与CSS（下）
摘要：4.媒体类型与媒体查询 4.1 媒体类型 依据设备能力来分离样式的能力，始于 媒体类型 。 媒体类型用于针对特定的环境应用样式，包括屏幕显示、打印和电视等。 通过给 元素添加 属性，可以指定在哪些设备上应用相关样式。 在CSS文件中指定媒体类型： 4.2 媒体查询 在 元素中， 媒体查询 可以这样写 阅读全文
posted @ 2019-05-30 20:55 gzhjj 阅读(238) 评论(0) 推荐(0)
响应式Web设计与CSS（上）
摘要：1.一个例子 响应式Web设计最核心的一点，就是可以适配不同视口大小的流式布局。 1.1 简单上手 把列设置为浮动和100%宽度，以保证行可以包含浮动的子元素。 1.2 媒体查询 如果视口更宽一些，那就有可能在一屏之内显示更多内容。 如果媒体类型屏幕的可视窗口宽度大于等于35em，就使用相应的样式。 阅读全文
posted @ 2019-05-30 19:47 gzhjj 阅读(472) 评论(0) 推荐(0)
CSS页面布局与网格（下）
摘要：3.二维布局：CSS Grid Layout CSS Grid Layout模块为了能在二维空间里控制元素的顺序、位置和大小而定义了一组CSS属性。 被设值为 的元素叫 网格容器 （grid container）。 容器进一步被网格线划分为不同的区域，叫 网格单元 （grid cell）。 网格线之 阅读全文
posted @ 2019-05-30 17:42 gzhjj 阅读(355) 评论(0) 推荐(0)
CSS页面布局与网格（上）
摘要：1.布局规划 1.1 网格 网格系统 是设计师在切分布局时作为参照的一组行和列。 1.2 布局辅助类 类名用于为布局添加样式。为了让样式可以重用，让类名表达其意图。 另一种做法： 命名规范 是高质量代码的重要组成部分。 如果设计很复杂，那么最好选择一个现成的 CSS布局框架 。 到底是该选择现成的框 阅读全文
posted @ 2019-05-30 17:41 gzhjj 阅读(407) 评论(0) 推荐(0)
CSS内容布局
摘要：网页是由不同内容块构成的：标题、段落、链接、列表、图片、视频，等等。 1.定位 定位并不适合总体布局，因为它会把元素拉出页面的正常流。 元素的初始定位方式为静态定位（ ），即 块级元素垂直堆叠 。 把元素设置为相对定位（ ），然后可以相对于其原始位置控制该元素的偏移量，同时又不影响其周围的元素。 绝 阅读全文
posted @ 2019-05-29 14:35 gzhjj 阅读(1072) 评论(0) 推荐(0)
CSS漂亮盒子（下）
摘要：4.多重背景 CSS支持一个元素设置多个背景图片。 每个背景属性有相应的多值语法，多个值由逗号分隔。 如果随后的背景属性值少于背景图片的个数，那么相应的值会循环使用。 5.边框与圆角 可以分别为盒子的各边设置边框，也可以一次性为四边设置边框 除非明确指定 属性，否则边框宽度会影响盒子的尺寸 设置边框 阅读全文
posted @ 2019-05-22 16:01 gzhjj 阅读(761) 评论(0) 推荐(0)
CSS漂亮盒子（上）
摘要：HTML文档中的所有元素都是由矩形盒子构成的——不管是包含页面结构的容器元素，还是段落中的每行文本，归根结底都是盒子。 1.背景颜色 设置页面背景颜色。 简写属性： 通过 可以一次性地设置与背景相关的多个属性。 十六进制表示法： 一个 后面加上6位十六进制数字构成的字符串。 这个字符串由3组数字（每 阅读全文
posted @ 2019-05-22 14:41 gzhjj 阅读(783) 评论(0) 推荐(0)
CSS网页排版
摘要：自印刷出版物诞生以来，排版就一直是平面设计的基础。 同样，排版在网页设计中也扮演着重要角色。 1.CSS的基本排版技术 1.1 文本颜色 对应网页而言，文本颜色也许是最基本的样式之一。 默认情况下，浏览器把绝大部分文本渲染为黑色。 1.2 字体族 字体族 （font family）属性的值是一个备选 阅读全文
posted @ 2019-05-22 11:08 gzhjj 阅读(1055) 评论(0) 推荐(0)
CSS可见格式化模型
摘要：1.盒模型 1.1 盒子大小 盒模型 描述了元素如何显示，以及如何相互作用、相互影响。 页面中的所有元素都被看作一个矩形盒子，这个盒子包含 元素的内容 、 内边距 、 边框 和 外边距 。 给元素应用的背景会作用于元素内部和内边距。 外边距用于在页面中控制元素之间的距离。 对元素盒子而言，内边距、边 阅读全文
posted @ 2019-05-21 11:18 gzhjj 阅读(363) 评论(0) 推荐(0)
CSS基础知识（下）
摘要：3.层叠 稍微复杂的样式表中都可能存在两条甚至多条规则同时选择一个元素的情况。 CSS 通过一种叫作 层叠 （cascade）的机制来处理这种冲突。 层叠机制的原理是为规则赋予不同的重要程度。最重要的是 作者样式表 ，即由网站开发者所写的样式。其次是 用户样式表 ，用户可以通过浏览器的设置选项，为网 阅读全文
posted @ 2019-05-20 20:44 gzhjj 阅读(146) 评论(0) 推荐(0)
CSS基础知识（上）
摘要：1.创建结构化、语义丰富HTML 语义化标记是优秀HTML文档的基础。 语义化标记意味着在正确的地方使用正确的元素，从而得到有意义的文档。 有意义的文档可以确保尽可能多的人都能够使用。 1.1 ID和class属性 为元素添加ID和class属性不一定能给文档增加含义或结构。这两个属性只是一种让其他 阅读全文
posted @ 2019-05-20 19:51 gzhjj 阅读(216) 评论(0) 推荐(0)