html css基础第二章--重点知识点汇总

基础&重要知识点汇总

margin塌陷

条件

父级为块级元素，在第一个子级（块级元素）设置margin-top
父级为块级元素，在最后个子级（块级元素）设置margin-bottom（上移）

解决方法

• 给父级设置border
• 不给子级设置margin-top，给父级设置padding-top或者padding-bottom
• 父级设置overflow ：hidden；溢出隐藏

清除浮动

定义

Float ： left；right；none 浮动会让元素产生浮动流，会脱离文档，但不会完全脱离
块级元素无法检测浮动元素(触发了bfc的元素及文本可以检测的浮动元素)

解决方法

• 设置父级高度
• .clear：both；（只能设置在块级元素上生效）不可取！
• 使用伪元素 （可取常用）
  
• bfc overflow：hidden；

a标签的四种状态设置

• link 原始状态
• visited 浏览后
• hover 鼠标指向的状态
• active 鼠标点击时的效果

先后顺序

link–visited–hover–active

元素的隐藏方法

• display：none；----- block；（overflow：hidden超出部分隐藏）
• opacity：0-----1（IE低版本不支持）在css中加入filter:Alpha(opacity=0);可以让IE低版本支持透明度
• visibility：hidden----visible；视觉上看不见，但是位置留着
• 定位或margin移出显示区域外
• 宽或高设为0

CSS居中方式

• Text-align
• margin：0 auto；
• 设置绝对定位或者相对定位
• 弹性布局 display：flex
• 平移

CSS让元素消失的方式

• opacity：0
• visibility：hidden；
• display：none；
• 设置绝对定位相对定位
• clip-path

css–元素水平居中

• 行内元素：父级使用text-align
• 块级元素：自身使用margin：0 auto；或者 自身转换为行块元素，父级使用text-align： center
• 定位：left+ margin-left：负值（需要知道元素宽度）或者 left + translate（-50%）
• 使用弹性布局或者网格布局

css–元素垂直居中

• 单行文本（行内标签）设置line-height
• 定位：1.top + margin-top：负值（需要知道元素宽度）
  2.top + translateY（-50%）
  3.绝对定位，left right top bottom都设置为0，然后设置margin：auto；
• 行块元素基线：给父级设置伪元素，高度为父级的100%，设置基线对齐为middle，然后设置需要垂直居中元素基线对齐为middle。
• 让元素显示为单元格，让单元格原本的垂直居中
• 使用弹性布局或者网格布局