尺寸与边框(溢出), 框模型, 背景属性

1. 尺寸与边框

1. 1. 尺寸属性

1.1.1. 宽度

• 属性: 以 px 或 % 作为单位
  1. width: 宽度
  2. max-width: 最大宽度
  3. min-width: 最小宽度

1.1.2. 高度

• 属性:
  1. height: 高度
  2. max-height: 最大高度
  3. min-height: 最小高度

1.1.3. 页面中允许修改尺寸的元素

• 块级元素全部允许修改

• 绝大部分行内块元素允许修改( radio 和 checkbox 除外 )

• 元素本身( html 元素 )具备 width 和 height 的话是允许修改尺寸的

  <img />: 行内元素, 但允许修改尺寸

  <table></table>: table 元素, 但允许修改尺寸

• 绝大部分的行内元素" 不能修改尺寸 "

1.1.4. 溢出

当使用尺寸属性限制元素大小时, 如果内容所需空间大于元素本身, 则会产生溢出

• 属性:
  • overflow: 横纵向溢出处理
  • overflow-x: 横向溢出处理
  • overflow-y: 纵向溢出处理
• 取值:
  • visible 默认值 -> 显示
  • hidden 隐藏
  • scroll 滚动 -> 默认情况下显示滚动条, 溢出可用
  • auto 自动, 溢出时显示滚动条并可用, 没溢出时, 没区别

1.2. 边框

1.2.1. 边框

1. 简写属性:

   • border: width style color; (√常用)

     • width: 边框宽度 以 px 为单位

     • style: 边框样式( solid: 实线 dotted: 点状虚线 dashed: 线状虚线 )

     • color: 边框颜色 合法的颜色值, 也可以为 transparent( 透明 )

     注意: border: 0; 或 border: none;( 此时, 0就不加单位, 会影响浏览器执行效率 )

2. 单边定义

   定义某方向边框的所有属性

   • 语法：border-方向: width style color;
     • 方向: top / right / bottom / left;

3. 单属性定义

   定义四条边框的某个属性值

   • 语法: border-属性: 值;
     • 属性: width / style / color

4. 单边单属性定义

   • 语法: border-方向-属性: 值; -> EX: 上边框颜色为红色: border-top-color: red;

1.2.2. 边框倒角

• 定义

  将元素四个角的直角倒换成圆角

• 语法

  • 属性: border-radius ( √常用 )
  • 作用: 设置四个角的倒角圆的半径
  • 取值: px 或 % ( 50%用的很多, 成圆形 )
    • 取一个值: 表示四个角的半径相同
    • 取四个值: 表示从左上角开始, 按顺时针方向( 左上 右上 右下 左下 )
  • 单角定义:
    • border-top-left/right-radius
    • border-bottom-right/left-radius

1.2.3. 边框阴影( 元素阴影, 盒子阴影 )

• 语法
  • 属性: box-shadow
  • 取值: 由 空格 隔开的值列表, 指定了阴影的多个属性值
  • box-shadow: h-shadow v-shadow blur spread color inset;
    • h-shadow:
      • 阴影的水平偏移距离, 必须的
      • 取值为正, 阴影右偏移
      • 取值为负, 阴影左偏移
    • v-shadow:
      • 阴影的垂直偏移距离, 必须的
      • 取值为正, 阴影下偏移
      • 取值为负, 阴影上偏移
    • blur: 可选, 模糊距离
    • spread: 可选, 阴影大小
    • color: 可选, 颜色
    • inset: 可选值, 将默认的外阴影改为内阴影

1.2.4. 轮廓

1. what

   绘制元素边框外的一条线

2. 语法

   • 属性: outline: width style color;
   • outline-width: 轮廓宽度
   • outline-style: 轮廓样式
   • outline-color: 轮廓颜色
   • outline: none; 或 outline: 0;

2. 框模型

2.1. 框模型

• 框: Box, 主要作用是为了盛装内容, 页面所有元素皆为框
• 框模型: Box Model，定义了元素框处理元素内容, 内边距, 边框 和 外边距的方式
• table:
  • cellspacing: 单元格 外边距 -> 外边距
  • cellpadding: 单元格 内边距 -> 内边距
• 当框模型属性 介入到元素中的时候, 元素的整体占地区域 会发生改变
  • 元素整体宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;
  • 元素整体高度 = 上下外边距 + 上下边框 + 上下内边距 + height;
  • 元素可见宽度( 边框内 ) = 左右边框 + 左右内边距 + width;
  • 元素可见高度( 边框内 ) = 上下边框 + 上下内边距 + height;

2.2. 外边距

2.2.1. 什么是外边距

围绕在元素边缘( 边框 )周围的空白区域就是外边距

2.2.2. 语法

1. 属性: margin margin-top / margin-right / margin-bottom / margin-left

2. 取值:

   1. 单位 px: 具体数值

   2. 百分比 %: 占据父元素对应的属性( 宽或高 )的占比

   3. auto:

      • 自动, 让块级元素水平居中

      • 默认情况下, auto 只对左右外边距有效, 上下无效, 自动计算左右外边距的宽度, 从而实现让块级元素水平居中

      注意: 必须设置 当前元素宽度 要小于 父元素宽度才会生效

   4. 负数: 移动元素

      向相反的反向移动元素

      • margin-left:
        • 取值为正, 向右移动元素
        • 取值为负, 向左移动元素
      • margin-top:
        • 取值为正, 向下移动元素
        • 取值为负, 向上移动元素

3. 简洁写法:

   1. margin: value;: 指定 四个方向 的外边距 -> EX: margin: 10px;
   2. margin: v1 v2;:
      • v1: 上下 外边距
      • v2: 左右 外边距
      • EX: margin: 10px 5px; margin: 0 atuo;
   3. margin: v1 v2 v3;:
      • v1: 上外边距
      • v2: 左右外边距
      • v3: 下外边距
      • EX: margin: 5px auto 0;
   4. margin: v1 v2 v3 v4;:
      • v1: 上外边距
      • v2: 右外边距
      • v3: 下外边距
      • v4: 左外边距
      • EX: margin: 30px 0 30px 30px;

2.2.3. CSS 重写

• 页面上有一些元素默认会具备外边距 -> EX: p, h1~h6, ol, ul, dl, pre
• 在开发网页时, 会将具备默认外边距的元素中的外边距设置为 0
  • body, p, h1, h2, h3, h4, h5, h6, ol, ul, dl, dd, pre { margin: 0; }

2.2.4. 外边距特殊效果

• 外边距合并:

  当两个垂直外边距相遇时, 他们将合并成一个外边距, 距离以数据大的值为主

• 外边距的溢出:

  在某种条件下, 为子元素设置上外边距有可能会作用到父元素上

  • 条件:

    1. 父元素没有上边框
    2. 为第一个子元素设置上外边距时

  • 解决方案:

    1. 为父元素加上边框 可以设置为透明 弊端: 会增加父元素高度

    2. 用父元素上内边距 padding-top 取代子元素上外边距 margin-top 弊端: 会增加父元素高度

    3. 给父元素里面的第一个子元素位置处增加空 table 弊端: 多一个元素

    4. 父元素中使用 overflow: hidden 弊端: 有时会遮挡子元素

    5. 在 CSS3 高级中解决给父元素添加伪类

    父元素:before{
      content:''; display: table
    }
    

• 行内元素 和 行内块元素的上下外边距

  1. 行内元素的上下外边距无效 -> img 元素除外

  2. 行内块元素的上下外边距, 整行数据都会产生变化

2.3. 内边距

2.3.1. 什么是内边距

• 内容区域与边框( 边缘 )之间的距离
• 内边距会扩大元素边框的占地区域, 但不影响元素内容的原有尺寸

2.3.2. 语法

1. 属性
   1. padding
   2. padding-top / padding-right / padding-bottom / padding-left
2. 取值
   • 以 px 为单位的数值
   • 以 % 为单位的数值
   • auto
3. 简洁写法: 同 margin
   1. padding: value;: 四个方向内边距
   2. padding: v1 v2;: 上下 左右
   3. padding: v1 v2 v3;: 上 左右 下
   4. padding: v1 v2 v3 v4;: 上 右 下 左

注意: 为行内元素设置 上下内边距 时, 只会影响自己, 不会影响其他元素

2.4. box-sizing 属性

• 作用: 指定元素的尺寸计算模式

• 默认:

  • 元素可见宽度 = 左右边框 + 左右 padding + width

    div{
      width: 200px; padding: 0 15px; border: 1px solid #000;
    }
    

    元素的可见宽度: 232px

• 语法:

  1. 属性: box-sizing
  2. 取值:
     1. content-box: 元素的 width 只是包含内容区域的宽度, 内边距 和 边框 要额外加在 width 上再计算 -> height 同理
     2. border-box(√常用): 元素的 width 属性值, 会包含边框以及内边距

3. 背景属性

3.1. 背景色

• 属性: background-color
• 取值: 合法颜色值 或 transparent

注意: 背景色是从边框位置处开始绘制的

3.2. 背景图像

• 属性: background-image
• 取值: url( 图像路径 )

3.3. 背景平铺

• 属性: background-repeat
• 取值:
  1. repeat: 默认值, 在垂直和水平方向都平铺
  2. no-repeat: 不平铺, 背景图仅显示一次
  3. repeate-x: 仅在水平方向平铺
  4. repeat-y: 仅在垂直方向平铺

3.4. 背景图片尺寸

• 属性: background-size
• 取值:
  1. width height: 指定背景图宽和高
  2. value1% value2%: 采用背景图所在的元素的尺寸占比作为背景图像的尺寸
  3. cover: 覆盖 将背景图等比放大, 直到背景图像覆盖到了元素的所有区域为止
  4. contain: 包含 将背景图等比放大, 直到背景图的右边或下边碰到元素边缘为止

3.5. 背景图片固定

• 作用: 让背景图一直在可视化区域内, 不会随着滚动条而发生位置的变化 通常为 body 设置 背景图 以及 固定
• 属性: background-attachment
• 取值:
  1. scroll: 滚动 默认值
  2. fixed: 固定

3.6. 背景定位

• 作用: 改变背景图在元素中的位置
• 属性: background-position
• 取值:
  1. x y:
     • x: 横向偏移距离
       • 取值为正, 背景图右偏移
       • 取值为负, 背景图左偏移
     • y: 垂直偏移距离
       • 取值为正, 背景图下偏移
       • 取值为负, 背景图上偏移
  2. x% y%:
     • 0% 0%: 背景图靠近元素左上角
     • 100% 100%: 背景图靠右下角
     • 0% 100%: 背景图靠左下角
     • 100% 0%: 背景图靠右上角
  3. 关键字
     1. x: left / center / right
     2. y: top / center / bottom

3.7. 背景属性

背景所有属性的简写方式

• 语法: background: color url() repeat attachment position
• 以上属性值, 可以按照需求去写, 不需要的话可以省略, 省略则采用默认值
• 常用模式: background：url() repeat position;

注意: 改变背景某一属性时, 必须加上属性, 不能简写