T-CSS基础-day03-框模型、背景、渐变

五.框模型(又叫盒子模型)

框模型----元素在页面上实际占地空间的计算方式(计算公式)

---

默认的盒子模型：
元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
元素实际占地高度=上外边距+上边框+上内边距+内容区域高度+下内边距+下边框+下外边距

---

1. 外边距（行内元素上下外边距无效）
   改变外边距，元素会发生位移效果，做元素位置微调的时候可以使用外边距，外边距是透明的
   注意：当4个方向外边距发生了冲突，保证左和上准确
   1. 语法
      margin:v1; 同时设置4个方向外边距
      设置单独四个方向：
      margin-top:
margin-right
margin-bottom
margin-left
      取值：
      ①以px为单位的数字；
      ②% 以父元素的宽度的百分比；
      ③auto 使上下外边距无效
      margin:auto;：让块级元素（行内块也不行）水平居中（块级元素必须定义了宽度）
      margin:auto;等价于margin-left:auto;margin-right:auto;
   2. 简写方式
      margin:v1; ：同时设置4个方向外边距
      margin:v1 v2; ：v1:设置上下 v2:设置左右；衍生写法：margin:0 auto; margin:20px auto;
      margin:v1 v2 v3; ：v1:上 v2:左右 v3:下
      margin:v1 v2 v3 v4; ：上右下左
      margin的使用时机：元素位置的微调

      ---

      练习
      04_ex.html
      创建两个div，尺寸都是300px*300px,背景颜色区分开
      设置两个div之间的间距为50px.尝试以下三个方案
      方案1.给上边div设置50
      方案2.给下边div设置50
      方案3.两个div设置的和是50

      ---

2. 外边距的特殊情况

   1. 外边距的合并
      两个垂直外边距相遇时，会合并成一个
      值以大的为准
      解决方案：设计的时候规避（单方面的设置）

      ---

      练习
      05_ex.html
      两个div,宽高200px，设置不同背景色--------块级
      为两个div设置4个方向外边距，f12观察效果
      两个span，内容随意-------------------------行内
      为两个span设置4个方向外边距，f12观察效果
      两个input -----------------------------------行内块
      为两个input设置4个方向外边距，f12观察效果

      ---

   2. 完整的块级元素，行内块，行内元素的区别

      块级	行内	行内块
      单独成行	与其他行内和行内块共用一行	与其他行内和行内块共用一行
      可以设置宽高	设置宽高无效	可以设置宽高
      不设置宽高；宽是父元素宽度100%；高靠内容撑开	不设置宽高；宽高都靠内容撑开	不设置宽高；不同浏览器默认给不同的宽高
      4个方向外边距都生效	上下外边距失效	4个方向外边距都生效，设置一个行内块的上外边距，会带着当前行的其他行内块和行内元素一起移动

   3. 默认自带外边距的元素
      body(8px) ，h1~h6 ，p ，ul ，ol

      ---

      练习
      06_ex.html
      两个div，#d1和#d2 尺寸200200，设置不同背景色
      在d2添加一个div#d3，100100，设置不同背景色
      给#d3添加上外边距，观察效果

      ---

   4. 外边距的溢出
      外边距溢出是怎么发生的
      在特殊的情况下，为子元素设置上外边距，会作用到父元素

      1. 特殊情况：
         1. 父元素没有上边框
         2. 子元素内容区域的上边沿，与父元素内容区域的上边沿重合（不严谨说法：为第一个子元素设置上外边距时，会发生上外边距溢出）
      2. 解决方案：
         1. 给父元素添加上边框，弊端：增加了父元素的实际占地高度
         2. 给父元素添加一个上内边距，弊端：增加了父元素的实际占地高度
         3. 给父元素添加overflow:hidden/auto;，弊端：如果想要溢出部分可见，就不能用了
         4. 完美的解决方案，在父元素第一个儿子的位置，添加一个空table元素（table不属于块级，行内，行内块）
3. 内边距
   边框到内容区域之间的距离
   改变内边距，视觉上是改变元素大小，但是元素的尺寸并没有改变。内边距的颜色，就是元素的背景色
   内边距的使用场合：撑开元素
   padding没有auto
padding:v1; 设置4个方向内边
   padding-top
padding-right
padding-bottom
padding-left
   简写方式：
   padding:v1;
padding:v1 v2; ：v1上下，v2左右
   padding:v1 v2 v3;：v1上，v2左右，v3下
   padding:v1 v2 v3 v4;：v1上，v2右，v3下，v4左
4. 设置框模型计算方式
   默认：
   元素实际占地宽度=左外边距+左边框+左内边距+内容区域宽度+右内边距+右边框+右外边距
   改变框模型的计算方式：
   box-sizing:content-box;：默认的框模型计算方式；
   box-sizing:border-box;：设置width包含：内容区+padding+border
   即：元素实际占地宽度=设置width+左右外边距
   当内部元素的尺寸使用百分比设置的时候，一般都要使用border-box

六.背景

1. 背景颜色
   background-color：合法颜色值 包含：transparent（全透明）
2. 背景图片
   background-image: url(09.png);：资源加双引号，单引号，不加引号都正确
3. 背景图片的平铺
   background-repeat: repeat;：repeat默认值，平铺
   其他属性：①no-repeat：不平铺；②repeat-x：x轴平铺；③repeat-y：y轴平铺
4. 背景图片的定位
   background-position:
   取值：①. x，y以px为单位的数字；②. x%，y%；③. 关键字 x：left/center/right y：top/center/bottom
   PS.例，当background-postion:20%：当只取一个值，意为只设置x轴位置，默认y轴center
5. 设置背景图片的尺寸
   background-size: 500px;
   取值：
   ①1个值：同时设置x,y轴大小；
   ②2个值：分别设置x,y轴大小；
   ③以px为单位的数字
   ④%
   其他的取值：
   ⑤cover 背景图片等比例缩放，完全充满容器，背景图有可能显示不完整
   ⑥contain背景图等比例缩小，让容器显示一张完整的背景图，容器可能有空白
6. 背景图片的固定
   background-attachment:
scroll;：默认值，背景图随着页面滚动条，滚动
   fixed;：背景图相对于body固定，不随着页面滚动条滚动。只会显示在本容器中，当图片进行定位时，相对于body去定位
7. 简写方式
   background：color url() repeat attachment position;
   注意，简写方式中没有size
   最简方式：background:color或background:url()
   使用简写方式哟注意，谨慎用简写方式去替换之前的部分样式，可能发生覆盖

七.渐变（gradient）

1. 什么是渐变
   渐变是指多种颜色，平缓变化的一种效果
2. 渐变的主要因素
   色标：包含一种颜色和这种颜色出现的位置（如果不写位置，默认平均分配区域）
   一个渐变至少两个色标
3. 渐变的分类
   1. 线性渐变（必须掌握）：以直线的方式填充渐变色
   2. 径向渐变：以圆的方式填充渐变色
   3. 重复渐变：将线性，径向，反复的实现
4. 线性渐变
   属性：background-image:
   取值：linear-gradient(方向,色标1,色标2,...)
   方向：
   1. 关键字：写终点 to top ↑ ；to right →；to bottom ↓；to left ←。
   2. 角度值：0deg=to top；90deg=to right；180deg=to bottom；270deg=to left；
5. 径向渐变
   background-image: radial-gradient(半径 at 圆心x轴坐标 圆心y轴坐标 ，色标1，色标2，...);
   半径：以px为单位的数字
   圆心：
   1.关键字：x:left/center/right y:top/center/bottom
   2.以px为单位的数字
   3.%
   色标：
   1.位置使用%，是半径的百分比
   2.位置使用px，使用px跟半径没关系了（即：只有色标位置使用%，半径才有意义，若使用px则半径无意义）
6. 重复渐变
   1. 重复的线性
      background-image: repeating-linear-gradient(方向,色标1,色标2,...)
   2. 重复的径向
      background-image: repeating-radial-gradient(半径at 圆心x轴坐标 圆心y轴坐标,色标1,色标2,... )
7. 线性渐变的浏览器兼容性问题（IE8.0以下不考虑）
   写css兼容的行为，叫做写css hack
   在代码中添加，代表内核的前缀
   -webkit-：chrome/safari浏览器
   -moz-：firefox浏览器
   -o-：opera浏览器
   -ms-：IE浏览器
   如果线性渐变，添加了前缀做兼容，方向一定写起点（不能有to），不能写终点；不添加前缀，方向要加to，写终点。如果要想做兼容，至少写4套

   /* 写兼容 */
   background: -moz-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%); 
   background: -webkit-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%)
   ;background: -o-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
   background: -ms-linear-gradient(top, #27b0f6 0%, #0aa1ed 100%);
   /* 不写兼容 */
   background: linear-gradient(to top, #27b0f6 0%, #0aa1ed 100%); 
   

初学者写样式步骤

1. 找到要写样式的元素
   1. 先写外，在写内，从外往里写
   2. 先写上，在写下，从上往下写
   3. 先写左，在写右，从左往右写
2. 写样式步骤
   1. 先写宽高，大体位置
   2. 边框，背景色
   3. 文本所有样式
   4. 微调