2020年4月30日总结(二)

一、元素的类型

1.1.inline-block

• 可以让元素同时具备块级、行内级元素的特征

  • 跟其他行内级元素在同一行显示
  • 可以随意设置宽高
  • 宽高默认由内容决定

• 可以理解为：

  • 对外来说，是一个行内级元素
  • 对内来说，是一个块级元素

• 常见用途

  • 让行内级非替换元素(比如a、span等)能够随时设置宽高
  • 让块级元素(比如div、p等)能够跟其他元素在同一行显示

1.2.visibility

• visibility，能控制元素的可见性，有两个常用值：

  • visible: 显示元素
  • hidden: 隐藏元素

• display: none;和visibility: hidden;的区别：

  • visibility: hidden;虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
  • display: none;不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置

1.3.overflow

• overflow用于控制内容溢出时的行为

  • visible：溢出的内容照样可见

  • hidden：溢出的内容直接裁剪

  • scroll：溢出的内容被裁剪，但可以通过滚动机制查看

    • 会一直显示滚动条区域，滚动条区域占用的空间属于width、height

  • auto：自动根据内容是否溢出来决定是否提供滚动机制

  • 还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向

1.4.元素之间的空格

• 目前建议的解决方法：

  • 1.元素代码之间不要留空格

  • 2.注释钓空格

  • 3.设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size

    • 此方法在Safari不适用

  • 4.给元素加float(建议)

1.5.注意点：

• 块级元素、inline-block元素

  • 一般情况下，可以包含其他任何元素(比如块级元素、行内级元素、inline-block元素)
  • 特殊情况，p元素不能包含其他块级元素

• 行内元素(比如a、span、strong等)

  • 一般情况下，只能包含行内元素

二、盒子模型

2.1.盒子模型

• HTML中每一个元素都可以看成一个盒子

  • 内容(content)

    • 盒子里面装的东西

  • 内边距(padding)

    • 盒子边缘和里面装的东西之间的间距

  • 边框(border)

    • 就是盒子的边框，边缘部分

  • 外边距(margin)

    • 盒子和其他盒子之间的间距

2.2.内容相关属性

• width：宽度
• min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
• max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
• height：高度
• min-height：最小高度，无论内容多少，高度都大于或等于min-height
• max-height：最大高度，无论内容多少，高度都小于或等于max-height

2.3.内边距相关属性

• padding-left：左内边距
• padding-right：右内边距
• padding-top：上内边距
• padding-bottom：下内边距
• padding：时padding-top、padding-right、padding-bottom、padding-left的简写属性
• padding的取值规律：
  • 按照顺时针方向取值：top、right、bottom、left
  • 如果缺少left，那么left就使用right的值
  • 如果缺少bottom，那么跟随top的值

2.4.word-break：

• word-break: break-all;就可以在文本中换行

2.5.外边距相关属性

• margin-left：左外边距
• margin-right：右外边距
• margin-top：上外边距
• margin-bottom：下外边距
• margin：是margin-top、margin-right、margin-bottom、margin-left的简写属性
• margin的取值规律：
  • 按照顺时针方向取值：top、right、bottom、left
  • 如果缺少left，那么left就使用right的值
  • 如果缺少bottom，那么跟随top的值

2.6.上下margin的传递

• margin-top传递

  • 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top的值会传递给父元素

• margin-bottom传递(不常用)

  • 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么块级元素的margin-bottom值会传递给父元素

• 如何防止出现传递问题？

  • 给父元素设置padding-top\padding-bottom
  • 给父元素设置border
  • 触发BFC(block format context)
    • 结界
    • 浮动可以出发
    • 设置一个元素的overflow为auto\hidden

• 建议：

  • margin一般是用来设置兄弟元素之间的间距
  • padding一般是用来设置父子元素之间的间距

2.7.上下margin的折叠

• 垂直方向上相邻的2个margin(margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫collapse(折叠)

• 水平方向上的margin(margin-left、margin-right)永远不会collapse

• 折叠后最终值得计算规则：

  • 两个值进行比较，取较大的值

• 如何防止margin collapse？

  • 只设置其中一个元素的margin(常用)

2.8.border(边框)相关的属性

• 边框宽度

  • border-top-width、border-right-width、border-bottom-width、border-left-width
  • border-width是上面4个属性的简写属性

• 边框颜色

  • border-top-color、border-right-color、border-bottom-color、border-left-color
  • border-color是上面4个属性的简写属性

• 边框样式

  • border-top-style、border-right-style、border-bottom-style、border-left-style
  • border-style是上面4个属性的简写属性
  • dashed和solid比较常用

• border: 10px solid yellow; 宽度、样式、颜色

• 边框的形状：

  • 边框的形状可能是：
    • 矩形、梯形、三角形等形状

• 行内非替换元素的注意点：

  • 以下属性对行内级非替换元素不起作用

    • width、height、margin-top、margin-bottom

  • 以下属性对行内非替换元素的效果比较特殊

    • padding-top、padding-bottom、上下方向的border

2.9.圆角

• CSS属性：border-x-x-radius

• 圆角半径相关的属性有：

  • border-top-left-radius，border-top-right-radius
  • border-bottom-left-radius，border-bottom-right-radius

• border-x-x-radius定义的是四分之一椭圆的半径

  • border-top-left-radius: 50px 50px;

  • 第1个值是水平半径

  • 第2个值是垂直半径(如果不设置，就跟随水平半径的值)

• 设置百分比

  • border-top-left-radius: 50%;
  • 参考的是border-box的宽度

• border-radius是一个缩写属性

  • border-radius: 50px;

  • /* 强调：border-radius参考的是当前元素的border+padding+width */

    border-radius: 50%;