2021-05-20

宽高自适应和伪对象选择器

宽度自适应：属性width 属性值：“数值 px ”

在页面布局中，如果块级元素设置为100%或者不设置宽度默认自适应到整个屏幕宽度（通栏效果）

1. 块级元素不设置宽高的时候和父级等宽
2. 重点：如果当前元素脱离文档流，元素的宽度由内容决定；如果元素设置了浮动或定位，一定要给元素设置宽高大小

---

高度自适应：属性height 属性值：“数值”

当元素不设置的时候，在浏览器中不显示，默认高度为0；

当元素不设置高度或者设置为auto的时候，可以做到自适应。

子级元素自适应到父级元素；

常见用法：html,body{height:100%} 会导致子级自适应浏览器；

img{width:100%;height100%} 会导致变形；

---

最小高度：min-height 当元素没有设置高度的时候可以保持一个最小高度，当元素内容多的时候自动适应。

1. 兼容差，只能在高版本浏览器中使用
2. height属性在低版本浏览器中和min-height一样

---

过滤器

1. 下划线过滤器 -属性：只能识别低版本浏览器
2. 最高权重浏览器 !important 写在属性值后面

最大最小的扩展

max-width:标准设计图宽1920px;(版心1200px)

min-width:设置防止盒子布局错乱；

重要用法：移动端 媒体查询

max-height:常用在门户网站

min-height：兼容差 自适应

---

扩展;图片的bug默认往下延申3-6px，设置一个display：block 即可解决问题

outline和border使用方法一样

input表单控件中

• value的设置 文本属性即可
• placeholder color 文本属性直接设置是不可以的 input::-webkit-input-place holder 注释：浏览器前缀（webkit）

---

高度坍塌

造成的原因：父级元素没有高度，子级元素含有浮动

解决方法：

1. 给父级设置宽高，优点：从根本上解决问题。缺点：无法做到自适应。
2. 给父级添加overflow:hidden;原理：设置了文本溢出属性触发了bfc（块级格式化上下文）规则：浮动元素也参加了高度运算。优点：简单 ；缺点：如果子级元素有超出父级元素的部分会被隐藏
3. 在最后一个子级元素添加一个任意标签，给这个标签设置clear:both;原理：清除上方预留出来的空间。优点：解决高度塌陷，并且自适应。缺点：会生成多余的结构代码，样式冲突。
4. 万能清楚法：原理：清楚上方预留出来的空间；方法：在父级元素添加clear-fix

clear-fix::after{content:"内容"；width:100%;height:0;display:block;clear:both;overflow:hidden; visibility:hidden};

注释：visibility:hidden;(隐藏文本结构，但是还存在)

---

伪对象选择器

选择器::after{content:"内容"} 在什么什么之后；

选择器::before{content:“内容”}在什么什么之前；

选择器::first-letter 选中第一个文本；

选择器::first-line 选中第一行文本；

---

扩展：伪对象和伪类之间的区别：

1. 伪类只有一个冒号；伪对象选择器在css2中也只有一个冒号，后来为了区分伪类选择器和伪对象选择器，css3中规定伪对象为两个冒号；
2. 作用上的区别；1、伪类只能改变元素的样式；2、伪对象可以给元素添加结构,且不占位置。