T-CSS基础-day02-尺寸和边框、框模型

四.尺寸和边框

1. 尺寸
   设置元素在页面中的宽高（对高度设置比较少，更关注宽度的设置）
   width:取值：以px为单位的数字；rem为单位的数字；%父元素宽度百分比
   height:取值：以px为单位的数字；rem为单位的数字；%：父元素没有定义高度，就失效。父元素有定义高度，就是这个高度的百分比（要注意）
   在不写死宽高属性时（百分比可以），还可以设置下列四个属性：
   max-width 限制元素最大的宽度
   min-width 限制元素最小的宽度
   max-height 限制元素最大的高度
   min-height 限制元素最小的高度
   注意，如果给img设置 max-width:100%;：不是父元素的100%，这里的100%是图片原始尺寸的100%；意味着，这张图片可以缩放，但是最大不能超过本身原始尺寸的100%

---

附加知识点----单位
尺寸的单位

1. 绝对单位
   1. px 像素
   2. in 英寸 1in=2.54cm
   3. pt 磅值，多用于定义字号大小：1pt=1/72in
   4. cm
   5. mm
2. 相对单位
   1. em：以父元素设置的值为一个基本单位，1.5em。就是1.5个基本单位
   2. rem：以html标签设置的值为一个基本单位
      如果html没有设置值，1rem默认为16px
   3. %：多数是父元素设置值的百分比

---

2. 页面中可以设置尺寸的元素
   1. 所有块级元素都可以设置尺寸
   2. 大多数行内元素不能设置尺寸
   3. 所有行内块可以设置尺寸(input)
   4. 所有自带宽高属性的元素，都可以设置宽高(如：img)
3. 元素默认的宽高值是多少

块级	行内	行内块
不写宽度，默认宽度是父元素的100%；不写高度，高度靠内容撑开，如果没有内容，高度为0	不写宽高时，宽高都是靠内容撑开。没有内容就为0（如果在当前行还要有其他行内元素，则宽为0，高为同行行内元素的高度）	不写宽高，浏览器会给一个默认的宽高；但是，不同浏览器给的默认宽高，大小不同；input是不同浏览器差异最大的元素，需要写css reset

4. 溢出的处理
   当内容较大，元素区域较小，就会发生溢出效果
   默认都是纵向溢出：
   overflow: visible; 默认值，溢出部分可见；hidden； 溢出部分不显示；scroll； 显示滚动条；auto；不溢出就没有滚动条，溢出才有
   overflow-x: 设置水平轴溢出
   overflow-y: 设置竖直轴溢出
   实现横向溢出的方式：
   需要在比较宽的容器上，添加一个窄的父元素，给这个父元素写溢出属性
   溢出的底层很特殊很复杂，可以解决很多css中的特殊问题
   但是，最佳方案都不是用溢出解决

---

附加知识点—合法的颜色值

1. 英文单词(red ,green,yellow…)
2. 16进制取色：#rrggbb 6个16进制的值 #000000 黑色_{#ff0000红色-#00ff00绿色-#0000ff蓝色}#ffffff 白色
   r->red g->green b->blue
   红黄蓝(黄品青)–美术上–印染三元色—折射光
   红绿蓝—显示器—光学三原色—自发光
3. 当出现#rrggbb时—>简写为#rgb #069—>#006699 #36d—>#3366dd
   #f00红 #0f0绿 #00f蓝 #ff0黄 #0ff浅蓝 #f0f粉 #ddd 浅灰
4. 十进制取色： rgb(r,g,b) 每一个参数的取值范围 0~255 0~ff
   例：rgb(255,0,0)红色 rgb(0,255,0)绿 rgb(0,0,255)蓝
5. rgba(r,g,b,a) alpha透明度，a取值0~1 ，1为不透明，0为全透明（css中所有小数可以缩写，例0.4->.4）
6. 其他不常用的颜色取值方式：
   1. rgb(r%,g%,b%) 0_100%为0255的百分比
   2. hsl(h,s,l) 色段，饱和度，亮度

---

5. 边框
   1. 边框的简写方式，同时定义4个方向的边框
      border: width style color;
      1. width: 边框的宽度
      2. style: 边框的样式。取值：solid 实线；dotted 虚线(点)；dashed 虚线(短线)；double双实线
      3. color:边框的颜色,可以取合法的颜色值，transparent（全透明）等价于rgba(,,,0)
      4. 细节：
         ①最简方式 border:style;：不写样式，边框不显示
         ②去除边框 border:0;或border:none;（常用0，因为0一个字符，none4个字符，响应数据越少越好）；

      ---

      练习
      03_ex.html 创建一个div，id为container，尺寸200px*200px
      设置4个方向边框为1px，实线，orange

      ---

   2. 单边的定义（按照上右下左的顺序定义）
      单独定义一条边的3个属性
      border-top/right/bottom/left: width style color;
   3. 单属性的定义
      同时设置4条边的某一个属性
      border-width
border-style
border-color
   4. 单边单属性定义（以上边框为例）
      border-top-width
border-top-style
border-top-color
   5. 边框的倒角
      把边框倒成圆角
      一次性过设置4个角
      border-radius:
      取值:
      ①以px为单位的数字；
      ②% ：长宽一直时，设置50%就是正圆
      单角的设置：（两边的夹角，由俩边决定是哪一个角，要按照先写上下，在写左右的顺序写）
      border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
   6. 边框阴影(跟边框没关系)
      box-shadow:h-shadow v-shadow blur spread color;：设置边框的阴影
      h-shadow 阴影水平偏移量
      v-shadow 垂直偏移量
      blur 阴影的模糊程度
      spread 阴影大小
      color 阴影的颜色
      阴影的最简方式 ：box-shadow:h-shadow v-shadow；
      内部阴影：box-shadow:h-shadow v-shadow blur spread color inset；即：在原有基础上加inset

      ---

      练习：做一个月偏食

      ---

   7. 轮廓（不是所有元素都有轮廓）
      绘制于边框外的线条
      outline:width style color;
outline:0;取消轮廓（常用）

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

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

---

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

---

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. 内边距
4. 设置框模型计算方式