课堂笔记3

元素的显示和隐藏

display：none将元素隐藏起来，此时元素不占用页面空间

visibility：hidden也可以隐藏元素，此时元素占用空间

通过display改变行内元素或块级元素

1、display：block将元素显示为块级元素

block元素特点：（1）总是在新行上开始

                       ：（2）高度、行高、顶和底边距都可控制

                        ：（3）宽度默认是它容器的100%，除非设定一个宽度

2、display：inline将元素显示为行内元素

inline元素特点：（1）和其他元素在同一行上

                            （2）高、行高、顶和底边距不可改变

                             （3）宽度就是它的文字或图片的宽度，不可改变

3、display：inline-block：将对象呈递为行内对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

外边距：margin

内边距：padding

注：指定一个宽度，将作用于元素四周

      指定两个宽度，第一个值作用于上下，第二个值作用于左右

      指定四个宽度，分别作用于上、右、下、左

      margin可以为负，padding不可以为负

      行内元素设置上下边距不影响行高

      边框是可见的，边距是不可见的，只能看到对其他元素的影响

元素盒子属性的默认值

注：大部分HTML元素的盒子属性默认属性都为0，少部分存在默认值，因此我们在需要的时候可以先初始化它们的属性为0

浮动和清除浮动

div{float：letf/right}

浮动不会影响普通元素的布局，即浮动的元素在普通文档流的上面一层，更靠近屏幕的上层

●浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这样可以使区块元素在一行显示

●当三个区块都浮动，而一行的空间不够，会引起元素换行

●但是如果每个元素的高度不一致，会出现“卡住”的情况

浮动会导致父元素高度坍塌，清除浮动的最佳实践：

.clearfix:after{content"";display:block;height:0;visibility:hidden;clear:both;}

（1）display：block使生成的元素以块级元素显示，占满剩余空间

（2）height：0避免生成内容破坏原有布局的高度

（3）visibility：hidden使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互

（4）通过content：“.”生成内容作为最后一个元素

通过分析发现，除了clear：both用来闭合浮动的，其他代码都是为了隐藏掉content生成的内容

BFC的触发方式

给父元素添加以下属性触发BFC：

float为left/right

overflow为hidden/auto/scorll

display为table-cell/table-caption/inline-block/flex/inline-flex

position为absolute/fixed

所以我们可以给父元素设置

overflow：auto来简单实现BFC清除浮动

overflow：hidden  这样元素阴影或下拉菜单会被截断，比较局限。所以以上的BFC触发方法都可以用来解决浮动问题，但是要选择合适的使用场景。

●清除浮动的总结：

（1）t通过在浮动元素的末尾添加一个空元素，设置clear：both属性。（after伪元素其实也是通过content在元素后面生成了内容为点的块级元素）

（2）使父元素触发BFC（通过设置父元素overflow或者display：table属性来闭合浮动）

position属性

CSS有三种基本的定位机制：普通流、浮动和绝对定位

position属性设置元素定位类型（top，bottom，right，left）

position属性值有static，relative，absolute，fixed

1、static静态定位

HTML元素的默认值，即没有定位，元素出现在正常的流中

静态定位的元素不会受到top，bottom，right，left属性的影响

2、fixed固定定位

●脱离标准流，在页面中不占位置

●不管页面有多大，永远相对于浏览器的边框来定位

3、relative相对定位

●不脱离标准流，在页面中占位置

●相对于自己原来的位置来进行定位

4、absolute绝对定位

●脱离标准流，在页面中不占位置（浮起来）

●如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，则相对于body定位；如果父元素有定位，那么相对于父元素来定位

居中和对齐

1、margin设置区块元素水平居中

margin：0 auto；设置左右外边距的大小，控制元素的水平居中

●注：width不能设置为100%

2、position属性设置元素的左右对齐

3、float属性设置左右对齐

4、padding属性设置水平垂直居中

5、line-height属性设置水平垂直居中

6、绝对定位和transform属性设置水平垂直居中