HTML和CSS必须知道的重点难点问题

一、如何让一个不定宽高的div,垂直居中？ 

　　　　1、使用flex布局，只需要在盒子的父级设置如下代码即可：

.className{
    display:flex;
    justify-content:center;
    align-items:center;    
}

　　　　2、使用css3transform布局:

　　　　　　父级盒子设置：

{
　　position:relative;
}

　　　　　　div设置：

{
 　　transform:translate(-50%,-50%);
　　 position:ansolute;
　　 top:50%;left:50%;
}

　　　　3、使用 display:table-cell 方法

　　　　　　父级盒子设置：

{
       display:table-cell;
       text-align:center;
       vertical-align:middle;  
}

　　　　　　div设置：

{
    display:inline-block;
    vertical-align:middle;
}    

 

3.浮动与清除浮动

float属性的取值：

left：元素向左浮动。
right：元素向右浮动。
none：默认值。元素不浮动，并会显示在其在文本中出现的位置。

浮动的特性：

浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。
不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列

浮动元素的展示在不同情况下会有不同的规则：

浮动元素在浮动的时候，其margin不会超过包含块的padding。PS：如果想要元素超出，可以设置margin属性
如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。
如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素
浮动元素会尽可能地向顶端对齐、向左或向右对齐

重叠问题

• 行内元素与浮动元素发生重叠，其边框，背景和内容都会显示在浮动元素之上
• 块级元素与浮动元素发生重叠时，边框和背景会显示在浮动元素之下，内容会显示在浮动元素之上

clear属性 clear属性：确保当前元素的左右两侧不会有浮动元素。clear只对元素本身的布局起作用。 取值：left、right、both