CSS基础十四（CSS3属性/怪异盒子模型/flex布局）

怪异盒模型

• 标准盒模型：box-sizing:content-box
  • 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右
• 怪异盒模型：box-sizing:border-box ie8以下不支持
  • 盒子宽度 = 内容区的width + margin的左右

弹性盒布局(flex)

• 父元素
  • 形成弹性盒 display:flex;
  • 主轴对齐方式 justify-content
    • flex-start 默认值 主轴起点
    • flex-end 主轴终点
    • center 主轴中心
    • space-between 两端对齐
    • space-around 中间空隙是两边的2倍
    • space-evenly 平均分配
  • 交叉轴 align-items
    • stretch 默认值拉伸 (主轴是横向的话，看到该效果需要去掉子元素的高度，子元素的高会拉伸到和父元素一样高，主轴是纵向的话，看到该效果需要去掉子元素的度，子元素的宽会拉伸到和父元素一样宽)
    • flex-start 交叉轴的起点
    • flex-end 交叉轴的终点
    • center 交叉轴的中心
  • 主轴的方向 flex-direction
    • row 默认值 横向从左向右
    • row-reverse 横向从右向左
    • column 纵向从上到下
    • column-reverse 纵向从下到上
  • 换行 flex-wrap
    • nowrap 默认值 不换行
    • wrap 换行
  • 多行之间的对齐方式 align-content
    • stretch 拉伸
    • flex-start 整个盒子的起始
    • flex-end 整个盒子的终点
    • center 主轴中心
    • space-between 多行内容两端对齐
    • space-around 多行内容中间空隙是两边的2倍
    • space-evenly 多行内容平均分配
• 子元素
  • 子项在交叉轴的对齐方式 align-self 重写父元素中交叉轴对齐方式(align-items)
    • stretch 拉伸
    • flex-start 交叉轴的起点
    • flex-end 交叉轴的终点
    • center 交叉轴的中心
  • 排列顺序 order
    • 数值 值越大，越在后面排，可以为负数
  • 放大比例 flex-grow
    • 0 不放大
    • 数值
  • 压缩 flex-shrink
    • 1 默认值 压缩
    • 0 不压缩
    • 滚动导航的实现
      1. 设置子项不压缩 flex-shrink:0;
      2. 给父元素设置溢出显示滚动条 overflow-x:auto;
  • 子项的宽度 flex-basic:数值+px
  • 复合属性 flex:flex-grow(0) flex-shrink(1) flex-basic(auto);
    • flex:1; 子项占满整个剩余控件

利用弹性盒对盒子进行水平垂直居中

  父元素{
    display:flex;
    justify-content:center;
    align-items:center;
  }

css3新增的属性

• 盒子阴影 box-shadow: x轴偏移 y轴偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置
  • eg: box-shadow: 10px 10px 20px 10px green inset;
• 文字阴影 text-shadow:x轴偏移 y轴偏移 阴影模糊大小 阴影颜色
  • eg: text-shadow: 10px 10px 10px blue;
• 圆角 border-radius:
  • 一个值 四周
  • 两个值 对角
  • 三个值 左上 对角 右下
  • 四个值 顺时针
• 背景图的大小 background-size: 宽度 高度
  • 百分比 可能会变形
  • 像素
  • 关键字
    1. cover 背景图会不断放大 直到充满整个盒子，可能会出现裁切的情况
    2. contain 背景图会不断的放大 碰到边缘后就停止放大，可能会出现留白

背景图的固定

• background-attachment:srcoll/fixed(固定) 背景图不会随滚动条滚动

元素类型

• 置换元素：浏览器会根据标签以及标签内的属性值来显示不同的内容
  input的type类型
  img的src
  textarea的内容在变
  select中的option内容会变
• 非置换元素:除了置换元素
• 为啥img或者input有的标签可以设置宽高？？因为标签属于置换元素

字体图标的使用

• 普通字体图标的使用
  • 搜索对应的图片，点击加入购物车
  • 完成后点击 添加至项目
  • 下载项目到本地站点，解压文件，不要删除任何文件
  • 在使用图标的文件地方 用link引入iconfont.css文件

      <link rel="stylesheet" href="download/font_2135748_v7l4jintarp/iconfont.css">
    

  • 使用，必须加 iconfont的名字，其次添加所需图片的class名

      <span class="iconfont icon-jipiao">哈哈哈</span>    
    

• 彩色图标的使用
  • 引入js文件

      <script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>
    

  • 添加通用样式

      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    

  • 使用 只需要改id名就行

     <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-tubiaov-daochushangchuan-"></use>
     </svg>
    

con" aria-hidden=“true”>


```