[note] CSS 盒模型|居中

内容概述

一. 盒子模型

理解盒子模型: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