内容概述

一. 盒子模型

理解盒子模型：4个基本属性

• content

• padding

• border

• margin

屏幕快照 2020-02-12 下午4.25.13.png

content 内容相关属性

• width
  • min-width
  • max-width
• height
  • min-height
  • max-height

padding 内边距相关属性

• padding: 上右下左
• padding：是padding-top、padding-right、padding-bottom、padding-left的简写属性
  • 按照顺时针方向设值：top、right、bottom、left
  • 如果缺少left, 那么left就使用right的值
  • 如果缺少bottom, 那么bottom就使用top的

margin 外边距相关属性

• margin: 上右下左
• margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性
• 上下margin的传递
  • margin-top传递（常见）
    如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
  • margin-bottom传递（少见，一般都是设置top）
    如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
  • 如何防止出现传递问题？
    • 给父元素设置padding-top\padding-bottom
    • 给父元素设置border
    • 触发BFC:
      • 1 设置overflow（设置为auto、hidden等都可，只要不是visible就可）
      • 2 浮动也可以触发
  • 建议
    margin一般是用来设置兄弟元素之间的间距
    padding一般是用来设置父子元素之间的间距
• 上下margin的折叠
  • 垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
  • 水平方向上的margin（margin-left、margin-right）永远不会collapse
  • 折叠后最终值的计算规则：两个值进行比较，取较大的值
  • 如何防止margin collapse？
    • 只设置其中一个元素的margin
  • 块级元素折叠问题看似有点莫名其妙，实际上还是有实用之处的
    • 比如连续段落之间的margin，恰好需要这种折叠效果

border

• border: border-width border-style border-color

  • 边框颜色、宽度、样式的编写顺序任意
  • border-top、border-right、border-bottom、border-left
  • border：统一设置4个方向的边框

• 边框的形状可能是

  • 矩形、梯形、三角形等形状

  div {
    display: inline-block;
  }
  
  .box1 {
    width: 100px;
    height: 100px;
    background-color: #ffeaa7;
    border-top: 10px solid #fab1a0;
  }
  
  .box2 {
    width: 100px;
    height: 100px;
    background-color: #ffeaa7;
    border-top: 10px solid #fab1a0;
    border-left: 10px solid #6a89cc;
  }
  
  .box3 {
    border-top: 110px solid #fab1a0;
    border-left: 110px solid #6a89cc;
    width: 0;
    height: 0;
  }
  

屏幕快照 2020-02-12 下午3.40.28.png

• 屏幕快照 2020-02-12 下午3.43.26.png

• border实现其他效果

  • 比如三角效果

    .box1 {
      border-top: 100px solid #fab1a0;
      border-right: 100px solid #7bc4df;
      border-bottom: 100px solid #ffeaa7;
      border-left: 100px solid #8da5d8;
    }
    
    .box2 {
      border-top: 100px solid #fab1a0;
      border-left: 100px solid transparent;
      background-color: transparent;
      transform: rotate(45deg); 
    }
    
    .box3 {
      border-top: 100px solid #fab1a0;
      border-right: 100px solid transparent;
      border-bottom: 100px solid transparent;
      border-left: 100px solid transparent;
    }
    

    屏幕快照 2020-02-12 下午4.07.34.png

• 第三种写法是我自己想的，不需要像第二种那样旋转，方便理解

CSS属性 - border-*-*-radius

• border-*-*-radius
  • border---radius定义的是四分之一椭圆的半径
    • 第1个值是水平半径
    • 第2个值是垂直半径（如果不设置，就跟随水平半径的值）
  • 还可以设置百分比
    • 参考的是border-box的宽度
• border-radius
• border-radius大于或等于50%时，就会变成一个圆

行内级非替换元素的注意点

• 以下属性对行内级非替换元素不起作用
  • width、height、margin-top、margin-bottom
• 以下属性对行内级非替换元素的效果比较特殊
  • padding-top、padding-bottom、上下方向的border

二、盒模型的其他属性

CSS属性 - outline

• outline表示元素的外轮廓
  • 不占用空间
  • 默认显示在border的外面
• outline相关属性有
  • outline-width
  • outline-style：取值跟border的样式一样，比如solid、dotted等
  • outline-color
  • outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
• 应用实例
  • 调试技巧：查看网站的布局
    • outline: 1px solid red !important，outline不占空间，不会影响原布局，border会占据空间，导致格式变化
  • 去除 a/input/textarea 元素的focus轮廓效果
    • outline: none

CSS属性 - box-shadow

• box-shadow属性可以设置一个或者多个阴影
  每个阴影用<shadow>表示
  多个阴影之间用逗号,隔开，从前到后叠加

• <shadow>的常见格式如下

  • <shadow> = inset? && <length>{2,4} && <color>?，&&表示可以不按顺序
  • 第1个<length>：水平方向的偏移，正数往右偏移
  • 第2个<length>：垂直方向的偏移，正数往下偏移
  • 第3个<length>：模糊半径（blur radius）
  • 第4个<length>：延伸距离
  • <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色
  • inset：外框阴影变成内框阴影（很少用到）

• 练习：

  • 实现以下效果：左右都要有阴影
  屏幕快照 2020-02-12 下午9.30.24.png

.shadow {
  margin: 50px auto;
  width: 300px;
  height: 400px;
  /* box-shadow: -10px 10px 5px, 10px 10px 10px; */
  box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .2);
}

• 方法一：（注释起来的）设置两个阴影

• 方法二：box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .2);

• CSS属性 - text-shadow

  • 用法类似于box-shadow，用于给文字添加阴影效果
  • text-shadow同样适用于::first-line、::first-letter

CSS属性 - box-sizing

• box-sizing用来设置盒子模型中宽高的行为

  • content-box：padding、border都布置在width、height外边（W3C标准盒子模型）
    • 元素的实际占用宽度 = border + padding + width
    • 元素的实际占用高度 = border + padding + height
  • border-box：padding、border都布置在width、height里边（IE8以下浏览器）
    • 元素的实际占用宽度 = width
    • 元素的实际占用高度 = height
  屏幕快照 2020-02-12 下午8.38.03.png

元素的水平居中显示

• 在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）
  • 行内级元素、inline-block元素
    水平居中：在父元素中设置 text-align: center
  • 块级元素
    水平居中：margin: 0 auto

实现元素靠左靠右

• margin-left和margin-right的初始值为0，此时靠左
• 将margin-left改为auto即为靠右

垂直居中

实现垂直居中父元素height必须是auto
https://www.w3.org/Style/Examples/007/center.zh_CN.html
可以用绝对定位实现

作业

• 课堂代码
• 作业一 - 商品列表 - 页码列表
• 作业二: 考拉的导航右侧

1577180164959.png

• 笔记补充完善

提问

表单:

• input中的name和value的作用
  • name会在浏览器 - 提交给服务器作为key
  • value普通的input, button/radio/checkbox/option
• form元素中的常见属性
  • action: 服务器地址(URL)
  • method: 请求方式(get/post)
  • target: 打开方式
  • enctype
  • accept-charset

元素的分类:

• 是否可以在同一行显示
  • 块级元素(block level)
  • 行内级元素(inline-level)
• 是否会被浏览器替换掉
  • 替换元素(replaced elements)
  • 非替换元素(non-replaced elements)
• display属性常见的值:
  • block
  • inline
  • none
  • inline-block特点
    • 可以和其他内容在同一行显示
    • 设置宽度和高度

img/input/iframe -> 替换元素 ->没有说过是inline-block

• 可以在同一行显示
• 可以设置宽度和高度

inline-block

• 可以在同一行显示
• 可以设置宽度和高度
• 没有设置宽度和高度, 宽度和高度由内容决定

min: 最小

max: 最大

block -> block - block

inline -> inline - inline

inline-block -> inline - block

触发BFC

• BFC: block format context
• 结界

如何触发BFC:

• 浮动可以触发
• 设置一个元素的overflow为非visible
  • hidden
  • auto
  • scroll

content

• 宽度和高度

padding

margin

border