宽高自适应、高度塌陷产生的条件、解决高度塌陷的方法、伪选择器、溢出、超出内容显示省略号

自适应

宽度自适应

• 不设置宽度 参考父元素
• 设置百分数 参考父元素
• 最大最小
  • max-width
  • min-width

高度自适应

• 不设置高度 由内容撑开
• height:auto 由内容撑开
• 设置百分数 参考父元素
• 最大最小
  • max-width
  • min-width

全屏显示

html,body{height:100%};
元素:{width:100%}

高度塌陷

发生条件

• 父元素不设置高度
• 子元素设置浮动

解决方案

• 给父元素设置overflow:hidden
• 给浮动元素后面加一个块元素，不设宽
  clear：left/right/both
• 通过伪选择器
  ::after{clear:both;display:block;
  height:0;
  overflow:hidden;
  }
  伪选择器
  ::fist-letter
  ::first-line
  ::after{content:":}
  ::before{content:":}

溢出

• overflow/overflow-x/overflow-y

• visiable

• hidden

• scroll

• auto

省略号

只针对单行文本

保证元素不能无限撑大

设置

• 设置不换行
  white-spacing:nowrap
• 设置隐元素
  overflow:hidden
• 设置显示省略号
  text-overflow:ellipsis