bfc

面试常见技术问题

若如初见. 提交于 2019-12-06 04:15:21
--------- JQ --------- 1.jq 常见选择器? ,号选择器,分组选择器。空格,祖父选择器。>大于号,父子选择器。+号选择器,紧接下一个兄弟选择器。~号,元素之后所有的 siblings 元素。 :first,:last,:not,:first-child,:last-child,:animated.:checked 2.jQuery 插件实现方式,分别介绍? jQuery.fn.extend 封装直接在$下面的方法,就是根下面, 扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。 $.extend 用来在 jQuery 命名空间上增加新函数。用一个或多个其他对象来扩展一个对象,返回被扩展的对象 批量的方法用 fn,静态的用$.extend(),不建议用扩展到根下面。 3.bind 和 live 的区别? live 方法其实是 bind 方法的变种,其基本功能就同 bind 方法的功能是一样的,都是为一个元素绑定某个事件,但是 bind 方法只能给当前存在的元素绑定事件,对于事后采用 JS 等方式新生成的元素无效,而 live 方法则正好弥补了 bind 方法的这个缺陷,它可以对后 生成的元素也可以绑定相应的事件。 4.js 和 jq 如何转换? jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是

如何生成BFC?BFC的规则

主宰稳场 提交于 2019-12-05 22:31:00
1、什么是BFC? BFC 全称为 “块 格式化 上下文” (Block Formatting Context) 1、如何生成 BFC? (1) float:left 或 right (2) 根元素 Html (3) overflow:hidden,auto,scoll (4) display:inline-block; (5) position:fixed,absolute 2、BFC 规则 (1) 垂直方向上的距离由 margin 决定,属于同一个 BFC 的两个相邻的标签的 margin 会发生重叠 top盒子与bottom盒子垂直间距40px(并没有把margin-top margin-bottom叠加起来 而是取了较大的一个值,因为他们发生了重叠) (2) 每个标签的左外边距与包含块的左外边界相接触(从左向右),即使浮动标签也是如此。 这个理解就比较简单了,任何一个标签在你没有设置margin,padding,position,等改变其位置的属性是,他默认放在最左边,后面的一个接一个 (3) BFC 的区域不会与 浮动 的标签区域重叠 a左浮动了b也左浮动了,a与b不会重叠,只会一个接一个的放置 (4) 计算 BFC 高度的时候,浮动子元素也参与计算 说一个很简单的例子,我们知道清除浮动的方法有很多,其中一种就是给父元素也设置浮动,父元素就有高度了,其原因就在这

细说清除浮动

流过昼夜 提交于 2019-12-05 17:37:24
一、什么是清除浮动? 先说下为什么需要清除浮动。 一个元素设置了浮动(即 float 值为 left, right 或 inherit 并从父元素上继承 left 或 right 值)之后会影响它的兄弟元素的位置和父元素产生高度塌陷。具体的影响方式较为复杂,要看这些兄弟元素是块级元素还是内联元素; 若是块级元素会无视这个浮动的块框,也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行,导致被浮动元素覆盖,除非这些 div 设置了宽度,并且父元素的宽度不足以包含它们,这样兄弟元素才会被强制换行; 若是内联元素,则会尽可能围绕浮动元素,常用来做图文混排效果。 另外,浮动的元素脱离了普通流,这样使得包含它的父元素并不会因为这个浮动元素的存在而自动撑高,这样就会造成高度塌陷。 无论是影响兄弟元素还是高度塌陷的问题,都不是我们使用浮动的目的,设置浮动,只是为了改变一个元素的布局,但最终的结果却造成了更多不必要的影响,这不利于布局, 因此我们需要清除这些额外的影响,也就是本文要介绍的清除浮动,其实更加准确的说,是清除浮动带来的额外影响。 二、清除浮动的常见方法 1、clear 说起清除浮动,大家肯定会想起 clear: both ,的确,这是 CSS 中清除浮动的属性,clear 有both/left/right/none/inherit 几个属性值,

清除浮动的几种方法

*爱你&永不变心* 提交于 2019-12-05 11:05:07
浮动带来的问题 一个元素设置了浮动之后,就脱离了标准流(漂浮在标准流之上),因此如果他的父级容器在此时没有设置固定的高度,即由内容撑开,就会导致父级容器不能被撑开。而此时与父级容器同级的其他元素就会上移占据父级容器的位置。即高度塌陷。 清除浮动的方法 (1)定高法:强行给父元素添加一个固定的高度;缺点:高度固定,导致后期不好维护。 (2)额外标签法:在最后一个元素后面添加一个空的块级元素(div),给该元素添加clear:both属性;该方法可以实现高度自适应,但每清除一次浮动,就要添加一个额外的标签,增加代码冗余。 (3)伪元素清除浮动法:将清除浮动的相关代码写在.clearfix类中,给浮动元素的父元素添加.clearfix类即可 .clearfix:before, .clearfix:after { content: ""; /* 由于伪元素默认显示模式是行内模式 所以要转换 */ display: table; } .clearfix:after { /* 清除浮动 */ clear: both; } (4)overflow:hidden/auto清除浮动:给浮动元素的父元素添加overflow:hidden/auto即可,但是该方法的使用有局限性,在有些场景里不能使用。例如:如果有一个元素基于父元素定位,并且是定位在父元素盒子的外面,那么此时使用overflow

看起来小但是并不小的问题

戏子无情 提交于 2019-12-05 07:50:30
HTML <!DOCTYPE> 定义和用法 必须是 HTML 文档的第一行,位于 <html> 标签之前。 <!DOCTYPE> 不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 常用的DOCTYPE声明 HTML 5 <!DOCTYPE html> HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML 4.01 Frameset 该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。 <!DOCTYPE HTML PUBLIC "-/

【面经系列】一线互联网大厂前端面试技巧深入浅出总结

徘徊边缘 提交于 2019-12-05 07:38:55
一二面(基础面) 1. 一面基础面 1.1 面试准备 1.1.1 个人简历 基本信息:姓名-年龄-手机-邮箱-籍贯 工作经历:时间-公司-岗位-职责-技术栈-业绩(哪些成就) 学历: 博士 > 硕士 > 本科 > 大专 工作经历:时间-公司-岗位-职责-技术栈-业绩 开源项目:GitHub和说明 1.2.2 自我陈述 1.2.2.1 把我面试的沟通方向(别把自己带到坑里面) 答:我平时喜欢研究一些网站,并对一些技术的原理和好玩的点感兴趣,我自己也喜欢思考,也喜欢尝试探索有没有更好的方式和实现。(有所收留,不要全部说出来,稍微留一点悬念留作面试官来提问) 1.2.2.2 豁达、自信的适度发挥 答:适当自信,向自己擅长的方向上面来引路;要让面试官来欣赏我,而不是来鄙视他。 1.2.2.3 自如谈兴趣 (豁达自信,适当收住),巧妙演示实例,适时讨论疑问(不知道的问题请求指导一下,如何去解决,不要说不知道,或者不了解) 1.2.2.4 节奏要适宜 切忌小聪明(尽量把问题的所有实现方法都写出来,表现出来的是熟练) 1.2 面试实战 [!NOTE] > 1. 方向要对,过程要细(性能优化,过程详细) > 2. 胆子要大、心态要和(算法题认真思考,认真使劲想;敢于承担责任,不要轻易放弃) 2. CSS相关 2.1 页面布局 2.1.1 如何实现垂直居中布局呢? 1.已知宽高 /*v1*/

html/css系列 BFC

早过忘川 提交于 2019-12-05 07:02:35
本文详情: https://www.cnblogs.com/chen-... 第一种 BFC中的盒子对齐 <div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div> div { height: 20px; } .container { position: absolute; /* 创建一个BFC环境*/ height: auto; background-color: #eee; } .box1 { width: 400px; background-color: red; } .box2 { width: 300px; background-color: green; } .box3 { width: 100px; background-color: yellow; float: left; } .box4 { width: 200px; height: 30px; background-color: purple; } 第二种 外边距折叠 垂直方向上的距离由margin决定 <div class="container"> <div class="box"></div> <div

前端笔记3

和自甴很熟 提交于 2019-12-05 03:18:10
1.CSS样式 - display - 用来设置元素的显示类型 - 可选值: none 元素不会在页面显示,并且不会占据页面的位置 block 元素作为块元素显示 inline 元素作为内联元素显示 inline-block 元素作为行内块元素显示 - visibility - 用来设置元素的显示状态 - 可选值: visible 默认值,元素在页面中可见 hidden 元素在页面中隐藏,但是会占据页面的位置 - overflow - 设置元素如何处理溢出的内容 - 可选值: visible 默认值,溢出的内容会在父元素以外的位置显示 hidden 溢出的内容会被裁剪不会显示 scroll 会为父元素添加水平和垂直双方向的滚动条以完整的查看内容 auto 会根据需要自动添加滚动条 2.文档流 - 文档流指的是网页中的一个位置,文档流可以说是网页的基础, 我们所创建的元素默认情况下都在文档流中。 - 元素在文档流中的特点: 块元素 1.块元素在文档流中自上向下垂直排列 2.块元素在文档流中默认宽度是父元素的100%,默认高度被内容(子元素)撑开 内联元素 1.内联元素在文档流中自左向右水平排列, 如果一行不足以容纳所有的元素,则另起一行继续自左向右水平排列 2.内联元素在文档流中高度和宽度都被内容撑开 3.浮动 - 使用float来设置元素的浮动 - 可选值: none 默认值

前端BFC布局学习

余生长醉 提交于 2019-12-04 21:27:27
BFC,全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局,会产生一定的效果。 Block Formatting Contexts翻译为:块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局,以及与其他元素的关系和相互作用。 其中块级元素可以理解为父级元素,内容即是子元素,子元素也为块元素,其他元素指的是与内容同级别的兄弟元素,相互作用指的是BFC里的元素与外面的元素不会发生影响。 而触发BFC的条件是: 1、float的值不为none 2、overflow的值不为visible 3、display的值为table-cell、table-caption和inline-block之一 4、position的值不为static或者releative中任何一个 普通文档流的布局规则(一般像我这种新手没有布局意识的,就应该是普通文档流布局了。。。) 1、浮动的元素是不会被父级计算高度 2、非浮动元素会覆盖浮动元素的位置 3、margin会传递给父级 4、两个相邻的元素上下margin会重叠 BFC的布局规则 1、浮动的元素会被父级计算高度(父级触发了BFC) 2、非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) 3、margin不会传递给父级(父级触发了BFC) 4、两个相邻的元素上下margin不会重叠

html和css的基本功

荒凉一梦 提交于 2019-12-04 21:18:45
1.块级元素和行内元素和行内块元素的区别 块级元素:独占一行的,可以设置宽高和内外边距的( < div>/ < h1>~ < h6>/ < p>/ < ul>/ < table> ) 行内元素:不独占一行,不可以设置宽高,其大小仅仅被动的依赖于自身内容的大小 行内块元素:不独占一行,和相邻的行内元素在同一行,有间隔,可以设置宽高(<img>/<input>/<td>) 2.用css写三角形 等边三角形 <div class ="box"></div> .box{ width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom:50px solid red } 直角三角形 <div class ="box"></div> .box{ width: 0; height: 0; border-left: 50px solid transparent; /*border-right: 50px solid transparent;*/ border-bottom:50px solid red } 根据自己的需求去调整相对应得方位,自己去浏览器上试; 3.盒子模型的计算方法: 标准的盒子模型的宽高=左右padding+左右margin