div style常用属性_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
div style常用属性
上传于|0|0|文档简介
&&自己整理的块样式
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩17页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢今天看啥 热点：
未知宽高div水平垂直居中3种方法，div水平居中3种
&!DOCTYPE html&
&meta charset=&utf-8& /&
&!--方法1：一个未知宽高的弹出框，水平垂直居中--&
&div style=&position:width:100%;height:600border:1px solid #888&&方法1
&div class=&modal&&
&div class=&modal-header&&弹出窗标题&/div&
&div class=&modal-body&&
微信开发者大会（北京）的成功举办，引起业界的极大关注。
应广大微信开发者的强列要求，深圳微信开发者大会也在如火如荼的筹备中。
本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由
&style type=&text/css&&
.modal-header {
padding: 10px 20
background: rgba(0,0,0,.25);
.modal-body{
padding: 20
background: #
border: 1px solid #888;
border-radius: 5
box-shadow: 0 0 3px rgba(0,0,0,.5);
/**主要代码*/
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
&!--方法1 end--&
&!--方法2 parent-panel内的元素水平垂直居中--&
&div class=&parent-panel&&方法2
&div class=&middle-panel&&
&p&深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，
在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。
&p&正进行微信开发的开发团队（开发者）、有兴趣或即将投身于微信开发的开发者、
想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。
&p&如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
&style type=&text/css&&
.middle-panel{
border:1px solid #888;
.parent-panel{
width:100%;
height:400
border:1px solid #888;
/**主要代码*/
align-items:
justify-content:
&!--方法2 end--&
&!--方法3 parent-panel2内的元素垂直居中--&
&div class=&parent-panel2&&方法3
&div class=&middle-panel2&&
&p&深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，
在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。
&p&如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
&style type=&text/css&&
.middle-panel2{
border:1px solid #888;
display:inline-
vertical-align:
.parent-panel2{
width:100%;
height:400
border:1px solid #888;
.parent-panel2:after{
/**主要代码*/
content:&&;
display: inline-
vertical-align:
height: 100%;
&!--方法3 end--&
说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0auto，CSS自动算出左右边距，使得DIV居中。.mydiv{margin:0width:300height:200}但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。.mydiv{width:300height:200position:left:50%;top:50%;margin:-100px00-150px}该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。jQuery实现水平和垂直居中jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下：$(window).resize(function(){$(&.mydiv&).css({position:&absolute&,left:($(window).width()-$(&.mydiv&).outerWidth())/2,top:($(window).height()-$(&.mydiv&).outerHeight())/2});});此外在页面载入时，就需要调用resize()。$(function(){$(window).resize();});此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。
点评：从事页面重构以来，由于经常遇见宽度不固定的div在水平或垂直居中的问题！总结下！留着以后用宽度高度不固定div的水平居中演示如下：水平居中代码：html部分&div class=&container&&&div class=&center&&&a href=&#&&1&/a&&a href=&#&&2&/a&&a href=&#&&3&/a&&div style=&clear:both&&&/div&&/div&css部分.container{width:500height:80background:#C2300B;margin-left:50padding-top:10text-align:}.center{display:inline-border:2px solid #}.center{_display:} /*针对ie6 hack*/.center a{float:border:1px solid #padding:5px 10margin:10color:#text-decoration:}代码要点：父容器container加css属性 text-align:子容器center加css属性display:inline-.center{_display:} 为针对ie6的hack宽度高度不固定的div垂直居中演示如下：垂直居中代码：html部分&div id=&vc&&&div id=&vci&&&div id=&content&&我们垂直居中了，我们水平居中了&/div&&/div&&/div&css部分#vc { display: background-color:#C2300B; width:500 height:200 overflow: margin-left:50 }#vci { vertical-align: display:table- text-align: _position: _top:50%; _left:50%; }#content { color:# border:1px solid # display:inline- _position: _top:-50%; _left:-50%; }代码要点：父容器vc的css属性 display:overflow:子容器vci的css属性 vertical-align:display:table-针对ie6的hack，vci容器的 _position:_top:50%; 和content容器的 _position......余下全文>>
相关搜索：
相关阅读：
相关频道：
&&&&&&&&&&&&&&&&&&
WEB前端教程最近更新中一个div有两个高度，如何去掉括号里的高度
全部答案（共1个回答）
width: 500px !}
就两种.相对与绝对
楼上的说得很对，功能嘛，那导航栏那边，在CSS时写a:link { color:backgournd-color:#}
可能是部分事实，但不是全部，受到攻击是假，资料丢失是真，原因应该是开跨服程序与暴雪提供的技术版本冲突所致，由于双方沟通不充分引起的。
大家还关注
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
IE 和 FF（火狐）打开页面看到的效果是一样的，外div都被撑高了。
不过，有时需要制作两个内div并排，就需要设定“左浮动”。
&div style="background-color:#width:500"&外div&div style="background-color:#width:200float:left;"&…………&/div&&/div&
刷新页面：
IE里效果没有发生变化，外div的高度照样是被内div撑大。
但是FF里就不一样了，外div的高度只剩下和内容一样高了。内div竟然跑到外面去了！
看来，在FF浏览器里，内div如果浮动起来，外div就管不了它了 ：）
想管住它可以，也浮动起来吧！
&div style="background-color:#width:500float:left;"&外div&div style="background-color:#width:200float:left;"&…………&/div&&/div&
刷新页面，又看到刚起的样子了。解决了FF浏览器的一个问题！
还没完，经常是要将所有的内容放置在页面正中间的（居中），于是编辑body的样式：
&body style="text-align:margin:"&
text-align:center 和 margin:auto 一个都不能缺！
刷新页面看看：结果是，两种浏览器里，都没有实现居中。
body的样式设置是没有问题的，但是效果并没有出来。
原因在于：外div浮动起来，现在body（页面主体）也管不住它了 ：）
现在是，连IE浏览器里，对浮动的外div，也管不住了！
那就让body也浮动起来嘛。开玩笑的，body是不能浮动起来的！
怎么办呢？在外div的外面，再套一个div（一定要有指定宽度），只要这个div不是浮动的，那么body就能看住它了！
&body style="margin:text-align:"&&div style="width:500"&&&& &div style="background-color:#width:500float:"&外div&&&&&&&& &div style="background-color:#width:200float:"&…………&/div&&&& &/div&&/div&
再刷新页面看看效果：IE里已经实现了居中的效果，但是FF就是要表现得高傲一些，依然没有居中。
再编辑一下样式，将最外层的div与外界的距离设定为自动（margin:auto，火狐就喜欢这个）。
&body style="margin:text-align:"&&div style="width:500margin:"&&&& &div style="background-color:#width:500float:"&外div&&&&&& &div style="background-color:#width:200float:"&…………&/div&&&& &/div&&/div&
再看看效果吧，如果还不行，就把这只狐狸宰杀或者放逐掉，抛弃掉算了 ：）
怎么样，都居中了吧。毕竟狐狸也是聪明的，它也怕我们不要它！
& 总结1：层套层的自动伸缩
& 内层不浮动的情况下：
& 外层被撑大 √
& 外层被撑大 √
& 内层浮动的情况下：
& 外层被撑大 √
& 外层不被撑大 ×
& 外层保持了自己的大小，内层伸到外面去了
& 外层如果还想要套住内层，自动被撑大，方法就是，也跟着浮动起来
& 总结2：层在页面的居中情况（body的样式：text-align: margin:）
& 层不浮动的情况下：（层一定要定义好宽度）
& 层在页面居中 √
& 层靠左，没有居中 ×
&& 解决方法：层样式margin:（自动调整与外界的距离）
& 层浮动的情况下：
& 层靠左，没有居中 ×
&& 解决方法：层外面再套一个层，并定义好宽度
& 层靠左，没有居中 ×
&& 解决方法：层外面再套一个层，并定义好宽度、距离自动
阅读(1182)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_084068',
blogTitle:'，IE 和 FF 对比，外div的高度是否会被内div撑大',
blogAbstract:'文章最下面有总结\r\n层（div）嵌套，内外层都没有定义高度的情况下，外层的高度是否会随着内层高度（内容多）的增加而增加？\r\n为了看清效果，内外层都设定了背景颜色，同时设定外层的宽度比较大。\r\n\r\n\r\n\r\n&div style=\"background-color:#width:500\"&外div&div style=\"background-color:#width:200\"&…………&/div&&/div&\r\nIE 和 FF（火狐）打开页面看到的效果是一样的，外div都被撑高了。\r\n',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:5,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:true,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中... - 推酷
DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中...
一个入门的DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度。
1. 我的第一反应：
&div style=&width:500&&
&div id=&px1& style=&float: height:100 width:150 background-color:&&&/div&
&div id=&px2& style=&float: height:100 width: background-color:&&&/div&
&div id=&px3& style=&float: height:100 width:150 background-color:&&&/div&
然后发现不对，中间红色的div根本就没有显示：
2. 百度看到一个
，4楼 的答案如下：
这是比较典型的一个三栏布局&给你思路吧
左右两个可以用绝对定位&让他们分别left:0;和right:0;
然后中间的元素不定宽度&让他们的margin-left和margin-right分别对应左右两栏的宽度就好了
&div style=&width:500& &
&div id=&px1& style=&position: left:0height:100 width:150 background-color:&&&/div&
&div id=&px2& style=&float: height:100px;margin-left:150margin-right:150 width:100%; background-color:&&&/div&
&div id=&px3& style=&position: right:0height:100 width:150 background-color:&&&/div&
结果如下：（灰色为html页面背景）
很明显，这不符合预期。左右2个div的 定位出现问题了，不是以 父div 来定位，而是以 窗口 为 父元素定位了。于是我在w3cshool详细了解才发现：
absolute:&
生成绝对定位的元素，相对于
static 定位以外
的第一个父元素进行定位。
就是说现在左右2个div的父元素是 static 定位（static是默认的定位方式），我们就不要他，不以他为准了。那怎么办，把那个父div改为 position: absolute 呗，于是&
3. 修改父元素为非static定位
&div style=&width:500position:left:200top:100& &
&div id=&px1& style=&position: left:0height:100 width:150 background-color:&&&/div&
&div id=&px2& style=&float: height:100margin-left:150margin-right:150 width:100%; background-color:&&&/div&
&div id=&px3& style=&position: right:0height:100 width:150 background-color:&&&/div&
结果是：（我给页面加了浅灰色背景）
可以发现：左右2个 absolue 的div元素都乖乖的没有问题，倒是中间的div 明显变长了，突出了一部分。用Chrome调试，发现是右边的绿色div覆盖在了中间的红色div上，并且红色div整体刚好是 宽500px。
应该说，它的 margin-left 起作用了，但是宽度100%，却变成了宽度500px，并且仿佛 margin-right 丝毫不起作用。
4. 去掉 margin-*
后来把 margin-left 去掉，发现正常了。（其实就是绿色和灰色把红色的左右两边遮住了而已，其实红色还是500px）。
&div style=&width:500position:left:200top:100& &
&div id=&px1& style=&position: left:0height:100 width:150 background-color:&&&/div&
&div id=&px2& style=&float: height:100 width:100%; background-color:&&&/div&
&div id=&px3& style=&position: right:0height:100 width:150 background-color:&&&/div&
结果就正常了：
5. 但是也就看上去正常，但感觉不是符合要求，并没有充满“剩余宽度”，而是直接充满“全部宽带”，然后用个小技巧覆盖掉左右宽度。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致