Task 8

作者: DHFE | 来源:发表于2017-10-08 07:43 被阅读13次

Task 8
8、Task
NodeJs event loop
Item 45: Use streams judiciously
task8
task8
Task8
task8
task8
task8

块级元素和行内元素分别有哪些？

块级元素：

惯例，先上MDN链接：
MDN —— Block-level-elements

HTML（超文本标记语言）中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

chrome审查元素

可以看到，h1的display为block，但是这里不知道，是当我们使用了块级元素（标签），就自动加上display：block，还是之前就已经定义好的。

默认情况下，块级元素会新起一行。

常见块级元素：

<address>   information on author
<blockquote>    long quotation
<button>    push button
<caption>   table caption
<dd>    definition description
<del>   deleted text
<div>   generic language/style container
<dl>    definition list
<dt>    definition term
<fieldset>  form control group
<form>  interactive form
<h1>    heading
<h2>    heading
<h3>    heading
<h4>    heading
<h5>    heading
<h6>    heading
<hr>    horizontal rule
<iframe>    inline subwindow
<ins>   inserted text
<legend>    fieldset legend
<li>    list item
<map>   client-side image map
<noframes>  alternate content container for non frame-based rendering
<noscript>  alternate content container for non script-based rendering
<object>    generic embedded object
<ol>    ordered list
<p> paragraph
<pre>   preformatted text
<table> table
<tbody> table body
<td>    table data cell
<tfoot> table footer
<th>    table header cell
<thead> table header
<tr>    table row
<ul>    unordered list

内联元素

MDN —— Inline-level-elements

HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。

chrome审查元素

在style下的filter中，也能看到display:inline，不过在块级元素的审查展示中，还会把一些默认的继承的的样式（font-weight,font-size,-webkit-margin......）也展示出来，原因尚未清楚。

一般情况下，行内元素只能包含数据和其他行内元素，而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

常见行内元素：

<a> anchor
<abbr>  abbreviated form
<acronym>   acronym
<b> bold text style
<bdo>   I18N BiDi over-ride
<big>   large text style
<br>    forced line break
<button>    push button
<cite>  citation
<code>  computer code fragment
<del>   deleted text
<dfn>   instance definition
<em>    emphasis
<i> italic text style
<iframe>    inline subwindow
<img>   Embedded image
<input> form control
<ins>   inserted text
<kbd>   text to be entered by the user
<label> form field label text
<map>   client-side image map
<object>    generic embedded object
<q> short inline quotation
<samp>  sample program output, scripts, etc.
<select>    option selector
<small> small text style
<span>  generic language/style container
<strong>    strong emphasis
<sub>   subscript
<sup>   superscript
<textarea>  multi-line text field
<tt>    teletype or monospaced text style
<var>   instance of a variable or program argument

区别及其他

可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。

* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本

区别：

块级元素会独占一行，其宽度自动填满其父元素宽度。
行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容变化而变化。
块级元素可以设置weith和height，行内元素设置width和height无效，而且块级元素即使设置宽度也还是独占一行。

重点：

- 块级元素可以设置margin和padding属性，行内元素水平方向的margin和padding如margin-left、padding-right可以产生边距效果，但是竖直方向的如padding-top和margin-bottom不会产生边距效果

如下：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">
            p {
                background-color: orange;
                height: 50px;
                width: 50%;
                padding: 20px;
                margin: 0px;
            }
            #span1 {
                background-color: gray;
                border: solid 4px red;
                /*margin在行内元素中，只有水平方向产生效果，竖直方向无效*/
                margin-left: 100px;     /*产生边距，生效*/
                margin-top: 100px;      /*不产生边距，无效*/
                margin-bottom: 100px;   /*不产生边距，无效*/
            }
            #span2 {
                border: solid 4px blue;
                padding-left: 50px;
                padding-right: 50px;
                padding-top: 30px;
                padding-bottom: 30px;
                /*水平方向产生边距，竖直方向没有效果（覆盖了block元素）*/
            }
        </style>
    </head>
    <body>
        <p>块级元素一</p>
        <span id="span1">行内元素一</span><span id="span2">行内元素二</span>
        <p>块级元素二</p>
    </body>
</html>

如图

行内元素在两个块级元素之间，并且给行内元素二设置了padding

行内元素一：设置的margin值在竖直方向上没有起作用，空隙不变。而水平方向是正常的。
行内元素二：设置的padding值在水平方向正常，竖直方向（重点！！！），好像是正常的对不对？边框的确是正常的被撑开了，说明padding-top，padding-bottom正常？
NONONO，对于竖直方向的内边距该行内元素的内容范围是增大了，不过只是表象，对周围元素无任何影响，即不产生边距效果，即不影响布局。

所以，记住：

`inline`元素确实可以设置垂直方向的`padding`和`margin`值，但是`inline`元素的`margin`和`padding`的垂直方向上不产生边距效果，即不影响布局。

什么是 CSS 继承? 哪些属性能继承，哪些不能？

先上两篇文章链接：

CSS样式表继承详解（包括介绍font-size继承）

chenxj —— CSS继承深度解析

所谓css的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。

css的一个主要特征就是继承，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代

栗子：

继承栗子

color的继承，h1继承自body

继承栗子2

font-family的继承，h1和span继承自div

来一个不继承的栗子：

border没有继承功能

哪些可以继承？

文本相关属性：
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

列表相关属性：

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

如何让块级元素水平居中？如何让行内元素水平居中?

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">
            .wrap1 {
                width: 600px;
                height: 150px;
                border: solid 1px red;
            }
            .wrap2 {
                width: 600px;
                height: 150px;
                border: solid 1px red;
            }
            .wrap3 {
                width: 600px;
                height: 150px;
                border: solid 1px blue;
                text-align: center;     /*对于行内元素，直接在父元素上加text-align:center即可*/
            }
            -----------------------------------------------------------------------------------
            .divText1 {
                border: solid 1px green;
                text-align: center;
            }
            .divText2 {
                border: solid 1px green;
                width: 300px;
                text-align: center;
            }
            .divText3 {
                border: solid 1px green;
                width: 200px;
                margin: 0 auto;
            }           
            .divText4 {
                border: solid 1px green;
                width: 200px;
                margin: 0 auto;
                text-align: center;
            }
        </style> 
    </head>
    <body>
        <div class="wrap1">
            <div class="divText1">块级元素1</div>
            <div class="divText2">块级元素1-2</div>         
        </div>      
        <br />
        <div class="wrap2">
            <div class="divText3">块级元素2</div>
            <div class="divText4">块级元素2-2</div>
        </div>
        <br />
        <div class="wrap3">
            <span class="span">行内元素span</span>
        </div>
    </body>
</html>

代码如图

text-align，属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。

注意是元素中的，即text-align一般针对文本的父元素来设置，如图中的块级元素1、1-2、2-2，行内元素span。

margin: 0 auto，实际上是margin-left:auto,margin-right:Lauto，使得容器居中其父容器，但只能对块级元素生效。

用 CSS 实现一个三角形

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">
            #sanjiao {
                width: 0px;
                height: 0px;
                border-top: solid 50px red;
                border-right: solid 50px transparent;
                border-bottom: solid 50px transparent;
                border-left: solid 50px transparent;
            }
        </style> 
    </head>
    <body>
        <div id="sanjiao"></div>
    </body>
</html>

单行文本溢出加 ...如何实现?

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">
            .character {
                border: solid 1px red;
                width: 100px;
                height: 20px;
                overflow: hidden;           /*文字溢出部分隐藏*/
                white-space: nowrap;        /*禁止文字自动换行*/    
                text-overflow: ellipsis;    /*使用省略号代表文字超出包含部分*/
            }
        </style> 
    </head>
    <body>
        <div class="character">
            2017年10月8日 05:12:01
        </div>
    </body>
</html>

px, em, rem 有什么区别？

great! good question!

CSS中常用的字体单位：px、em、rem和%的区别 - Jesse131

px：这个很熟悉了，像素嘛，也是你的displayer上的最小单位，显示图形的最小单位。
em：相对长度单位，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。这句话有点绕，不过试试就知道了。
rem：针对em因父元素字体改变而改变的特性新加入的单位，只想对于根目录（HTML）元素，所以只要在HTML标签上设置字体大小标准，文档中的字体都会以此为参照。

test

em
如图，既然em是针对父元素而设定的，那我们就重点关注每个关注元素的父元素就好了。
.wrap-span-p .wrap-span-span .i都在.wrap-span中，为.wrap-span设置了字体大小为32px（浏览器默认是16px），那么，它的直接子元素p和span中的字体为0.5em（32*0.5=16px），也就是16px，而i元素文字大小为0.5em，是父元素.wrap-span-span的0.5倍（16*0.5=8px），所以i元素中的文字大小为8px。

一般浏览器的默认字体大小都为16px，当然也有是14px的。

这里就有一个难题，假设我们只要改变.wrap-span-span的字体大小，但是em是根据父元素而变化，i元素也会改变，有什么办法使得i的相对参考值是固定的呢？这里引出我们的rem

rem
rem，是只根据根元素（即HTML根节点）来改变字体大小，根元素变则变，所以我们要给HTML设置一个font-size基础属性.......可以看到，i元素中的文字大小和父元素中的文字大小是一致的，都是16px。

这里稍微提一下，因为关于字体大小还有%、vw、vh......

张鑫旭 —— 视区相关单位vw, vh..简介以及可实际应用场景

解释下面代码的作用?为什么要加引号? 字体里\5b8b\4f53代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

font属可继承属性，可提前在body中设置全局的字体大小，样式等属性值。

代码依次是字体大小，行间距，字体样式及字体样式备选。

加引号作为标识符，在CSS里，标识符只能包含字符[a-zA-Z0-9]，ISO 10646里比U+00A0大的字符，还有连字符（-）和下划线（_），但是标识符不能以数字，两个下划线或者一个下划线后面跟一个数字开头。所以，如果font-family中加上了引号，它就是一个字符串，如果不加引号，它就是一个或者多个标识符。
他们实现的效果是等价的，比如 font-family: 'Comic Sans MS' 和 font-family: Comic Sans MS的写法都是正确的，后者包含三个空格分隔的标识符；但是 font-family: "Goudy Bookletter 1911" 就不能把引号去掉，因为 1911 不是合法的标识符。如果你想用非法的css标识符作为font-family的名字或者其中的一部分，那么你需要用字符串的形式代替，或者转义剩下的没有引号的标识符。

\5b8b\4f53：代表是"微软雅黑"的Unicode码，这样就可以在所有的计算机上识别该编码。

字母间距（字间距）：`letter-spacing`

词间距：`word-spacing`

都允许使用负值，但是word-spacing对汉子词组不生效。

Task 8
块级元素和行内元素分别有哪些？块级元素：惯例，先上MDN链接：MDN —— Block-level-eleme...
8、Task
本节内容： Task定义及配置 Task执行详解 Task的依赖和执行顺序 Task类型挂接到构建生命周期 Ta...
NodeJs event loop
V8有个task queue，IO event，timeout，interval事件会往task queue放入c...
Item 45: Use streams judiciously
The streams API was added in Java 8 to ease the task of p...
task8
对于行内元素来说，上下margin padding是不生效的，只有左右才有效。 font 有各种各样的属性，第一个...
task8
问答为何img、input等内联元素可设置宽高 1. 块级元素和行内元素分别有哪些？动手测试并列出4条以上的...
Task8
1.css常见的选择器有几种 id选择器 class选择器分组选择器属性选择器派生选择器伪类选择器 2.选...
task8
1.块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别 block: div h(1-6) p hr ...
task8
题目1： dom对象的innerText和innerHTML有什么区别？ innerText只返回子元素标签内部的...
task8
1、块级元素和行内元素分别有哪些？动手测试并列出4条以上的特性区别。块级元素：h1~h6, p, ul, ol,...