热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

计算盒子模型的尺寸、display属性、块级和内联元素、浮动、overfloat

计算盒子模型的尺寸盒子实际高度上下外边距+上下边框+上下内边距+内容高度盒子实际宽度左右外边距+左右边框+左右内边距+内容宽度box-sizin

计算盒子模型的尺寸

 盒子实际高度=上下外边距+上下边框+上下内边距+内容高度

 盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度

         

说明:在div中放入一张图片,求这个div的宽度?300px+5*2=310px

       若在样式中添加”padding:20px;”则这个div的宽度:300+5*2+20*2=350px(乘以2是左右内边距)

       若在样式中再添加”box-sizing:content-box;”宽度为:300+5*2+20*2=350px会把div撑宽

    若在样式中再添加“box-sizing:border-box;”宽度为300px,在内容中缩小,所以比原本div宽要小,导致那张图片的宽度会被挤小点(图片宽度为:300-5*2-20*2=250px

结论:

 

 

应用:制作京东快报

 

display属性

 技能目标

   会使用float属性布局网页并定位网页元素

   会使用clear属性清除浮动

   会使用overflow进行溢出处理


块级元素

 

独占一行,可以设置宽高

内联(行内)元素 内容是多少,宽度就是多少,并不会独占一行

                                 设置宽高但不起作用,设置paddingmargin也不起作用

 

块级元素和内联元素能否互相转换呢?使用display

 

 

标准文档流的组成

 块级元素

    

...

、列表

 内联(行内)元素

...

display属性

  控制元素的显示和隐藏

  块级元素与行内元素的转变

      值            说明

     none    设置元素不会被显示

     inline  元素会被显示为内联元素

     block   元素会被显示为块级元素

     inline-block 行内块元素         让内联元素拥有块级元素的特点(宽高,paddingmargin的效果)

 Display=none  一般用于网上购物时,比如鼠标移动到购物车有你购买的商品显示,移走就被隐藏了

 Div,span{

      Width100px

      Height100px

      Border:1px red soild;

   }

   .class1{

      Display:inline                  加了这句会导致这个div块级元素变为内联元素,

   }                               因此特性:不会独占一行、设置宽高不起作用

这是一个div块级元素

这是一个内联元素span

将块级元素设置为内联元素加display:inline;

将内联元素设置为块级元素加display:block;

 

要想一个内联元素宽高起作用,则加display:inline-block;

   .class1{

     Display:inline-block;

   }

行内块元素

内联元素

  这里网页效果是”行内块元素”和”内联元素”是占一行的,说明行内块元素原本是内联元素,但是他能设置宽高。

应用:京东顶部的导航条

1、导航条用

  • ..
    • 制作,但是呈现竖直,要想变为水平则样式中ul li{display:inline-block}  为什么而不是inline,以为导航名之间要设置内边距,效果更好看


      2、盒子模型对行内元素不起作用

      总结:先判断元素是行内元素还是块元素,要使它起作用是否要使它变为行内元素还是块元素


      常见的网页布局  上为导航,中为内容,下为版权

        上下结构

        上中下结构

        上左右下结构:1-2-1结构          内容分左右部分

        上左中右下结构:1-3-1结构

      浮动 -float属性(可以查看京东导航条,列表项所在的div样式)

        属性值       说明

         left      元素向左浮动

         right     元素向右浮动

         none      默认值,元素不浮动

       当我让元素浮动起来,停止浮动的条件:如果浮动元素遇到父容器的边,它就会停止。遇到前一个浮动元素也会停止

       

      clear属性

        属性值          说明

         left        在左侧不允许浮动元素

         right       在右侧不允许浮动元素

         both        在左右两侧不允许浮动元素

         none        默认值。允许浮动元素出现在两侧

       

      一个div里面有几个div,父元素包含几个子元素,如何让父容器随子元素的高度自适应?


      因为浮动的原因,脱离了文档流,父元素起不了包裹的作用,而父容器还老实巴交在文档流待着,两者的层级不一样。

        方法一:在父容器中添加一个空的div。样式为:clearboth,让父元素和子元素拉到一个层级

        方法二:给父容器填加一个样式。样式为:overfloathidden

      两种扩展盒子高度的区别

        使用overflow属性扩展盒子高度减少代码量,也减少了空的HTML标签,使代码更加简洁,清晰,从而提高了代码的可读性和网页性能

        如果页面中有定位元素,并且元素超出了父级的范围,就必须使用clear属性来清除浮动来扩展盒子高度


      Overflow是对父容器的内容溢出了怎么处理




       

       




推荐阅读
  • 媒介这里大部份是本身碰到过的状况,另有一部份自创了偕行的文章,假如人人有碰到别的坑,迎接提出来一同研讨。学问要点1.Meta标签1.制止用户缩放页面,页面强迫让文档的宽度与装备的宽 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 吐槽:团队遣散,我们该何去何从?
    写在最前:纯属吐槽,漫笔,勿喷!就在前些天,放工回家的路上,看到群信息,说:据说京东裁人了~,也是在上上月,也一度被传的沸沸扬扬的:阿里、京东、华为接踵被曝住手社招,音讯也是满天飘 ... [详细]
  • FileReader详解与实例---读取并显示图像文件
    我们曾经在《HTML5中File对象初探》中,使用到了FileReader,在那篇文章中,它被用来将一个文件读取为二进制字符串,并通过xhr发送到后端形成交互。作为FileAPI的一部 ... [详细]
  • 活动主题:五一巨献,问答有礼,105QB送给IT互联网界的劳动人民活动时间:4月30日晚上10点~5月2日晚上10点网址:http:ask.jiutianniao.com ... [详细]
  • a web-based music player(GO + html5)
    github地址:https:github.comcoderchengmusic-player后台是用GO(windowslinux都可以),前端是HTML5推荐 ... [详细]
  • 前端监控数据网络(要求阻拦)
    所谓web,纵然你我素未谋面,便知志趣相投;深居简出,亦知天下之大。01—为何阻拦要求如今的web运用,大都是经由过程要求(http)去猎取资本,拿到资本后再显现给用户,一个页面中 ... [详细]
  • Well,Ivebeensearchingfewdaysalready,howtodisplayHTML5videoinfull-screenmodeonandroi ... [详细]
  • 记一道腾讯前端笔试题
    我今年4月投递了腾讯前端开发岗位,很可惜笔试题没通过,48小时内给出答案回复面试官,我的答案太过于简单,所以后面面试官估计也就懒得回我这个菜鸡来(嘤嘤嘤)。当然以我现在的眼光来重新 ... [详细]
  • 一款清新的jQuery日历插件带日期的Tooltip提示543人浏览发表回复这是一款非常简单清新的jQuery日历插件,它并没有特别的日期或者时间选择功能,仅仅是展示一个简单的日历控件。这款jQu ... [详细]
  • 极简版Promise满足的使用方式生成实例对象的方式:newMyPromise()通过类直接调用静态方法:MyPromise.resolve(),目前静态方法仅支持resolve& ... [详细]
  • 引见socket.io是一个基于websocket完成的前后端及时通信框架,也对低版本浏览器做了封装。运用起来简朴,轻易。首次运用起来可能会比较含糊,实在重要经常使用就几个要领,简 ... [详细]
  •   html5与js,  本文介绍html5shiv.js和respond.min.js与大家分享,如下:  做 ... [详细]
  • 新版本在线体验地点已上线,迎接体验?—2017-01-14喜好就Star,不只是Fork;想要分享的结果才是驱动力,而手艺仅仅是一种要领。TP-adminTP-admin即基于Th ... [详细]
author-avatar
葛妹秀
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有