[武汉|荣耀师兄]PM-程一凡|2018年10月25日的日报-技能树.IT修真院

发表于： 2018-10-25 22:43:35

1 711

今天完成的事情：

1.仔细学习了一下Bootstrap

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。
利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、
基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
不过好像是说还要一点js的一部分基础知识啊
Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
这将在 Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，
以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。
Bootstrap4 与 Bootstrap3
Bootstrap4 是 Bootstrap 的最新版本，与 Bootstrap3 相比拥有了更多的具体的类以及把一些有关的部分变成了相关的组件。同时 Bootstrap.min.css 的体积减少了40%以上。

2.什么是浮动？有哪些清除浮动的方法？
1、浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位
　 2、浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动)
　 3、浮动元素依然位于父元素之内

　 4、浮动元素处理的问题-解决多个块级元素在一行内显示的问题

对父级设置适合高度样式清除浮动。

01.新引入一个空的子元素，运用clear:both样式清除浮动
3.z-index属性：
z-index只能在position属性值为relative或absolute或fixed的元素上有效。
基本原理：z-index值可以控制定位元素在垂直于显示屏方向（Z 轴）上的堆叠顺序（stack order），值大的元素发生重叠时会在值小的元素上面。
使用相对性：z-index值只决定同一父元素中的同级子元素的堆叠顺序。父元素的z-index值（如果有）为子元素定义了堆叠顺序（css版堆叠“拼爹”）。向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值，决定其堆叠顺序。同级元素的z-index值如果相同，则堆叠顺序由元素在文档中的先后位置决定，后出现的会在上面。所以如果当你发现一个z-index值较大的元素被值较小的元素遮挡了，请先检查它们之间的dom结点关系，多半是因为其父结点含有激活并设置了z-index值的position定位元素。

4.完成任务7页面一的布局，整体使用flex布局的方法进行，箭头改用css画出来了
width: 12px;
height: 12px;
border-top: 2px solid #f0f0f0;
border-right: 2px solid #f0f0f0;
transform: rotate(45deg)