html+css易考易错考点

块级元素的显示与隐藏

• display
  none/block
  元素隐藏之后，不占用原来的位置
• visibility
  hidden/visible
  元素隐藏之后，占用原来的位置

表单元素的布尔属性

• reversed 反转
• checked 默认选中，用于单选或多选
• disabled 禁止选中状态
• readonly 只读
• multiple 是否可以多选
• selected 默认选中下拉框中的某个值
• autofocus 默认提醒
• required 必须输入不能为空
• controls 显示控制条
• autoplay 自动播放
• loop 循环

overflow的三种取值

• auto 自适应，在需要时剪切内容并添加滚动条
• scroll 滚动条
• hidden 超出部分进行裁剪

外边距合并问题

1）父子级
给父级加边框属性
给父级加padding
给子级或父级一方添加浮动
给子级或父级一方添加绝对定位
给子级或父级一方添加display:inline-block;
给父级元素添加overflow：hidden;
2) 兄弟级
垂直方向，外边距如果都是正数，则不会叠加而是会合并，且会取最大的值
垂直方向，外边距如果有一个为负数，则会进行叠加。
垂直方向，外边距如果都是负数，则不会叠加而是会合并，且会取绝对值较大的值

居中问题

元素的水平居中
1）、行内元素的水平居中：text-align
2）、块级元素的水平居中：margin：0 auto

元素的垂直居中
1）、行内元素：line-height设置为与父级元素的高度一样大
2）、块级元素：可以给父级使用相对定位，子级使用绝对定位并margin:auto;，将top、left、right、bottom为0
3）、给父级和子级都加绝对定位，再给子级添加top：calc（50% - 子级元素高度一半）
left：calc（50% - 子级元素宽度一半）
4）、给父级相对定位，子级绝对定位：left：50%；top：50%；
margin-left：-子级元素宽度一半；margin-top：-子级元素高度一半
5）、给父级一个display：flex； align-items：center；再给子级添加：margin：0 auto；

清除浮动的方法

清除浮动的方法
1）、使用额外的标签clear:both
在浮动元素下面添加一个空标签，在这个标签中设置clear：both；
2）、使用overflow：hidden属性
父元素定义overflow:hidden，此时，浏览器会自动检查浮动区域的高度；
3）、使用伪元素:after清除浮动
.parent:after{
// 定义元素前后的生成内容，这里是定义元素后的空内容
content: ‘’;
display: block;
clear: both;
}
在元素最后定义一个空的内容，然后让该空的内容来清除浮动；
以下是总结的html和css图片