前端基础整理 | HTML+CSS基础知识

2019-05-17 本文已影响0人格致匠心

1. 盒子模型

盒子模型目前主流的是W3C盒子模型，概念也非常简单，从外到内：margin → border → padding → content。Chrome开发者工具中能很方便地看出：

Chrome开发者工具下的盒子模型展示

只要记住：
IE的盒子模型 width = contentWidth + paddingWidth + borderWidth；
W3C的盒子模型 width = contentWidth （高度同理）

清除浮动方法：
- 为父元素设置高度。看上去把浮动的元素收入其中。
- 在浮动子元素同级的后面设置元素带有clear:both就可以了，它会清除浮动带来的影响。
- 为父元素设置Overflow:hidden。
为什么 overflow:hidden 能清除浮动影响？
overflow:hidden 本来是用来隐藏溢出容器的那部分内容的，但是现在却成了清除浮动的好帮手。这就涉及到BFC了。
这个关于BFC的知乎题目大家可以看看
- BFC 全称是块级排版上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素设置了 float:left，overflow:hidden 或 position:absolute 样式，就会为这个块级元素生成一个独立的块圾上下文，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。
- 独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。

parentElement{
  position:relative;
}
childElement{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

parentElement{
    display:flex;
    align-items:center;/*交叉轴线下的居中*/
}

parentElement{
  position: relative;
}
childElement:{
  position:absolute;
  top:50%;
  left:50;
  transform: translate(-50%,-50%)
}

parentElement{
  display:flex;
  justify-content:center;/*轴线下的居中*/
  align-items:center;/*交叉轴线下的居中*/
}

childElement: {
  position:absolute;
  width:10px;
  height:10px;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

<div>  <table>表格 <p>段落 <form>表单 <h1-5>标题类 <ul>无序列表 <ol>有序列表 <dl>定义列表 <hr>水平分割线 <pre>预格式化 <blockquote>段落缩进前后5个字符 <address>地址文字 ...

<span>常用内联容器 <a>锚点 <img>图片 <input>输入 <lable>标签 <textarea>多行输入 <code>代码 <br>换行 ...

记住：em是相对父元素，rem是相对根元素。