为了账号安全,请及时绑定邮箱和手机立即绑定

企业网站综合布局实战

zkpplpp PHP开发工程师
难度初级
时长 2小时55分
学习人数
综合评分9.73
544人评价 查看评价
9.8 内容实用
9.8 简洁易懂
9.6 逻辑清晰
  • 浮动会让元素塌陷。即被浮动元素的父元素不具有高度。例如一个父元素包含了浮动元素,它将塌陷具有零高度【即父元素没设置高度,子元素设置了浮动】。你可以按以下哪种方法处理: A在浮动元素后加个div设置clear: both; height:0,overflow:hidden B使用clearfix; C设置父元素浮动; D以上方法均可 浮动脱离文档流 正常文档流中,父元素div就算没有设置高度和宽度,但是因为子元素有高宽,所以父元素会被子元素撑开; 当你设置两个子元素都是float的时候,子元素就脱离了普通文档流,换句话说子元素已经浮动到父元素头上了。那么这时候父元素就会出现一个问题,及父元素撑不开了(父元素找不到自己的该设置多高好了,这里是关键哦)。这就是题目中的父元素“塌陷具有零高度”的由来。如果你真正明白了上节最后为什么说了个“设置元素的clear属性后,该元素将排在所有浮动元素的最下行”,那你就感受到这道题其实非常厉害和有意思。 回到题目中,父元素塌陷了是因为找不到自己的高度依据。那么就好解决了,要么设置高度,要么父元素也浮动起来。其中A选项提供了非常有意思的处理办法,及在所有子元素最后加个0高度且clear浮动的元素
    查看全部
    0 采集 收起 来源:练习题

    2016-02-26

  • float浮动--脱离普通文档流 clear清除浮动 规定元素的哪一侧不允许其他浮动元素
    查看全部
    0 采集 收起 来源:浮动 float

    2016-02-26

  • margin
    查看全部
    0 采集 收起 来源:盒子模型

    2016-02-25

  • height:300px;
    查看全部
  • clear属性清除浮动。{left:不允许左侧有浮动流 right:不允许右侧有浮动流 top:不允许上侧有浮动流 down:不允许下面有浮动流 }
    查看全部
    0 采集 收起 来源:浮动 float

    2016-02-24

  • .mainBox{ background:#cff; width:960px; } .leftBox{ width:740px; background:#c9f; float:left; } .rightBox{ width:210px; background:#FCF; float:right; } .mainBox,.leftBox,.rightBox{ height:300px; }
    查看全部
    0 采集 收起 来源:编程练习

    2016-02-24

  • 在css中,给div设置的width和height属性是指内容区域的宽度和高度 填充,边框,边距分为上右下左四个方向,均可单独设置 margin为外边距,即盒子之间的间距,有margin-top,margin-right,margin-bottom,marin-left四个属性 padding为内边距 margin,padding :上 右 下 左(四个),上下 左右(两个) padding,border和margin属性的设定不会影响内容区域,但会影响元素的总尺寸 盒子在页面中所占的宽度 计算公式=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距. 盒子在页面中所占的高度\ 计算公式=上边距+上边框+上填充+内容高度+下填充+下边框+下边距.
    查看全部
    1 采集 收起 来源:盒子模型

    2016-02-23

  • 。。。。
    查看全部
  • 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;}
    查看全部
    0 采集 收起 来源:编程练习

    2018-03-22

  • .topList a:link,.topList a:visited {text-decoration: none;color: #000;}去除符号
    查看全部
    0 采集 收起 来源:编程练习

    2016-02-21

  • border:1px solid #E8E8E8;margin:0 auto; 边框线
    查看全部
    0 采集 收起 来源:编程练习

    2016-02-21

  • 要撑开父元素直接用overflow:hidden,_zoom:1
    查看全部
    0 采集 收起 来源:练习题

    2016-02-21

举报

0/150
提交
取消
课程须知
1. 您已具备HTML 常用标签和属性。 2. 您已具备CSS 常用属性和值。 3. 您想提升网页布局技能。
老师告诉你能学到什么?
1.CSS中盒子模型的使用 2.网页三列布局方法 3.两列自适应高度布局方法 4.幻灯片切换效果的制作方法 5.导航菜单的制作方法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!