发表于： 2019-03-19 18:47:58
1 822
今天完成的事情：
1 完成了css任务
2 看了css任务十五的深度思考
明天计划的事情：
1看js的基础知识
2开始js任务一
收获：
一、BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。
什么时候会触发BFC呢？常见的如下：
- float的值不为none。
- overflow的值为auto,scroll或hidden。
- display的值为table-cell, table-caption, inline-block中的任何一个。
- position的值不为relative和static。即为绝对定位或者固定定位
3. 与纯流体特性布局的优势
BFC自适应布局优势我总结了下面2点：
- 自适应内容由于封闭，更健壮，容错性强。比方说，内部clear:both不会与兄弟float产生矛盾。而纯流体布局，clear:both会让后面内容无法和float元素在一个水平上，产生布局问题。
- 自适应内容自动填满浮动以为区域，无需关心浮动元素宽度，可以整站大规模应用。而纯流体布局，需要大小不确定的margin/padding等值撑开合适间距，无法CSS组件化。
如下效果，图片能大能小，布局依然良好
看网站
而CSS代码就是非常简单的：
.float-left { float: left; margin-right: 20px; } .bfc-content { overflow: hidden; background-color: #beceeb; }
二、在标签中填写 onclick 事件调用函数时，不是 onclick=函数名， 而是 onclick=函数名+()，代码如下：
<script> function myfunction(){ document.getElementById("demo").innerHTML="onclick事件触发"; }</script> </head><body> <h1 id="demo">一个段落</h1> <button onclick="myfunction()" type="button">点击这里</button></body>
2、外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。
3、HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。
使用函数来执行document.write代码如下：
<script>function myfunction(){ document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");}document.write("<h1>这是一个标题</h1>");document.write("<p>这是一个段落。</p>");</script><p >您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。</p><button type="button" onclick="myfunction()">点击这里</button>
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时，请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样，变量 myVariable 与 MyVariable 也是不同的
返回列表
评论