CSS（day03）

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 了

背景

1. 背景颜色

   background-color: 合法颜色;

2. 背景图片

   background-image: url("./img/06.png");

3. 背景图片的平铺
   background-repeat 平铺方式
   取值

   repeat 默认, 平铺
   no-repeat 不平铺
   repeat-x 水平方向平铺
   repeat-y 垂直方向平铺

4. 背景图片的定位
   background-position: x y;
   取值

   px 为单位的数字
   % 百分比

   关键字 X: left/center/right Y: top / center / bottom

5. 背景图片的尺寸
   background-size: X Y;
   取值

   取两个值, 是分别设置宽高

   取一个值, 是设置宽让高自适应

   px 为单位的数据

   % 百分比

   预定

   cover 覆盖, 要求容器被全部填满, 图片显示不全没有关系
   contain 包含, 让容器可以完全的包含图片, 图片必须显示完整, 容器如果有空白区域没关系

6. 背景图片的固定
   background-attachment
   取值

   scorll 默认值, 背景图会跟随滚动条而滚动

   fixed 固定, 背景图相对于页面固定不会跟随页面的滚动而滚动, 但是只会在原容器区域显示

7. 简写方式
   最精简方式 background: color/image;
background
   取值

   background: color image repeat attchment position;

写 CSS 的思路

从上往下写, 从左往右写, 从外往里写

找到目标元素, 写样式步骤

1、尺寸, 大体位置

2、边框, 背景

3、文字相关

4、微调（margin / padding）

渐变 gradient

渐变是指多种颜色, 平缓变化的一种显示效果
渐变的主要因素
色标, 一种颜色, 和它出现的位置
一个渐变最少两个色标

渐变有三个种类

1. 线性渐变, 以直线的方式来填充渐变色
2. 径向渐变, 以圆形的方式来填充渐变色
3. 重复渐变, 将线性, 径向渐变重复几次实现

• 线性渐变

  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

渐变属性兼容低版本浏览器的写法

1. 添加前缀

   兼容前缀	浏览器	浏览器内核
   -webkit-	chrome/safari	Webkit
   -moz-	firfox	Gecko
   -ms-	IE	Trident
   -o-	opera	Blink

   使用方式例如: background-image: -webkit-repeating-linear-gradient();

2. 线性渐变的方向, 发生了改变（加了前缀方向前面不可以有 to）
   top / right / bottom / left 这些方向代表着是起始渐变点

文本格式化（重要）

1. 字体属性
   ① 字体大小
   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