布局

元素分类

行内元素

a, b, span, img, input, strong, select

块级元素

div, ul, ol, li, dh, dt, p, h1, h2

空元素

\
, \

---

, \ , \, \, \

行内元素和块级元素的区别

1、行内元素会在一行内并排显示，块级元素会占一行显示
2、块级元素可以包含行内元素，行内元素不能包含块级元素
3、行内元素width无效，height无效（需设置line-height），margin上下无效，padding上下无效，行内元素宽高由内容决定

相互转换

块级元素转行内元素：
display:inlne;
元素被显示为内联元素，宽高无效，不独占一行。
display:inline-block;
元素为行内块元素，有宽高属性，但不独占一行。
行内元素转块级元素：
display:block;
元素有宽高属性，并独占一行显示

div与table的优缺点

div优点

1、页面布局灵活
2、代码简洁
3、标准化页面结构

div缺点

1、可读性差
2、兼容性差，开发时把不同浏览器样式都考虑进去

table优点

1、可读写性，语句编写方便
2、兼容性好

table缺点

1、代码冗余
2、网页打开速度慢

盒模型

内边距padding

对于行内元素，左内边距应用到元素的开始处，右内边距应用到元素的结尾处，垂直内边距不影响行高，但会影响自身尺寸
1、上下内边距不影响行内元素
2、内边距不能是负值
3、块级元素可以通过padding:50%实现正方形效果，因为水平垂直的padding的百分比值都由包含块的宽度决定
4、所有浏览器的input、textarea、button都有内置的padding

外边距margin

设置外边距margin会在元素外创建额外的空白，空白通常指不能放其他元素的区域，而且在这个区域中可以看到父元素的背景
1、上下外边距对行内元素的宽高没有任何影响
2、可以为负数
3、会重叠，发生在块级元素的垂直方向

边框border

元素外边距内就是元素的边框border，元素的边框是围绕元素内容的内边距的一条或多条线。边框由粗细、样式和颜色三部分组成
对于行内元素来说，边框实际上画在各行之外的下一个像素上，由于各行紧挨着，所以其边框会重叠。无论为行内元素的边框设置怎样的宽度，不会对行高有任何影响；但左右边框会分别显示在元素的开始处和结尾处

box-sizing

在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是IE怪异盒模型。不同之处在于后者的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸。目前对于浏览器大多数元素都是基于W3C标准的盒模型，但对于表单form中的部分元素还是基于IE的怪异盒模型，如input里的radio、checkbox、button等元素，如果给其设置border和padding它们也只会往元素盒内延伸

在W3C的标准模型下，宽度和高度仅仅包含了内容宽度，除去了边框和内边距两个区域，这样为web设计师处理效果带来了不少麻烦。为了解决这个问题，CSS3新增了一个盒模型属性box-sizing，能够事先定义盒模型的尺寸解析方式
box-sizing:border-box;
让宽度=内容（padding）+边框

position布局

四种属性：static、relative、absolute、fixed
默认是static，有根没有一样，static时top啥了的不管用

relative

1、relative会导致自身位置的相对变化，而不会影响其他元素的位置、大小变化
2、relative产生一个新的定位上下文
3、并没有改变行内元素的display属性
4、如果同时设置了relative和float，则元素先浮动到相应的位置，然后再根据top啥了的所设置的距离发生偏移

absolute

1、脱离文档流，导致父元素塌陷，并改变了display属性
2、使原先的行内元素变为块级元素
3、添加了absolute后元素依然在原先的位置
4、会悬浮在页面上方，会挡住下面的内容
5、会使float失效哦
6、多个重叠，后来居上
7、如果给absolute设置了top、left，浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位

fixed

其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。

float布局

float被设计出来的初衷是用于文字环绕效果
1、float脱离文档流，破坏了父标签原本的结构，使父标签塌陷。
2、设置了float，行内元素会变为块级元素

清除浮动

1、为父元素添加overflow:hidden
2、浮动父元素
3、浮动的兄弟元素添加clear:both;
4、clearfix

<div class="clearfix">
    <img src="xx" style="float:left">
    <img src="oo" style="float:left">
</div>

.clearfix:after{
    content: '';
    display: block;
    clear:both;
}
.clearfix{
    *zoom: 1; // 兼容IE低版本
}

BFC

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC 区域，不会与浮动元素重叠。

BFC的生成

• float的值不为none；
• overflow的值不为visible；
• display的值为inline-block、table-cell、table-caption；
• position的值为absolute或fixed；
  满足一个条件就生成BFC

居中

水平居中

• 要居中的元素为行内元素，给其父元素设置text-align:center;
• 要居中的元素为块级元素，给元素本身设置margin:0 auto;
• 绝对定位position:absolute; width:固定;left:50%;margin-left:-0.5宽度;
• 绝对定位position:absolute; width:固定;left:50%;margin:0 auto;
• css3中的transform属性position:absolute; left:50%; transform:translate(-50%, 0);
• flex布局给父元素设置display:flex; justify-content:center;

垂直居中

• 单行文本可设置line-height等于父元素高度
• vertical-align:middle;只有在父层为td或者th时才会生效。其他情况下需要设置父元素display:table;子元素display:table-cell;verical-align:middle; 这样子元素的高度自适应不用设置；
• flex父元素设置display:flex; align-items:center;
• 绝对定位position:absolute; top:50%; transform:translate(-50%, -50%);
• 绝对定位position:absolute; top:50%; height:固定; margin-top:-0.5高度;
• 常用的一种 parent::after,son{ display:inline-block;vertical-align:middle; } parent::after{ content:”;height:100%; }

两栏布局

1、左边：float:left; width:固定;
右边：margin-left:左边宽度;
2、左边：float:left; width:固定;
右边：overflow:auto; 生成个BFC

三栏布局

1、左边：float:left;
右边：float:right;
中间：margin-left:左宽度;margin-right:右宽度;中间的DOM必须写在另外两个的html文档位置后面
2、左边：float:left;
右边：float:right;
中间：overflow:hidden;BFC 区域，不会与浮动元素重叠。
3、圣杯布局
父级：padding: 0 右边宽度 0 左边宽度;
中间：float:left; width:100%; height:随意;
左边：float:left; position:relative; width:左边宽度; margin-left:-100%; left:-左边宽度; height:随意;
右边：float:left; position:relative; width:右边宽度; margin-left:右边宽度; right:右边宽度; height:随意;
4、双飞翼布局
中间：float:left; width:100%; height:随意;
中间子元素：padding:0 右边宽度 0 左边宽度;
左边：float:left; width:左边宽度; margin-left:-100%; height:随意;
右边：float:left; width:右边宽度; margin-left:-右边宽度; height:随意;