【Day10】宽高自适应

学习内容

• 宽高自适应
• 隐藏元素
• 高度自适应
• calc函数的使用
• 伪元素

宽高自适应

自适应:宽高由内容决定

1.宽度自适应
宽度100%和不设置宽度
默认情况下两者没有区别
如果有盒模型，宽度100%相当于一个固定值，会出现横向滚动条，影响页面布局

扩展: border-radius: 50%; 设置圆形盒子

网页嵌套标签 iframe 行内块元素
width: 宽度
height: 高度
scrolling: 滚动条，属性值no
frameborder: 边框，默认去掉

隐藏元素

1.display: none 隐藏元素，不占位置

2.visibility: 设置元素可见性
属性值: visible 可见的 hidden: 隐藏元素，占位置

3.opacity: 透明度
属性值: 0 完全透明，隐藏元素，占位置

4.height设置为0实现隐藏元素，不占位置
影响文本内容

5.使用缩放
transform: scale (0) 缩放比例为0实现隐藏元素，占位置

高度自适应

最小宽高 最大宽高
min-height 最小高度 max-height 最大高度
min-width 最小宽度 max-width 最大宽度

calc函数的使用

calc (值1 运算符 值2)
运算符: + - * / %
运算符前后一定有空格

伪元素

伪元素选择器

::before 在元素内容最前面添加
::after 在元素内容最后面添加
一定要搭配content使用
  content: "";

::first-line 选中第一行
::first-letter 选中第一个字