前端学习日记04

元素居中

1、 行内元素或者行内块元素居中
水平居中： 给内容的父元素（块元素）设置text-align: center
单行文字垂直居中： line-height = height
​
2、 块元素居中
水平居中：
让块元素在父元素中水平居中（水平方向margin为auto）
margin: 10px auto;

margin塌陷问题

1、父子上外边距的传递

原因：
父元素中的第一个子元素，他们的元素上边界线是重合在一起的，如果给子元素设置margin-top则会传递给父元素，连带父元素一起下滑

如果父子元素同时设置margin-top：绝对值大的起作用

margin值可以为负值
负值：水平方向，元素往左移动；垂直方向，元素往上移

解决方法：
（1） 不设置外边距，尽量使用内边距
（2）给父元素添加边框 (transparent 透明)
（3） 给父元素添加 overflow:hidden属性

2、兄弟元素的margin问题

原因：
两个元素设置的外边距作用在同一区域：
如果两个值都是正值， 取最大值；两个值都是负值， 取绝对值最大； 一正一负， 取和
解决方法：
（1） 只设置一个元素的外边距
（2） 给其中一个兄弟元素外面嵌套一个div，给这个div设置overflow：hidden
（3）给两个兄弟元素都嵌套div，给这个div设置overflow：hidden

补充属性

设置元素的溢出方式：
overflow:
值：
hidden 溢出隐藏
scroll 添加滚动条(水平和垂直)
auto 自动添加滚动条(哪个方向内容溢出，哪个方向添加滚动条)
visible （默认）溢出也显示

伪元素：
利用css在标签中添加一个伪元素

1、  在元素前面添加一个伪元素

 ele::before{
            content:'';    定义伪元素的内容，必须的属性（即使是添加空内容）
        }

2、 在元素后面添加一个伪元素

 ele::after{
            content:''
        }

【注意】： 添加的伪元素是一个行内元素

浮动

浮动概念：
有浮动属性的标签会脱离标准文档流，在父元素按照一定顺序排列，直到触碰到包含框或者另一个浮动元素为止
作用:
1、能够使块元素在其父元素内在一行排列，用来布局
2、图文环绕
​
特性：
浮动可以使元素脱离标准文档流，提升层级
​
标准文档流：
页面标签按照从左到右，从上到下的顺序依次排列

属性： float：
left 左浮动
right 右浮动
none (默认值)不浮动

清浮动

浮动带来的问题：
因为浮动元素会脱离标准文档流，不占位，撑不起父元素的高度，造成父元素高度塌陷

解决方法：
1、 设置一个固定的高度(不够灵活)
2、 给父元素添加overflow:hidden;
3、 在浮动元素最后面添加一个空div，给这个div设置clear:both;

clear:both 清除前面浮动元素带来的影响

4、 利用伪元素,和方法三原理一样

 ele::after{
                content:'';
                /* 转换成块元素 */
                display:block;
                clear:both;
            }

5.一般使用clearfix类代表清除浮动

.clearfix::after{
                content:'';
                display:block;
                clear:both;
            }