前端面试题整理_杭州 前端面试题-程序员宅基地

技术标签: css  html  

常用浏览器与内核
  • IE            Trident,也是俗称的IE内核;
  • Chrome   统称为Chromium或Chrome内核,以前是Webkit,现在是Blink内核;
  • Firefox     Gecko,俗称Firefox内核;
  • Safari       Webkit;
  • Opera      最初是自己的Presto,后来加入谷歌大军,从Webkit又到了Blink内核

拓展:360、猎豹:IE+Chrome双内核;
           搜狗、遨游、QQ浏览器:Trident(兼容模式)+Webkit(高速模式);

行内元素、块级元素
  • 行内元素:水平排列,不自动换行。宽度取决自身的内容,不能包含块级元素。
                      设置宽、高、上下外边距(padding)、margin均无效。
                      < a >、< b >、< br >、< i >、< span >、< input >、< select >……
  • 块级元素:垂直排列,独占一行的。宽度取决父元素宽度的百分百。
                      < div >、< p >、< h1 >、< h2 >、< h3 >、< h4>、< form >、< ul >……
清除浮动
  • 父级div定义 height
    原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
    优点:简单,代码少,容易掌握
    缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

  • 结尾处加空div标签 clear:both
    原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度;
    优点:简单,代码少,浏览器支持好,不容易出现怪问题
    缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div

  • 父级div定义 伪类 :after 和 zoom
    原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
    优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
    缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持。
    建议:推荐使用,建议定义公共类,以减少CSS代码。

  • 父级div定义 overflow:hidden
    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
    优点:简单,代码少,浏览器支持好
    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

  • 父级div定义 overflow:auto
    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度
    优点:简单,代码少,浏览器支持好
    缺点:内部宽高超过父级div时,会出现滚动条。
    建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

<style type="text/css">
    .div1{background:blue;/*父级DIV定义height清除浮动 height:200px;*/ 
          /*父级DIV定义overflow清除浮动 width:98%;overflow:hidden或overflow:auto*/}
	.div2{background:yellow;height:100px;margin-top:10px}

	.left{float:left;width:20%;height:200px;background:red}
	.right{float:right;width:30%;height:80px;background:red}

	/*空DIV 清除浮动代码*/
	.clearfloat{clear:both}
	
	/*伪类 清除浮动代码*/
	.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
	.clearfloat{zoom:1}
	或者
	.clear:after{content:'\0020';display:block;height:0;clear:both}
	.clear{*zoom:1}
</style>

<div class="div1 clearfloat">
	<div class="left">Left</div>
	<div class="right">Right</div>
	<!--空DIV清除浮动
	<div class="clearfloat"></div>-->
</div>

<div class="div2">
	div2
</div>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/angelina170314/article/details/106731191

智能推荐

java爬取网页内容 简单例子_java获取网页例子-程序员宅基地

文章浏览阅读337次。java爬取网页内容 简单例子(1)——使用正则表达式【本文介绍】  爬取别人网页上的内容,听上似乎很有趣的样子,只要几步,就可以获取到力所不能及的东西,例如呢?例如天气预报,总不能自己拿着仪器去测吧!当然,要获取天气预报还是用webService好。这里只是举个例子。话不多说了,上看看效果吧。【效果】我们随便找个天气预报的网站来试试:http://www.weat_java获取网页例子

配置SOIL库,实现纹理加载_soil库下载-程序员宅基地

文章浏览阅读9.2k次,点赞2次,收藏6次。SOIL 是一个用于向OpenGL中加载_soil库下载

怎么删除计算机的一个用户名和密码,哪位晓得电脑有两个账户怎么删除一个-程序员宅基地

文章浏览阅读7.9k次。我是疯狂的骆驼回答数:24214|被采纳数:512016-12-13 08:25:15计算机用户账户:计算机用户账户:由将用户定义到某一系统的所有信息组成的记录,账户为用户或计算机提供安全凭证,包括用户名和用户登陆所需要的密码,以及用户使用以便用户和计算机能够登录到网络并访问域资源的权利和权限。删除的方法:针对Windows xp1、重启电脑用Administrator账户登录,右键我的..._怎么删除电脑另外一个账户

如何处理好前后端分离的 API 问题_后端api和client端api 需要放在一起吗-程序员宅基地

文章浏览阅读1.1k次。API 都搞不好,还怎么当程序员?如果 API 设计只是后台的活,为什么还需要前端工程师。作为一个程序员,我讨厌那些没有文档的库。我们就好像在操纵一个黑盒一样,预期不了它的正常行为是什么。输入了一个 A,预期返回的是一个 B,结果它什么也没有。有的时候,还抛出了一堆异常,导致你的应用崩溃。因为交付周期的原因,接入了一个第三方的库,遇到了这么一些问题:文档老旧,并且不够全面。这个问题相比于没有文档来说,愈加的可怕。我们需要的接口不在文档上,文档上的接口不存在库里,又或者是少了一行关键的代码。对于一_后端api和client端api 需要放在一起吗

初学Flutter Each child must be laid out exactly once-程序员宅基地

文章浏览阅读9k次。根据Flutter 中文网敲代码class RandomWords extends StatefulWidget { @override State<StatefulWidget> createState() { // TODO: implement createState return new RandomWordState(); }}clas..._each child must be laid out exactly once

opencv数据结构CvScalar-程序员宅基地

文章浏览阅读1.4w次,点赞7次,收藏10次。opencv数据结构CvScalarhttp://www.gbs-cqh.net/cvscalar/ c接口中定义为结构体CvScalar;c++接口中定义为类Scalar。下面是c接口中的定义:这个 CvScalar就是一个可以用来存放4个double数值的数组;一般用来存放像素值(不一定是灰度值哦)的,最多可以存放4个通道的。typedef struct CvScala_cvscalar

随便推点

用Python轻松打造定制款《植物大战僵尸》-程序员宅基地

文章浏览阅读567次。《植物大战僵尸》这款游戏也算是曾经风靡一时,不少网友曾用Python开发《坦克大战》、《飞机大战》、《扫雷》等经典游戏,开发《植物大战僵尸》当然也没问题。相比《坦克大战》等游戏,《植物大..._用python制作植物大战僵尸游戏

html(10-小鲜兔儿项目)_小兔鲜儿项目素材-程序员宅基地

文章浏览阅读8.5k次,点赞18次,收藏67次。文章目录综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发3 网站入口 xtx-entry 部分开发4 新鲜好物面板 xtx-new-goods 部分开发5 生鲜商品面板 xtx-fresh-goods 部分开发二 项目结构三 代码实现3.1 index.html 代码3.2 base.css 代码3.3 common.css 代码3.4 index.css 代码四 效果综合项目小兔鲜项目一 分析1 Header 部分开发2Footer 部分开发_小兔鲜儿项目素材

J2EE+Flex的菜单及权限控制实践_import flex.messaging.flexcontext-程序员宅基地

文章浏览阅读742次。本文讲述了J2EE+Flex的一些开发心得。作者一直是搞J2EE的,使用了blazeds,Flex通过RemoteObject调用Java的后台方法。这样的一个最大的好处就是不再需要struts这样之类的框架了,可以直接使用spring中的bean。AD:最近学习了下Flex,我一直是搞J2EE的。所以想整合试着开发,J2EE+Flex在网上查了些资料,有好_import flex.messaging.flexcontext

java robot 游戏_JAVA制作游戏脚本(1)---Robot机器人-程序员宅基地

文章浏览阅读1.6k次。JAVA制作游戏脚本(1)—Robot机器人//1.创建一个机器人实例Robot robot = new Robot();API//2.延时函数robot.delay(毫秒值);//3.鼠标按下,括号中加按下的键InputEvent.BUTTON1_DOWN_MASK (鼠标左键)InputEvent.BUTTON2_DOWN_MASK (鼠标中键)InputEvent.BUTTON3_DOWN_...

云南师范大学泰语718量子力学831普通物理考研真题-程序员宅基地

文章浏览阅读358次,点赞10次,收藏10次。云南财经大学805马克思主义基本原理概论考研真题2017-2021[缺2020]云南财经大学704毛中特考研真题2017...云南师范大学333教育综合考研真题2010--2023年[含答案]云南师范大学812初等教育学考研真题2012--202...云南师范大学718量子力学考研真题2017--2020年云南师范大学831普通物理考研真题2017--2020年...云南师范大学泰语考研真题考研真题2016--2019年...云南财经大学432统计学考研真题应用统计学考研真题。云南师范大学泰语考研真题。

hive 分页实现_hive limit 分页-程序员宅基地

文章浏览阅读3k次。1.支持limit n,m语法的hive版本#!/bin/bashcnt=$(set hive.cli.print.header=false;hive -e "select count(*) from exam.userbehavior;")echo "总记录数: $cnt 条"#每页10条pageSize=10pageNum=`expr $cnt + $pageSize - 1 / $pageSize`echo "总页数: $pageNum 页"for((a=0;a<=$pa_hive limit 分页

推荐文章

热门文章

相关标签