-
浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素,它将塌陷具有零高度【即父元素没设置高度,子元素设置了浮动】。你可以按以下哪种方法处理: A在浮动元素后加个div设置clear: both; height:0,overflow:hidden B使用clearfix; C设置父元素浮动; D以上方法均可 浮动脱离文档流 正常文档流中,父元素div就算没有设置高度和宽度,但是因为子元素有高宽,所以父元素会被子元素撑开; 当你设置两个子元素都是float的时候,子元素就脱离了普通文档流,换句话说子元素已经浮动到父元素头上了。那么这时候父元素就会出现一个问题,及父元素撑不开了(父元素找不到自己的该设置多高好了,这里是关键哦)。这就是题目中的父元素“塌陷具有零高度”的由来。如果你真正明白了上节最后为什么说了个“设置元素的clear属性后,该元素将排在所有浮动元素的最下行”,那你就感受到这道题其实非常厉害和有意思。 回到题目中,父元素塌陷了是因为找不到自己的高度依据。那么就好解决了,要么设置高度,要么父元素也浮动起来。其中A选项提供了非常有意思的处理办法,及在所有子元素最后加个0高度且clear浮动的元素查看全部
-
float浮动--脱离普通文档流 clear清除浮动 规定元素的哪一侧不允许其他浮动元素查看全部
-
margin查看全部
-
height:300px;查看全部
-
clear属性清除浮动。{left:不允许左侧有浮动流 right:不允许右侧有浮动流 top:不允许上侧有浮动流 down:不允许下面有浮动流 }查看全部
-
.mainBox{ background:#cff; width:960px; } .leftBox{ width:740px; background:#c9f; float:left; } .rightBox{ width:210px; background:#FCF; float:right; } .mainBox,.leftBox,.rightBox{ height:300px; }查看全部
-
在css中,给div设置的width和height属性是指内容区域的宽度和高度 填充,边框,边距分为上右下左四个方向,均可单独设置 margin为外边距,即盒子之间的间距,有margin-top,margin-right,margin-bottom,marin-left四个属性 padding为内边距 margin,padding :上 右 下 左(四个),上下 左右(两个) padding,border和margin属性的设定不会影响内容区域,但会影响元素的总尺寸 盒子在页面中所占的宽度 计算公式=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距. 盒子在页面中所占的高度\ 计算公式=上边距+上边框+上填充+内容高度+下填充+下边框+下边距.查看全部
-
。。。。查看全部
-
a 内联元素 :设置样式时,display:inline-block;就具有了内联元素和块级元素都有的属性,可以设置宽和高了。查看全部
-
li中加前缀背景图片时,一般可以加在li子元素中,比如<li><a></a></li>可以加在li a{ background:url() no-repeat;}查看全部
-
min-height:350px; 在IE6中无法识别min-height这个属性,可以用 _height:350px在代替(在IE6中,当内容超过设置值时,会自动撑开盒子)查看全部
-
* { margin:0; padding:0; font-size:12px; font-family:"微软雅黑"; } .topList { width:300px; height:180px; border:1px solid #E8E8E8; margin:0px auto; } ul { padding:5px; } li { list-style-type:none; height:30px; } em { width:20px; height:16px; background:url( http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat; display:block; text-align:center; font-style:normal; color:#333; background-position:0 -16px; float:left; } .top em { color:#FFF; background-position:0 0; } p{ float:left; } a:link,a:visited{color:#5e5e5e; text-decoration:none;}鼠标移动样式 a:hover,a:active{color:#b52725;text-decoration:underline;}查看全部
-
.topList a:link,.topList a:visited {text-decoration: none;color: #000;}去除符号查看全部
-
border:1px solid #E8E8E8;margin:0 auto; 边框线查看全部
-
要撑开父元素直接用overflow:hidden,_zoom:1查看全部
举报
0/150
提交
取消