box-sizing
定义盒子模型的计算方式
box-sizing: content-box;
默认
我们定义的宽高是在定义内容区域的宽高
元素占地宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
box-sizing: border-box;
我们定义的 width/height 包含了 border 和 padding
元素占地宽度 = margin-left + width + margin-right
box-sizing: border-box;
使用时机, 一个容器内, 在一行显示多个元素, 如果子元素的 width 使用 %定义, 那么基本就要使用 border-box 了
背景
-
背景颜色
background-color: 合法颜色;
-
背景图片
background-image: url("./img/06.png");
-
背景图片的平铺
background-repeat
平铺方式
取值repeat
默认, 平铺
no-repeat
不平铺
repeat-x
水平方向平铺
repeat-y
垂直方向平铺 -
背景图片的定位
background-position: x y;
取值px
为单位的数字
%
百分比关键字 X:
left
/center
/right
Y:top
/center
/bottom
-
背景图片的尺寸
background-size: X Y;
取值取两个值, 是分别设置宽高
取一个值, 是设置宽让高自适应
px
为单位的数据%
百分比预定
cover
覆盖, 要求容器被全部填满, 图片显示不全没有关系
contain
包含, 让容器可以完全的包含图片, 图片必须显示完整, 容器如果有空白区域没关系 -
背景图片的固定
background-attachment
取值scorll
默认值, 背景图会跟随滚动条而滚动fixed
固定, 背景图相对于页面固定不会跟随页面的滚动而滚动, 但是只会在原容器区域显示 -
简写方式
最精简方式background: color/image;
background
取值background: color image repeat attchment position;
写 CSS 的思路
从上往下写, 从左往右写, 从外往里写
找到目标元素, 写样式步骤
1、尺寸, 大体位置
2、边框, 背景
3、文字相关
4、微调(margin / padding)
渐变 gradient
渐变是指多种颜色, 平缓变化的一种显示效果
渐变的主要因素
色标, 一种颜色, 和它出现的位置
一个渐变最少两个色标
渐变有三个种类
- 线性渐变, 以直线的方式来填充渐变色
- 径向渐变, 以圆形的方式来填充渐变色
- 重复渐变, 将线性, 径向渐变重复几次实现
-
线性渐变
background-image: linear-gradient(方向, 色标1, 色标2...)
方向: 取值
关键字
to bottom
/to right
/to left
/to top
角度值
deg
度数的单位0deg
-> to top /90deg
-> top right /180deg
-> to bottom /270deg
-> to left注释: 色标
color-point
:取值:
颜色 + 位置
1、只写颜色不写位置, 一般用于有两个色标, 对应开头和结尾linear-gradient(0deg, #000, #0ff)
2、颜色 + px 为单位的数字linear-gradient(45deg, #000, #0ff)
3、颜色 + % 百分比 -
径向渐变
background-image: radial-gradient(半径, at 圆心, 色标1, 色标2...)
半径的取值
px 为单位的数字
圆心取值
以
px
为单位的数字x
和y
两个值 确定圆心x%
y%
关键字 x:
left
/center
/right
y:top
/center
/bottom
色标的取值
颜色 + px 颜色的填充, 就与半径没有关系了
颜色 + % 这里的位置, 是半径的 % -
重复渐变
background-image: repeating-linear-gradient();
重复的线性渐变
background-image: repeating-radial-gradient();
重复的径向渐变
浏览器兼容问题(IE8.0以下不兼容)
为了兼容低版本浏览器写的 CSS 代码叫做 css-hack
渐变属性兼容低版本浏览器的写法
-
添加前缀
兼容前缀 浏览器 浏览器内核 -webkit-
chrome/safari Webkit -moz-
firfox Gecko -ms-
IE Trident -o-
opera Blink 使用方式例如:
background-image: -webkit-repeating-linear-gradient();
-
线性渐变的方向, 发生了改变(加了前缀方向前面不可以有 to)
top
/right
/bottom
/left
这些方向代表着是起始渐变点
文本格式化(重要)
-
字体属性
① 字体大小
font-size
取值px / pt / em / rem
② 设置字体系列
font-family
取值pc 中字体库有的字体, 如果字体名称带空格, 必须加 “” 多个字体名称, 使用 逗号隔开
font-family: "华文湖泊", Arial, Helvetica, sans-serif;
③ 字体权重(加粗)
font-weight
取值关键字:
lighter
/normal
/bold
/bolder
无单位, 100 的整倍数, 最大值为 1000④ 字体样式
font-style
取值italic
/normal
⑤ 小型大写字母
font-variant
取值normal
/small-caps
⑥ 简写模式
font: style variant weight size family;
最简写法 :只保留 size 和 family