荔枝同学

简介 是一门CSS预处理语言，是对CSS语言的扩展 功能 1.变量 eg:@height:200px;—height是变量名，200px是对应的值 2.混合 在一个规则集中使用另一个规则集，.name—使用.name() 3.嵌套 提供了嵌套，代码简洁 eg: #box { a { } b { } } 扩展 &—>当前选择器的父级 @规则也可以嵌套，但是解析是会被放在最前面，是独立的 4.运算 + - * / 数字，颜色，变量都可以计算 单位

简介 CSS预处理器，对CSS语言的扩展 功能 1.变量 声明：$height:200px; 在规则块外：都可以调用 在规则块内：只有准则块内调用 引用：height:$height 分隔：使用下划线或中划线，可以相互转化兼容 2.嵌套 eg: .a { b{ } } 扩展 父选择器标识符：& 群组选择器的嵌套(群组选择器：同时可以命中多个元素) 同层组合和子组合选择器 子组合:> 同级相邻：+ 同级间隔：~ 属性嵌套：把属性名从中划线-的地方断开，在

1 样式方法 行内：<div width="200px" height="200px"></div> 内部：<style> div {width:200px;height:200px;}</style> 外部：<link href="路径" type="text/css" rel="stylesheet"> 2 标签显示模式 块级：独占一行，宽、高、边框、内边距等有效 行内：共处一行，宽、高等无效 行内块：行内方式排列，但却有块级的属性 3

1 盒子模型 1.1 基本 边框 宽度——border-width 颜色——border-color 样式——border-style 合写——border:width color style 表格合并边框——border-collapse:collapse 内边距 ①单独样式 div{ padding-top:10px; padding-bottom:10px; padding-right:10px; padding-left:10px

1 文字属性 半透明：rgba(a,b,c,透明度) 文字阴影：text-shadow:水平位置 垂直位置 模糊距离 模糊颜色 2 背景 背景透明：background:rgba(a,b,c,透明度) 背景缩放：background-size：宽度 高度/cover/contain cover:按原图片比例缩放，直到完全铺满盒子，不会造成空白，可造成部分图片不可见。 contain:按原图比列缩放，直到完全显示在盒子内部，会造成空白，图片失真。 多背景：background:url(),url(),u