CSS
文章平均质量分 82
梦jenny
前端开发
展开
-
九宫格基本布局
基本的九宫格(http://www.cnblogs.com/binyong) *{margin:0;padding:0;} .box{overflow:hidden;position:relative;width:50%;margin:20px auto;padding:10px;background:#F34703;} .t_l,.t_m转载 2015-04-07 23:02:33 · 777 阅读 · 0 评论 -
阿里笔试16前端布局
实现如下页面布局。核心区域左侧自适应,右侧固定宽度 200px *{margin:0; padding:0} #content {width:800px;margin: 10px auto} #header {border:solid 1px green;height:70px;p原创 2015-08-18 09:53:21 · 457 阅读 · 0 评论 -
层模型:CSS定位
层模型--绝对定位如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,原文档流中的元素会填补它在文档流中空出来的位置。然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口。原创 2015-04-13 20:17:42 · 436 阅读 · 0 评论 -
CSS盒模型宽度
盒模型--宽度和高度盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的,css内定义的宽(width)和高(height),指的是填充以里的内容范围。因此一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度也是同理。比如:css代码:div{ width:200px;转载 2015-04-13 19:52:29 · 451 阅读 · 0 评论 -
浮动布局——margin & 闭合浮动
实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 考察浮动 #content { background-color: red; position: relative; padding: 12px;/*red 的padding+blue的margin原创 2015-04-19 15:35:20 · 1019 阅读 · 0 评论 -
两种不同的方法来实现一个两列布局
用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 *{ margin:0; padding:0; } .div-a{ background-color: #ccf; f原创 2015-04-18 21:32:59 · 653 阅读 · 1 评论 -
左右布局
1、右定宽,左自适应右边定width,float:righthtml中rightside放在前面 *{margin:0 auto; padding:0; font-size:9pt;} .contact{width:100%; border:solid 1px red;} .leftside{ background:bisque; height:100原创 2015-04-01 21:34:30 · 636 阅读 · 0 评论 -
CSS实现自适应圆角矩阵——滑动门
css圆角矩形对于很多人来说,都觉得很难.在table中要实现圆角矩形我想很多人都会,而在css中要定义圆角矩形也并不难,不过要一个宽度不固定的框,事情变得有些复杂了。宽度不固定,就意味着这个框在水平和垂直方向都有足够灵活的变化。在这个教程中,我们一起探讨一个css圆角矩形的技术. 为什么说这更难一些呢?因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来,以便框能够在转载 2015-04-18 18:48:33 · 1499 阅读 · 0 评论 -
圣杯布局
css 布局 *{ margin:0; padding: 0; } #head{ text-align: center; background-color: #CCCCFF; } #footer{转载 2015-04-19 13:38:15 · 469 阅读 · 0 评论 -
小tip: margin:auto实现绝对定位元素的水平垂直居中
« 小卖弄:纯CSS实现的outline切换transition动画效果小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 »小tip: margin:auto实现绝对定位元素的水平垂直居中by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?转载 2015-04-01 22:26:16 · 458 阅读 · 0 评论 -
负margin实现左右布局
CSS网页制作教程:负margin制作自适应左右布局刚刚开始学习css的时候,我采用了float为主来实现布局的方式,但是运用浮动很长一段时间之后,我发现这是一种被人牵着鼻子走的做法。至少,页面上不应过多的运用浮动,尤其是不要拿来确定整个布局。很简单的道理,当你用了float:left,后面的div很可能需要跟着用float:left,而且当宽度不够的时候,本来该和上一个div转载 2015-04-03 09:54:42 · 616 阅读 · 0 评论 -
九宫格布局
实现九宫格,且无外边框;我认为这样做最好 * { padding:0; margin:0;} ul{ width: 153px;height: 153px; background: #99FF99;margin: 10px 20px; } ul li{ list原创 2015-04-07 18:02:38 · 342 阅读 · 0 评论 -
块内元素水平居中
水平居中总结-不定宽块状元素方法(一)在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多):加入 table 标签设置 display;inline 方法设置 position:relative 和 left:转载 2015-04-13 20:47:27 · 512 阅读 · 0 评论 -
块状元素居中(三)
不是很懂!水平居中总结-不定宽块状元素方法(三)方法三:通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。代码如下: 1 2 3 css代码原创 2015-04-13 21:16:41 · 491 阅读 · 0 评论 -
float浮动不清楚对块状元素的影响
*{margin:0; padding: 0} /* p{ margin: 0; float: left; }*/ ul { float:left; width:100%; padding:0;原创 2015-04-16 18:26:37 · 1495 阅读 · 0 评论 -
CSS实现左中右三栏布局
左右定宽,中间自适应原创 2015-04-03 10:37:57 · 860 阅读 · 0 评论 -
盒模型
标准盒子模型介绍点击查看 原来我知道 标准模型的宽度是 内容width IE模型的宽度是border+内容width+padding IEwidth 其实它所说的width height 是指的是内容content的width 和height 导致我有点混淆 标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不原创 2015-08-18 21:19:13 · 299 阅读 · 0 评论