HTML和css常见问题解答2

（1）.要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。
 

.mydiv{     width:200px;      height:200px;      position:absolute;      left:50%;      top:50%;      margin:-100px 0 0 -100px }

（2）.利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

.mydiv{     position: absolute;     left: 0px;     right: 0;     top: 0;     bottom: 0;     margin: auto;     height: 200px;     width: 200px; }

（3） jQuery实现水平和垂直居中

　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。
 

$(window).resize(function(){     $(".myblock").css({         position: "absolute",         left: ($(window).width() - $(".myblock").outerWidth())/2,         top: ($(window).height() - $(".myblock").outerHeight())/2     });         });

在页面加载的时候调用刚刚创建的方法

$(function(){     $(window).resize(); });

 

（4）使用transform

.mydiv{width: 100px;height: 100px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);}

 

 

 

 
（1）. 尺寸相关属性
Height：高度
Width：宽度

div{    height: 100px;    width: 100px;}
Max-height：
Min-height：
Max-width：
Min-width：
（2）. 隐藏属性的方法
Visibility：后面接hidden，表示仅仅隐藏了内容，却还是存在的
Display：后面接none，把内容都搞没了，且不占位置
Display可以设置元素的显示模式
Inline：可以将块集元素以内联形式显示，且width和height无效，其空间大小取决于元素的内容。
Inline-black：可以将块集元素以内联形式显示，同时兼具块集元素的某些特征，比如使用width和height属性设置大小
i. 块集元素可以转换为内联元素，转换方式是定义display=inline-black;
ii. 内联元素可以转换为块集元素，转换方式是定义display= black;

li{    display: inline-block;    width: 300px;    height: 300px;    background-color: green;}span{    width: 200px;    height: 200px;    display: block;    background-color: blue;}

 

（3）.定位
定位的方式有：static、fixed、relative、absolute
Static：静态定位（默认）
无定位，元素正常出现了流中，不受上下左右属性影响

<style>    div{        width: 200px;        height: 200px;        background-color: yellow;        position: static;    }</style>

Fixed：动态定位

#div1{    width: 200px;    height: 200px;    background-color: blue;    /*left: 50px;*/    /*top: 50px;*/    position: fixed;    /*z-index: 3;*/}#div2{    width: 200px;    height: 200px;    background-color: yellow;    left: 50px;    top: 30px;    position: fixed;    /*z-index: 2;*/}

从结果看出，fix定位可以将div从流中取出来，重新定位取决于left、top。重新定位之后会出现重叠，可以用z-index来实现谁在上面，大的在上。
Relative：相对的

#div1{    width: 200px;    height: 200px;    background-color: blue;    /*left: 50px;*/    /*top: 50px;*/    position: static;    /*z-index: 3;*/}#div2{    width: 200px;    height: 200px;    background-color: yello    left: 50px;    top: 30px;    position: relative;    /*z-index: 2;*/}#div3{    width: 200px;    height: 200px;    background-color: yello    left: 100px;    top: 60px;    position: relative;    /*z-index: 2;*/ }<div id="div1"></div><div id="div2"></div><div id="div3"></div>相对定位可以跳出流，不会影响别的定位Absolute：绝对的#div1{    width: 200px;    height: 200px;    background-color: blue;    /*left: 50px;*/    /*top: 50px;*/    position: static;    /*z-index: 3;*/}#div2{    width: 200px;    height: 200px;    background-color: yellow;    left: 50px;    top: 30px;    position: absolute;    /*z-index: 2;*/}#div3{    width: 200px;    height: 200px;    background-color: yellow;    left: 40px;    top: 20px;    position: absolute;    /*z-index: 2;*/}