html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框，每个框由元素的内容，内边距，边框和外边距组成。 2.如果在元素上添加背景，则背景是边框, 内边距和内容组成的区域. 3.在css中width ...
分类：
Web程序 时间：
2017-05-06 14:14:36
阅读次数：
224
Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: [css] view plain copy .Absolute-Center ...
分类：
其他好文 时间：
2017-05-06 11:47:24
阅读次数：
292
Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。而当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:10 ...
分类：
Web程序 时间：
2017-05-06 11:44:53
阅读次数：
205
转载自：http://www.zhangxinxu.com/wordpress/?p=3794 一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果，很多人心里已经有答案了。 兼容性不错的主流用法是： .element { width: 600px; height: 400px; ...
分类：
其他好文 时间：
2017-05-06 00:57:15
阅读次数：
133
新建html文件可以运行(jsp文件下不可运行) <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: auto; } .d1{ width: 50 ...
分类：
Web程序 时间：
2017-05-05 12:57:46
阅读次数：
214
方法一：绝对定位 .photo{overflow: hidden;position: relative;width: 100%;height: 100%;}img{width: 100%;position: absolute;top: 50%;left: 50%;transform: transla ...
分类：
其他好文 时间：
2017-05-05 12:56:44
阅读次数：
101
一、前言在如今各个分辨率显示器N足鼎立的时期，页面采用流动性布局（亦可称自适应布局）不失为一个好选择。当然，具体实现不是那么容易，需要一定的css功力和实践经验。本文不讲细节，只讲外部的自适应架构，这也是实现整个页面自适应的前提。目前为止，我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位 ...
分类：
Web程序 时间：
2017-05-02 13:59:39
阅读次数：
192
1.2.5 position定位 说明：1.relative相对定位：相对元素初始位置定位；移动后，初始位置保留，在页面占据位置（原位置不脱离文档流）；移动后的位置，元素脱离文档流，不占据页面空间。2.absolute绝对定位：相对于离自己最近且具有定位属性（不包括static）的祖先元素（祖元素没 ...
分类：
Web程序 时间：
2017-04-30 18:39:01
阅读次数：
197
position：absolute这个是绝对定位；是相对于浏览器的定位。比如：position：absolute；left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。position：relative是相对定位，是相对于前面的容器定位的。这个 ...
分类：
Web程序 时间：
2017-04-27 17:54:24
阅读次数：
161
昨天在知乎上各种看前端的贴，一不小心又学到了个技巧，再次我搬过来和大家分享。 还是同样的问题： 如何让一个div在父元素中居中？ 在上一篇里我们用到了绝对定位position:absolute; 再结合margin的负值实现了居中的效果。 第二种解决办法 在此我们来看下新的方法： html: <di ...
分类：
Web程序 时间：
2017-04-26 11:02:02
阅读次数：
153
