发表于： 2021-08-07 20:38:15
1 687
今天完成的事情：
思考了任务八的深度思考。
明天计划的事情：
1、看看任务九的学习资料；
2、思考任务九的深度思考。
遇到的问题：
目前没有。
收获：
一、div+css的布局较table布局有什么优点？
1、 div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
2、table布局的好处：（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
二、bootstrap有哪些常用的组件？
1、背景介绍
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架?他是由美国的Twitter 公司开发的一款简洁、直观、强悍的 前端开发框架，作用就是使得 Web 开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站，Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目 国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。
2、知识剖析
（1）什么是组件？
组件:一般就是是指软件系统的一部分，每个承担了特定的职责，他呢可以独立于整个系统进行开发和测试， 一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。比如我们可以写一个官网的响应式导航栏组件，什么时候官网扩增页面了，然后就是我们可以直接拉过来重复使用。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。它是开源的。
（2）目前常用的组件有哪些？
目前常用的bootstrap组件：1、轮播图 2、下拉菜单3、响应式导航栏
3、常见问题
（1）为什么使用bootstrap？
（2）背景颜色还有字体怎么更改
（3）导航栏介绍
4、解决方案
（1）首先队对于我们这些初学者来说，就是简单容易上手：只要你具备 HTML 和 CSS 的基础知识，你就可以开始学习Bootstrap。然后移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式，现在的bootstap4 ，用的flex布局可以更简洁直观，浏览器支持：所有的主流浏览器都支持 Bootstrap。
（2）关于背景字体颜色，直接在开发者工具里找到其对应颜色属性进行修改
（3）导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。
5、拓展思考
使用bootstrap需要注意的问题？
（1）一定要把行和列包裹在.container中，如果不包裹，行内元素会占据整个body，而container是固定宽度1170px
（2）Bootstrap是基于border-box为盒模型基准尺寸，即box-sizing属性为border-box，意思是为元素指定的宽和高等于内容+内边距+边框的大小（房屋面积含墙体），所以增加内边距会使内容尺寸变小Bootstrap是基于border-box为盒模型基准尺寸，即box-sizing属性为border-box，意思是为元素指定的宽和高等于内容+内边距+边框的大小（房屋面积含墙体），所以增加内边距会使内容尺寸变小
（3）在每一行中最多可以指定12列，指定的列越多，每一列所分得的列宽也越小，当列宽不足以盛下元素时，溢出部分会被隐藏，这提示我们overflow属性设置为hidden。所以当你设置col-lg-3时，意味着你可以在这一行下写4个这样宽度的列，你若多写一个会自动换行。
（4）若要做成响应式的网页，千万不要让你的块级元素有固定的较大宽度，或者元素的内外边距有固定的较大宽度，否则在移动设备上会有页边出现，或者有元素溢出。哪怕是margin-left:50%这样的都要小心用，因为你使用这条语句的目标元素自身的宽度很可能会在小屏幕上超过50%的屏幕像素，除非该元素本身也是响应式的。
（5）负的外边距在右或下时，对独立的元素而言，周围会产生一个磁场，一右边或下边有元素，就会被吸进这个黑洞（减掉相应的外边距）；负的外边距在左或上时，会使元素左移或上移相应外边距的距离。
三、CSS中有哪些方法可以实现垂直居中？
（1）背景介绍：
在前端开发过程中，对页面进行布局，经常会用到元素的垂直或者水平的居中,这是作为一个前端工程师的基本知识.
（2）知识剖析：
几种常用到的垂直居中方法：
行内元素;
单行 - 行内元素
1.一般用line-height来实现垂直居中,用text-ailgn实现水平居中
多行 - 行内元素
1.用表格的vertical-align来实现垂直居中
2.用flex弹性布局
块级元素
1.通过padding实现垂直居中
2.flex布局实现垂直居中
3.相对定位,绝对定位实现垂直居中
（3）常见问题：
1.使用一个div包裹一个img， 发现图片与div之间有间隙
（4）解决方案：
原因:
是因为在H5文档声明下，块状元素内部的内联元素的行为表现所致，简单地说就好像块状元素内部有个看不见的没有宽度的空白节点。
而不设置vertical-align属性，vertical-align默认是baseline。
解决方法;
1.在图片的类中,vertical-align:bottom;//top和bottom都可以
2.由于baseline是设置行内元素(inline)或者表格单元素(table-cell)的垂直对齐方式，
所以可以将img转换成块级元素,display：block，
3.把父元素的font-size设为0。
四、margin负值在页面布局中有哪些应用？
（1）背景介绍：
CSS盒模型中，margin是我们非常熟悉的一个属性，大多数情况下，我们采用的都是正数的 margin 值，可能有时候会用到负的 margin 值。
很多人都觉得，负的 margin 值总是可能出现莫名其妙的问题，所有不愿使用。但是，本文要说明的就是，负的 margin 值并不是 hack，这是正常范围内的写法。
根据 W3C，margin 是能够接受负值的，只是在具体实现上有一些区别。那么，设置margin为负值究竟会是什么样的效果呢？
（2）知识剖析：
负margin的特性
首先我们先了解margin的性质
负margin就是在缩小自身的边界
在margin属性中一共有两类参考线，top和left的参考线属于一类，right和bottom的参考线属于另一类。top和left是以外元素为参考，right和bottom是以元素本身为参考。
负margin是绝对标准的CSS
不脱离文档流，不使用float的话，负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素，所有跟随的元素都会被上移。
对浮动，定位的影响
负margin会改变浮动元素的显示位置，即使元素写在DOM的后面，也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。
对于绝对定位元素，负margin会基于其绝对定位坐标再偏移
（3）常见问题：
负margin对布局有哪些应用？
（4）解决方案：
1.双飞翼
2.去除边框
（5）更多讨论：
Q1：提问人：
双飞翼还可以怎么实现？
A1：回答人（可以是分享人，也可以是其他学员）：还可以利用生成bfc实现。
Q2：提问人：负Margin元素重叠问题？
A2：回答人（可以是分享人，也可以是其他学员）：
1.两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容
2.当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容
3.当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素
Q3：提问人：
不设置宽度时，负margin会怎么样？
A3：回答人（可以是分享人，也可以是其他学员）：margin-right负值会加宽而且出现横拉条。
返回列表
评论