发表于： 2019-06-21 23:27:59
1 934
今天完成的事情
今天有事，在空闲时学习了深度思考。
1.什么是外边距重叠？
外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。
外边距不重叠的情况。
水平margin永远不会重合
设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠
设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠
根元素(如html)与body的margin不会重叠
防止外边距重叠的方法。
元素绝对定位postion:absolute;一般用在内层元素
内层元素 加float:left;或display:inline-block;
外层元素用padding增加边距
外层元素设置overflow:hidden;
内层元素透明边框border:1px solid transparent;
2.bootstrap有哪些常用组件？
1.轮播图
2.下拉菜单
3.响应式导航栏
3.margin负值在页面布局中有哪些应用？
负值时产生的影响
1、对于自身的影响
当static(非浮动、非定位）元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向。
但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。
如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。
2、对文档流的影响
元素如果用了margin-left/margin-top时，元素自身会被拉向左/向上进行偏移，效果类似与position：relative。与之不同的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。
元素如果用了margin-right/margin-bottom时，元素视觉位置不变，但其后（下面/右边）的元素会被拉向此元素，相对此元素进行偏移并覆盖此元素。
3、对浮动元素的影响
负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
4、对绝对定位的影响
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移。
4.主流浏览器内核有哪几种？
1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；
4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；
8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：好像以前是IE内核，现在也是IE+Chrome双内核了；
10、UC浏览器内核：这个众口不一，UC说是他们自己研发的U3内核，但好像还是基于Webkit和Trident，还有说是基于火狐内核。
5.响应式的优点与缺点？
响应式的优点
1.响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。
2.响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上
3.方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
响应式的缺点
1.为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。
2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；
3.局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。
6.div+css的布局较table布局有什么优点？
div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
收获
了解到了平常没有接触到的东西，比如table布局、浏览器内核。这些东西虽然在任务中没有涉及，但是会在以后工作中涉及，table布局可能已经过时了所以任务才没有有所学习，但是用处也很大。margin负值之前也简单使用过，但是没有理解那么多的用处 ，经过文章的学习也感受到每条代码都有很多用处与用法。还有外边距水平重叠，都是一样的。
返回列表
评论