1.块级元素
- 块级元素才可以设置上下padding
- 块级元素本身就要撑满容器
- 行内元素居中，父容器设置text-aligin: center
- 行内元素设置宽度高度无效，行内元素添加padding 和margin，左右生效，上下视觉生效（会遮挡），但不占位置，实际不生效
- 块级元素居中，设置margin: 0 auto;
- 控制台=> style中，color: aliceblue 点击 即取色器
- inline-block 行内块级存在的意义是上下padding margn
- 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)又呈现 block 特性(可设置宽高，内外边距) 缝隙问题span之间不要空格
- li是块级元素
- inline-block 加了padding 默认是以字的基线对齐
- vertical-align: top/bottom/middle 对齐三种方式
- height = line-heihgt 来垂直居中单行文本
- 伪元素用来代替标签
2.浮动
-
浮动元素看到普通元素时，浮动元素看不到普通元素，p中文字会生成一个匿名的行盒，可以看到浮动元素，文字围绕浮动元素 box float遇到p中有文字
-
一个浮动盒会向左或向右移动，直到其外边（outer edge）挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top（边）会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下移动，直到空间合适或者不会再出现其它浮动了
-
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned）块盒会竖直排列，就像浮动不存在一样。然而，接着（next to）浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间
-
块级元素设置了浮动，宽度会收缩（不占一整行了），用width:100%
-
行内元素设置浮动，设置宽高就可以生效
-
普通流中的块级元素看不到浮动元素（注意先来后到，让着先来的浮动元素，后来的不行）
- js.jirengu.com/jawu/1/edit… （注意三个div更换顺序）
-
clear:left => 该元素前面有左浮元素，则去左浮元素下方
-
clear:right => 该元素前面有右浮元素，则去前面元素下方
-
子元素全是浮动，父容器看不到
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<ul class="navbar"> <!--class = "navbar clearfix"-->
<li><a href="#">1首页</a></li>
<li><a href="#">2产品</a></li>
<li><a href="#">3服务</a></li>
<li><a href="#">4关于</a></li>
</ul>
<style>
.navbar{
list-style: none;
border: 1px solid #ccc;
}
.navbar>li{
float: left;
margin-left: 15px;
}
.navbar::after{ /* .clearfix::after */
content: ''; /* 相当于在后边加了一个非浮动元素 */
display:block; /* 块级元素占位 */
clear:both;
}
</style>
</body>
</html>
复制代码3.定位
- book.jirengu.com/fe/前端基础/CSS…
- top left bottom只对relative absolute fixed生效
- 对自己设置了position: relative 不脱离文档流，但是其它元素不被挤掉
- 对自己设置了absolute，或脱离文档流，和别的元素相互覆盖
5.BFC
6.边距合并
- 相邻元素会产生margin合并，取大的
- 父子合并
- 自己和自己合并