DAY 38 前端学习

一、padding内边距：边框与内容的距离就是内边距
padding-top：20px；
非连写---》padding-right：20px；
padding-bottom：20px；
padding-left：20px；

连写---》padding：上 右 下 左;

# 注意：
1 给标签设置内边距后，标签内容占有的宽度和高度会发生变化，设置padding之后标签内容的宽高是在原宽高的基础上加上padding值。如果不想改变实际大小，那就在用宽高减掉padding对应方向的值
2 padding是添加给父级的，改变的是父级包含的内容的位置
3 内边距也会有背景颜色

二、外边距：标签与标签之间的距离就是外边距
margin-top：20px；
margin-right：20px；
非连写---》margin-bottom：20px；
margin-left：20px；

连写---》margin：上 右 下 左;

# 注意：
1、外边距的那一部分是没有背景颜色的
2、外边距合并现象
在默认布局的水平方向上，默认两个盒子的外边距会叠加
而在垂直方向上，默认情况下两个盒子的外边距是不会叠加的，会出现合并现象，谁的外边距比较大，就听谁的

3、外边距合并现象
4、margin-top塌陷：
两个嵌套的盒子，内层盒子设置margin-top后会将外层盒子一起顶下来，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow: hidden; 当子元素的尺寸超过父元素的尺寸时，内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、使用伪元素类：
.clearfix:before{
content: '';
display:table;
}

三、内边距vs外边距
#1、在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离
应该首先考虑padding
其次再考虑margin
margin本质上是用于控制兄弟直接的关系的，padding本质才是控制父子关系的关系

#2、如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，那么外面一个盒子也会被顶下来
如果外面的盒子不想被遗弃顶下来，，那么可以给外面的盒子设置一个边框属性

#3、盒子居中与内容居中
内容居中：
1、让一行内容在盒子中水平且垂直居中
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 500px;

2、让多行内容在盒子中垂直居中（水平居中与单行内容一样）
让行高与盒子高度一样，只能让一行内容垂直居中，如果想让多行内容垂直居中，

比如下面这种，想让div中的多行内容垂直居中，一看div中的文字是两行，每一行
的行高为20，加起来就是40，80-40=40，需要让文字距离顶部pading为20，底部padding为20
*/
height: 80px;
line-height: 20px;

padding-top: 20px;
padding-bottom: 20px;
box-sizing: border-box;

盒子居中：
text-align center；只能让盒子中存储的文字、图片水平居中
如果想让盒子自己相对于父元素水平居中，需要用到
margin: 0 auto;

四、防止文字溢出word-break: break-all;

五、清除默认边距
#1、为什么要清空默认边距（外边距和内边距）
浏览器会自动附加边距，在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等
编写代码之前的第一件事情就是清空默认的边距

#2、如何清空默认的边距
* {
margin: 0px;
padding: 0px;
}

#3、注意：
通配符选择器会找到（遍历）当前界面中所有的标签，所以性能不好，参考：https://yuilibrary.com/yui/docs/cssreset/

拷贝代码：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

可以查看京东，bat主页也是这么做的，在企业开发中也应该像上面这么写

六、网页布局方式
#1、什么是网页布局方式
布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等

而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的
#2、网页布局/排版的三种方式
2.1、标准流2.2、浮动流2.3、定位流

七、标准流
标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
# 1 浏览器默认的排版方式就是标准流排版方式

# 2 在CSS中将元素分为三类：分别是
块级
行内
行内块级

# 3 在标准流中有两种排版方式，一种是垂直排版，一种是水平排版

垂直排版，如果元素是块级元素，那么就会垂直排版
水平排版，如果元素是行内元素或行内块级元素，那么就会水平排版

八、浮动流
1、浮动流是一种半脱离标准流的排版方式那什么是脱离文档流？什么又是半脱离文档流？
1.1 什么是脱离文档流？
1、浮动元素脱离文档流意味着
#1、不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版
#2、无论是什么级的元素都可以设置宽高
综上所述，浮动流中的元素和标准流总的行内块级元素很像

2、浮动元素脱标文档流意味着
#1、当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标
#2、如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素

#注意：
　1、浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值
　2、一旦使用了浮动流，则margin:0 auto;失效

1.2 那什么又是半脱离文档流？
脱离分为：半脱离与完全脱离，

其中完全脱离指的是元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样

而之所以称为半脱离：是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系，比如说浮动的元素在浮动之前处于标准流的第二行，那么他浮动之后也是处于浮动流的第二行，不会去找其他行的浮动元素去贴靠，打一个比方就是：浮动流就是在标准流上面覆盖的一层透明薄膜，元素浮动之后就会被从标准流中扔到浮动流这个薄膜上，他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠，贴靠的准则就是：

（1）同一个方向上谁先浮动，谁在前面

（2）不同方向上左浮动找左浮动，右浮动找右浮动

（3）浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置

（4）同一个方向上谁先浮动，谁在前面

（5）不同方向上左浮动找左浮动，右浮动找右浮动

1.3 浮动元素贴靠问题
当父元素的宽度足够显示所有元素时，浮动的元素就会并列显示
当父元素的宽度不足够显示所有元素时，浮动的元素就贴前一个元素，如果还不够，就会再贴前一个元素
直到贴到父元素左边，此时无论是否宽度足够都会在这一行显示了

1.4 浮动元素字围现象
有浮动文字、图片、超链接等元素会给浮动的元素让位置，并围绕在浮动元素的周围

图文混排
只要是行内块级元素，都会有字围效果

1.5 浮动流排版
#注意：在企业开发中，如何对网页进行布局
#1、垂直方向的布局用标准流布局，水平方向用浮动流布局
#2、从上至下布局
#3、从外向内布局
#4、水平方向可以先划分为一左一右再对左边后者右边进一步布局

1.6 浮动元素高度问题(又称父级塌陷)
#1、在标准流中,内容的高度可以撑起父元素的高度
#2、在浮动流中,浮动的元素是不可以撑起父元素的高度的，当子元素都浮动起来后，父亲的内容高度即height变为0，父元素就好像塌陷了一样，因而又称为父级塌陷

浮动的元素不再撑起父级元素的高度
父级塌陷对网页布局带来的影响

1.7 清除浮动
清除浮动方式一：
为浮动的那些子元素的父亲设置一个高度
#1、注意点：
在企业开发中，这样限定固定高度会使页面操作不灵活，不推荐！

清除浮动方式二：
clear : none | left | right | both 注意：clear这个属性必须设置在块级、并且不浮动的元素中

#1、取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许左右有浮动对象

#2、把握住两点：
1、元素是从上到下、从左到右依次加载的。
2、clear: left;对自身起作用，而不会影响其他元素。一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。

clear：both解决父级塌陷

#注意1：
元素是从上到下、从左到右依次加载的。在右侧元素还没有加载到时，clear：right是无用的

#注意2：
这种方式的弊端是：当我们给某个元素添加clear属性之后，那么这个属性的margin-top属性可能会失效，因而也不推荐直接用clear

清除浮动的方式三
隔墙法

#1、外墙法
2.1 在两个盒子中间添加一个额外的块级元素
2.2 给这个额外添加的块级元素设置clear：both；属性
注意：
外墙法它可以让第二个盒子使用margin-top属性
外墙法不可以让第一个盒子使用margin-bottom属性，所以我们通常用墙的高度作margin的替代品

在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法

#2、内墙法
3.1 在第一个盒子中所有子元素最后添加一个额外的块级元素
3.2 给这个额外添加的块级元素设置clear：both；属性
注意：
内墙法它可以让第二个盒子使用margin-top属性
内墙法可以让第一个盒子使用margin-bottom属性

内墙法也可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法

#3、内墙法与外墙法的区别？
1、外墙法不可以撑起第一个盒子的高度，而内墙可以
2、在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙
在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div

清除浮动的方式四
本质原理与内墙法一样，但我们用的css的伪元素选择器实现的，就应该用css来控制样式，符合前端开发思想
#I、详细用法
.header:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。
visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}

.header { *zoom:1;} <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="header"></div>

#II、必须要写的是下面这三句话
content: '.';
display: block;
clear: both;

#通用写法
.clearfix {
*zoom:1
}

.clearfix:before,.clearfix:after {
content: " ";
display: table
}

.clearfix:after {
clear: both
}

清除浮动的方式五：
overflow:hidden，但其实它除了清除浮动还有其他方面的用途
#1、可以将超出标签范围的内容裁剪掉
#2、清除浮动
#3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了

将超出标签范围的内容剪裁掉
清除浮动
防止父盒子被顶下来

#III、新浪首页清除浮动的方法，也是采用伪元素
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;

#1、复习伪元素选择器(CSS3中新增的为元素选择器)
伪元素选择器的作用就是给指定标签的内容前面添加一个子元素
或者给指定标签的内容后面添加一个子元素

#2、格式：给指定标签的前面和后面添加子元素
标签名称::before{
属性名称：值；
}

标签名称::after{
属性名称：值；
}

九、定位流
1、相对定位就是相对于自己以前在标准流中的位置来移动

格式：position：relative

需要配合以下四个属性一起使用
top:20px;
left:30px;
right:40px;
bottom:50px;

1.1 相对定位的注意点
#1 在相对定位中同一个方向上的定位属性只能使用一个
　　top/bottom 只能用一个
　　left/right 只能用一个
#2 相对定位是不脱离标准流的，会继续在标准流中占用一份空间
#3 由于相对定位是不脱离标准流的，所以在相对定位中是区分块级、行内、行内块级元素的
#4 由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin/padding
等属性时会影响到标准流的布局，即，给相对定位的标签设置marin或padding，是以该标签原来的位置为基础来进行偏移的

1.2 相对对位的应用场景
#1、用于对元素进行微调
#2、配合后面学习的绝对定位来使用

2、绝对定位就是相对于body或者某个定位流中的祖先元素来定位

2.1 绝对定位的参考点
#1、默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点
#2、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
2.1 只要是这个绝对定位元素的祖先元素都可以
2.2 祖先必须是定位流，此处的定位流指的是绝对定位、相对定位、固定定位(定位流中只有静态定位不行)
2.3、如果一个绝对定位的元素有祖先元素，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

默认情况下所有的绝对定位的元素，无论有无祖先元素，都会以body作为参考点

2.1 绝对定位的注意点
#1、绝对定位的元素是脱离标准流的,所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
#2、如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点，会相对于body定位会随着页面的滚动而滚动
#3、一个绝对定位的元素会忽略祖先元素的padding

绝对定位的元素不区分块级元素/行内元素/行内块级元素
绝对定位相对于body定位是以首屏为准
一个绝对定位的元素会忽略祖先元素的padding

2.3 绝对定位水平居中
#1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
#2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

2.4 绝对定位的应用场景
#1、用于对元素进行微调
#2、配合相对定位来使用
企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用===>子绝父相

3、固定定位
#1、固定定位（和绝对定位高度相似，和背景的关联方式也高度相似）
背景的关联方式background-attachment: fixed;可以让图片不随着滚动条的滚动而滚动
而固定定位可以让某一个元素不随着滚动条的滚动而滚动

#2、注意点
1、固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
2、固定定位的元素是脱离标准流的，不会占用标准流中的空间
3、固定定位和绝对定位一样不区分行内、块级、行内块级
4、E6不支持固定定位

固定定位应用场景：
网页对联广告
网页头部通栏(穿透效果)