圣杯布局和双飞翼布局今天看了很多圣杯布局和双飞翼布局的技术博客,通过自己的理解总结一下吧。1.二者相同点: 实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的。2.不同点: 圣杯布局知识点:浮动,负边距,相对定位,不需要添加额外标签。 双飞翼: ...
分类:
Web程序 时间:
2017-04-21 23:15:44
阅读次数:
319
1.div 和 span(为了应用CSS样式) span是内联样式(只占内容存在的那一部分) div是块级元素(占一整行) 2.盒模型 margin:盒子外边距 padding:盒子内边距 border:盒子边框宽度 width:盒子宽度 height:盒子高度 3.布局的相关属性 1)positi ...
分类:
Web程序 时间:
2016-09-06 12:18:25
阅读次数:
199
我想很多初学css的同学都会遇到这么一个问题,就是给定父盒子宽度之后,子盒子浮动,父盒子宽度不够之后,就会形成所谓的掉盒子。那么今天我就给广大初学者一个解决办法,老司机勿喷,仅供新手参考。 这就是所谓的掉盒子,因为四个盒子的宽度加起来超过了父盒子的宽度,所以浮动后,在正常情况下,会排列在第二行。那么 ...
分类:
其他好文 时间:
2016-08-22 23:23:25
阅读次数:
233
恢复内容开始 1. position:absolute 1.1 绝对定位设置定位值为百分比时: 如设置right:50%,即元素右侧外边框距离父盒子右侧始终始终为父盒子宽度的一半。 可以使用magin调节元素位置时(如居中等),且定位时使用的属性与设置外边距的属性一致,即left--margin-l ...
分类:
Web程序 时间:
2016-07-25 01:48:50
阅读次数:
263
内容概要:一、div和span(1)块级标签:div(2)内联标签:span如图所示:二、盒模型(重要)注:可用浏览器的调试工具可查看盒子(1)margin:盒子外边距(2)padding:盒子内边距(会改变块的大小)(3)border:盒子边框宽度(4)width:盒子宽度(5)height:盒子高度①:外边距和内..
分类:
Web程序 时间:
2016-07-16 07:15:08
阅读次数:
754
css盒子模型是前端必备知识点,分为两种盒子模型。 1.w3c标准盒子模型,如图 标准盒子模型的盒子宽度width=border-left + padding-left + width + padding-right + border-right; 而标准盒子高度就是height=border-to ...
分类:
Web程序 时间:
2016-06-26 01:50:02
阅读次数:
327
1.定位 position:fixed; left:50%; margin-left:(盒子宽度/2); 2.布局 居中 margin:50% auto; margin-top:负的(盒子高度/2); 3.布局 三列 中间自适应 两边固定宽度, position :absolute ; left:0 ...
分类:
其他好文 时间:
2016-04-22 11:50:33
阅读次数:
121
这两种方法都是让一个盒子在浏览器窗口居中。 第一种方法:先设置绝对定位,top和left的值都设置为50%。再把盒子的margin-top设置为盒子高度的一半,margin-left设置为盒子宽度的一半即可(注意这里的值都是负的)。 第二种方法:也是通过绝对定位,不过这里把top,right,lef ...
分类:
Web程序 时间:
2016-04-19 06:05:37
阅读次数:
156
在网页布局中,经常遇到长英文或链接在div等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。该如何解决这个问题呢?本文章通过实例向大家讲解css长英文或链接如何自动换行。 解决办法: 使用CSS属性 word-wrap:break-word;即可解决。使用break-word时,是将强制换行。
分类:
Web程序 时间:
2016-02-26 10:29:41
阅读次数:
604
css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化。rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X轴负方向的旋转,视觉上呈现盒子宽度上的变化。css2D旋转:translate(a,b):a,b,均...
分类:
Web程序 时间:
2014-11-03 20:50:23
阅读次数:
326