Hey_Coder

1. CSS 基础 框/盒模型 CSS Basic Box Model2. 元素 和 盒子3. 盒子的 分区和分区边界4. 盒模型 涉及的属性5. 盒模型 和 相关属性之间的影响♣ 结束语 和 友情链接

⑴ 常用的 图像的 属性值① 图像路径/地址 url()方法: url('URL')指向 图像的路径,简单的 静态图像，用 URL引用url值 带引号.② 渐变图像gradient 相关的方法 生成的 渐变图像⑵ <image> css 图像 数据类型CSS的<image> 图像 数据类型描述的是 2D 图形。表示一个 二...

1. 长度单位1.1 相对长度 单位1.1.1 字体的 相对长度⑴ em : (相对于 当前元素本身的 )字体大小 font-size 的倍数⑵ rem : (根元素 html 标签的) 字体大小 font-size 的倍数⑶ ex : x 的高度 (随 font-family , font-size 改变)⑷ ch : 数字 0 的宽度 (随 font-family , font-size 改变)1.1.2 视窗的 相对长度⑴ vh : 视窗高度 的 1% (百分之一)

CSS 颜色的 合法颜色值1. 颜色关键字⑴ 颜色名⑵ transparent 关键字⑶ currentColor 关键字2. 十六进制颜色 (#红绿蓝,0~f)3. RGB 颜色 (整数,百分比值)4. RGBA 颜色 (带 不透明度值 / 颜色深浅)5. HSL 颜色 (色度,饱和度,亮度 / 颜色,灰彩程度,深浅程度)6. HSLA 颜色 (带 不透明值 / 颜色深浅)♣ 结束语 和 友情链接

CSS 网格布局网格布局 - CSS（层叠样式表） | MDN网格属性Grid浏览器支持网格属性没有浏览器支持用于属性名CSS 版本浏览器支持网格中每个 列的宽度。grid-columns3没有浏览器支持网格中每个 列的高度。grid-rows3没有浏览器支持CSS3 grid-columns 属性美 ['k...

1. available 属性值available表示 撑满可用空间 ⇒ 自动填满 剩余的空间。available关键字 可以让元素的100%自动填充特性 不仅仅在 块级元素上，也可以应用在其他元素。如 内联块级元素 display: inline-block;❶ display: inline-block;

CSS 弹性盒子布局 (Flexible Box Layout)1. 弹性盒子布局的 基本概念和术语2. flex 属性: 设置 伸缩项的 伸缩性和比例 (简写属性，用于伸缩项)2.1 flex-grow 属性: 伸缩项 主轴上的 宽或高的 剩余空间的分配和比例 ( 数字值，默认不分配 0)2.2 flex-shrink 属性: 设置 伸缩项的 收缩因子 (数字值，默认 等比例收缩 1)2.3 flex-basis 属性: 伸缩项的 主轴方向上的初始 宽或高 (假设大小 ，不一定等于真实

CSS 书写模式 Writing modes1. writing-mode 属性: 设置 元素的书写模式(块流方向 +内联级内容/文本 主流动方向 )2. text-combine-upright 属性: 把字符组合在一起 放置在单个字符的空间 ( 垂直模式, 搭配 writing-mode 属性)3. text-orientation 属性: 设置 垂直行中 文本的方向 ( 垂直模式, 搭配 writing-mode 属性)♣ 结束语 和 友情链接

CSS 用户界面属性 Basic user interface1. appearance 属性: 设置 元素的外观样式2. box-sizing 属性: 设置元素 宽高属性 的指定区域 (搭配 width,height 属性)3. caret-color 属性: 设置 插入光标的颜色4. cursor 属性: 设置 元素内 鼠标光标的 形状5. resize 属性: 设置元素的 可调整性 和 调整方向 ( 搭配 overflow 属性)6. user-select 属性: 设置 文本

CSS 遮挡和剪切属性 MaskingCSS 遮挡和剪切属性 Masking1. CSS Masking 的基本概念2. clip 属性: 设置 绝对/固定 定位元素的 可见区域 (可指定 四条剪切线的位置 , 已废弃，用 clip-path 替代)3. clip-path 属性:设置元素的 剪切区域 ( = 可见区域)♣ 结束语 和 友情链接

CSS 形状1. CSS 形状的基本概念2. < basic-shape > 数据类型: CSS 属性中 使用的形状值 / 形状函数Ⅰ. inset() 函数: 设置 内嵌矩形 (可设置各边偏移量 和 区域的圆角)Ⅱ. circle() 函数: 圆形 (1个半径 at 一个圆心的位置)Ⅲ. ellipse() 函数: 椭圆形 (2个半径 at 1个圆心的位置)Ⅳ. polygon() 函数: 多边形 顶点的坐标 值对Ⅴ. path() 函数: svg path 路径字符串3.

CSS 定位属性1. position 属性: 设置元素的 位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)1.1 top 属性: 定位元素的 上偏移量 (长度值/百分比值/不偏移 auto, 搭配 position 属性)1.2 bottom 属性: 定位元素的 下偏移量 (搭配 position 属性)1.3 left 属性: 设置 定位元素的 左偏移量 (搭配 position 属性)1.4 right 属性:

CSS 定位之 display 属性1. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局)⑴ 设置 元素的显示类型 ( 框的类型 ):⑵ 元素的显示类型⑶ 显示类型的 语法⑷ 显示类型的 属性值 和 属性值分类Ⅰ. 外部显示类型: < display-outside >Ⅱ. 内部显示类型: < display-inside >Ⅲ....

position 属性: 设置元素的 位置/定位类型 (静态/ 相对/ 绝对/ 固定/ 粘性, 搭配 top/ right/ bottom/ left 属性)⑴ 设置元素的 位置/定位类型: position 属性把元素放置到一个 静态的、相对的、绝对的、或固定的 位置中。搭配属性: 搭配以下 偏移量 属性,决定元素的 最终位置❶ top❷ right❸ bottom❹ ...

盒模型之 溢出和可见性 属性 overflow & visibility1. overflow 属性: 设置 内容溢出时的 处理 (剪切/滚动条)1.1 CSS3 overflow-x 属性: 设置 元素的 水平溢出 处理 (剪切/滚动条)1.2 CSS3 overflow-y 属性: 设置 元素的 垂直溢出 处理 (剪切/滚动条)1.3 CSS3 overflow-wrap 属性: 溢出 换行位置 / 溢出时 单词换行 位置2. visibility 属性: 设置 元素的 可见性(显示

CSS 尺寸/宽高 属性1. height 属性: 设置 元素的高度 (auto/长度值/ 百分比值)1.1 max-height 属性: 设置元素的 最大高度 (最小高度 是最小, 高度 超出时,实际高度= 最大高度,无最大值none/ 长度值/ 百分比值(包含块) )1.2 min-height 属性: 设置元素的 最小高度 (最小高度 不是最小时,实际高度= 最小高度,默认高度(auto)/长度值/ 百分比值(包含块))2. width 属性: 设置 元素的宽度 (默认用于 内容区,浏

⑴ **设置 元素的外边距**: `margin` - 属性设置 元素的所有四个边外部的 外边距区域。 - ① **简写属性**: 在一个声明中，一次性设置 所有外边距属性,是以下子属性的简写。 - (子属性 和 初始值都为 `0`) - ❶ **上外边距**: `margin-top: 0` - ❷ **右外边距**: `margin-right: 0` - ❸ **下外边距**: `margin-bottom: 0` - ❹

CSS 内边距属性 paddingCSS 内边距属性padding 属性CSS 内边距属性（Padding）美 ['pædɪŋ]内边距元素边框与元素内容之间的空间。用于属性名CSS 版本浏览器支持1.在一个声明中，一次性设置所有内边距属性。padding1都支持。IE 所有版本 不支持 属性值 inherit。2.元素的 下内边距...

1. 视觉/可视化 格式化模型 和 文档树2. 元素和盒子3. 盒子和包含块4. 盒子 相关的术语5. 盒子的生成5.1 块级元素与 盒子5.2 行内级元素 和 盒子6. 定位规则♣ 结束语 和 友情链接

CSS 边框属性（Border 和 Outline）边框属性须知1.样式最优先设置任何边框属性，必须先设置边框样式先 声明 border-style 属性。元素只有在获得边框之后，才能改变其边框的宽度。主要内容边框宽度边框颜色边框样式边框圆角边框图像边框阴影轮廓所有边框属性IE7- 不支持值 “inherit”。边框颜色IE6-...

CSS 表格属性 Tableborder-collapse 属性border-spacing 属性caption-side 属性empty-cells 属性table-layout 属性用于属性名CSS 版本合并 表格边框。border-collapse2相邻 单元格边框 之间的 距离。border-spacing2表格标题的 位置。caption-...

CSS 列表属性 ListCSS 列表属性（List）list-style 属性list-style-type 属性list-style-position 属性list-style-image 属性CSS 列表属性（List）用于属性名CSS 版本在一个声明中，一次性设置 所有的 列表属性。list-style1将 列表项标记 设置为图象。list-sty...

CSS 字体 属性（Font）CSS 字体属性font 属性font-family 属性font-size 属性font-size-adjust 属性font-stretch 属性font-style 属性font-variant 属性font-weight 属性CSS 字体属性（Font）美 [fɑnt]字体所有字体属性的继承性都是 会被继承的属性的浏览器支持都...

CSS 文本属性（Text）1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的 颜色)2. direction 属性: 文本/表列/水平溢出的 方向 (文本方向 可用标签的 dir 属性 替代)3. CSS3 hanging-punctuation 属性: 悬挂标点的 位置和符号 (实验中 属性)4. letter-spacing 属性 : 字符间距 (字符之间的 额外空白/空间)5. line-height 属性: 设置 行高/行间距 (一行多高,影响 行之间的

CSS 属性值的分类CSS 属性值的分类指定值计算值使用值实际值♣ 结束语 和 友情链接CSS 属性值的分类开发者设定的 指定值 ≠ 实际值的情况浏览器 和 属性值的关系浏览器给 元素赋值: 当浏览器解析了一个文档 ( document ) 并且生成了文档树 ( document tree )它必须为 文档树中的每一个元素，根据 目标媒介类型 所适用的 每一个特性，指定 一个...

基线,内容区, 行高,行距, 行内框,行框的 区分说明⑴ 基线⑵ 内容区⑶ 行高/行间距⑷ 行距⑸ 行内框⑹ 行框♣ 结束语 和 友情链接⑴ 基线基线沿着 文本最底部的 一行线, 基线（base line）并不只是 汉字文字的下端沿若一行文本 有中文和英文，则基线会在 英文 ‘x’ 最底部。行高、基线、顶线、中线、底线 示例图元素框每个元素 都...

CSS 背景属性 backgroundCSS 背景属性1. background 属性: 一次性 集中定义 8个 背景相关属性2. background-color 属性: 元素的 背景颜色 (纯色,范围到 边框区的 外边缘)3. background-image 属性: 背景图像 (范围到 内边距区的 外边缘,不含 边框)4. background-attachment 属性: 背景图像的 固定和滚动5. background-position 属性: 背景图像的 位置 (先水平,

CSS 基础教程1.CSS 简介1.1 CSS 概述1.2 CSS 产生的背景1.3 CSS 样式 存在的意义 和 基本介绍1.4 CSS 规范2. CSS 基础语法⑴ CSS 规则构成⑵ 值的 不同写法 和 单位⑶ CSS 注释3. CSS 高级语法⑴ 选择器的分组⑵ 继承 及其 相关问题4. CSS 选择器4.1 派生选择器4.2 CSS id 选择器4.3 CSS 类选择器4.4 CSS 属...