2017.11.22html笔记7

第六章 盒子模型
 1.盒子模型组成
  边框(border)
  外边距(margin)
  内边距(padding)
  盒子的内容(content)
 2.边框
  border-color:边框颜色
   border-top-color 上边框颜色
   border-right-color右边框颜色
   border-bottom-color 下边框颜色
   border-left-color 左边框颜色
  border-width:边框的宽度
   border-top-width
   border-right-width
   border-bottom-width
   border-left-width
  border-style:边框样式
   border-top-style
   border-right-style
   border-bottom-style
   border-left-style
  常见样式:
   none
   hidden
   dotted
   dashed
   solid
   double
  border:边框简写
   同时设置边框的颜色、粗细和样式
   例:border: 1px dashed red;
 3.外边距margin(CSS外边距是围绕在元素边框的空白区域)
  margin-top
  margin-right
  margin-bottom
  margin-left
  margin
 注意：margin:0px  auto;可以使元素居中对齐
 4. 内边距padding(元素的内边距在边框和内容区之间)
  margin-top
  margin-right
  margin-bottom
  margin-left
  margin
 5. 盒子模型的尺寸
  盒子模型总尺寸=border+padding+margin+内容宽度
 6.box-size
  content-box:默认值，盒子的总尺度
  border-box:盒子的宽度或高度等于元素内容的宽度或高度
   inherit:元素继承父元素的盒子模型模式
 7.圆角边框(border-radius)
  7.1 border-radius:x y z m;
   例:border-radius: 20px  10px  50px  30px
   注意:四个属性值按顺时针排列
  
  7.2 圆形
   a.元素的宽度和高度必须相同
   b.圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
   例:div{
             width: 100px;
             height: 100px;
             border: 4px solid red;
             border-radius: 50%;
         }
  7.3 半圆
   a.制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
   b.制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
  7.4 扇形
   a.“三同”是元素宽度、高度、圆角半径相同
   b.“一不同”是圆角取值位置不同
  7.5 盒子阴影
   box-shadow:inset  x-offset  y-offset  blur-radius  color;
   inset:阴影类型内阴影
   x-offset：X轴位移，指定阴影水平位移量
   y-offset:Y轴位移，用来指定阴影垂直位移量
   blur-radius:阴影模糊半径阴影向外模糊的模糊范围
   color:阴影颜色，定义绘制阴影时所使用的颜色