[广州|内门弟子]JS-谢俊凯|2020年04月21日的日报-技能树.IT修真院

发表于： 2020-04-21 21:45:46

1 1583

今天完成的事情：

初步完成任务6，深度思考看了下，弹性盒子理解加深。

明天计划的事情：

开始任务7，并且试着使用bootstrap布置全局。

遇到的问题：

套用bootstrap样式的时候，认为还没学到js就没去声明bootstrap的js样式导致有些样式套用后和搜索的样式展现方式不一样。

设定bootstar按钮的时候，下拉菜单的内容被第一个下拉菜单统一了，无法分别设置，检查了原因是因为套用在一个下拉栏盒子里，也就是大容器里，应该分别套进不同的盒子才能分别生效。

设定主体内容的时候，使用弹性盒子结果主体几行都挤在一行里，忘记了弹性盒子的默认属性是从左到右排列的，需要设定主轴方向。flex-direction：column；

设定主体的黑体字红体字一开始没有建立一个盒子使他们在同一行，导致没有垂直居中。footer的图标使用其他浏览器打开一看，挤在一起，遇到了浏览器space evenly兼容问题，需改动。

收获：

弹性布局比之前熟悉不少，对于布局的理解加深，关于bootstrap的使用初步接触感觉方便不少，学会一些新的样式，flex=1分配剩余空间也清楚了。

学习bootstrap：

bootstap就是一个已经设定好了样式的前端框架，方便直接拿来布局。

bootstrap的使用，

声明编码<meta charset="utf-8">
自适应移动端<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable="no">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

需添加核心css文件的声明：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

添加js文件声明：

必须写在head里，没有声明的话会导致样式无效，就算还没学到JS也要声明，因为是bootstrap的组件，不声明会导致样式不全和样式应用失败。

套用bootstrap的下拉栏更改自己原本使用css设定的下拉栏：

在原本的下拉栏容器里创建一个按钮

如何更改bootstrap的样式，不去设置自带文件的情况下：

若你的css样式不能覆盖bootstrap的样式，检查一下是不是自己的样式的引入放在了bootstrap的引入前面。正确的是把自己的样式引入放在bootstrap的引入后面。

botton标签里的type。定义标签的属性，

submit	该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button	该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset	该按钮是重置按钮（清除表单数据）。

弹性布局：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

如何实现文本过长出现省略号：

设定不换行：white-space：nowrap，

设定文字过长显示为省略号：text-overflop:ellipsis

设定文字过长隐藏：overflow：hidden

<strong>:强调文本表现为粗体 <abbr title="">标记缩写鼠标移到该文本上会显示全称 ul无序列表，ol有序列表，em为强调表现为斜体。