CSS弹性盒子Flex:flex-grow、flex-shrink、flex-basis属性

flex-grow、flex-shrink、flex-basis三个属性的作用:

flex布局中,父元素在不同宽度下,子元素是如何分配父元素空间的。

(注意:这三个属性都是在子元素上设置的,下面小编要讲的是父元素,指以flex布局的元素(display:flex))

小编这里先教一下大家如何快速记住这三个属性:

首先是 flex-basis ,basis英文意思是<主要成分>,所以他和width放在一起时,肯定把width干掉,basis遇到width时就会说我才是最主要的成分,你是次要成分,所以见到我的时候你要靠边站。

其次是 flex-grow,grow英文意思是<扩大,扩展,增加>,这就代表当父元素的宽度大于子元素宽度之和时,并且父元素有剩余,这时,flex-grow就会说我要成长,我要长大,怎么样才能成长呢,当然是分享父元素的空间了。见下面第二个属性的内容

最后是 flex-shrink, shrink英文意思是<收缩,>,这就代表当父元素的宽度小于子元素宽度之和时,并且超出了父元素的宽度,这时,flex-shrink就会说外面的世界太苦了,我还是回到父亲的怀抱中去吧!因此,flex-shrink就会按照一定的比例进行收缩。

HTML 中 “role” 属性的目的是什么?

 我一直在看某些人的工作中的角色属性。我也用它,但我不确定它的效果。

例如:

 <header id="header" role="banner">
     Header stuff in here
 </header>

要么:

 <section id="facebook" role="contentinfo">
     Facebook stuff in here
 </section>

要么:

 <section id="main" role="main">
      Main content stuff in here
 </section>

这个角色属性是否必要?

这个属性对于语义更好吗?

它改善了 SEO 吗?

可以在这里找到角色列表,但我看到有些人自己组成。是允许还是正确使用角色属性?

有什么想法吗?

html

答案

您看到的大多数角色都被定义为 ARIA 1.0 的一部分,然后被合并到 HTML5 中。一些新的 HTML5 元素(对话框,主要等)甚至基于原始的 ARIA 角色。

http://www.w3.org/TR/wai-aria/

除了本机语义元素之外,还有两个主要原因可以使用角色。

原因#1。覆盖没有适合宿主语言元素的角色,或者由于各种原因,使用了语义较少的元素。

在此示例中,使用了链接,即使生成的功能比导航链接更像按钮。

 <a href="#" role="button" aria-label="Delete item 1">Delete</a>

屏幕阅读器会将其视为按钮(而不是链接),您可以使用 CSS 属性选择器来避免 class-itis 和 div-itis。

 *[role="button"] {
   /* style these a buttons w/o relying on a .button class */
 }

原因#2。备份本机元素的角色,以支持实现 ARIA 角色但尚未实现本机元素角色的浏览器。

例如,浏览器多年来一直支持 “main” 角色,但它是 HTML5 的一个相对新增的版本,因此很多浏览器还不支持<main>的语义。

 <main role="main">…</main>

这在技术上是多余的,但可以帮助一些用户并且不会伤害任何用户。几年后,这种技术可能变得不必要了。

你还写道:

我看到有些人自己组成。是允许还是正确使用角色属性?

这是属性的有效使用,除非未包含真实角色。浏览器将在令牌列表中应用第一个已识别的角色。

 <span role="foo link note bar">...</a>

在列表之外,只有linknote是有效角色,因此链接角色将被应用,因为它首先出现。如果您使用自定义角色,请确保它们与 ARIA 中的任何已定义角色或您正在使用的主机语言(HTML,SVG,MathML 等)不冲突。

据我了解,角色最初是由 XHTML 定义的,但已被弃用。但是,它们现在由 HTML 5 定义,请参见此处: https//www.w3.org/WAI/PF/aria/roles#abstract_roles_header

role 属性的目的是识别解析软件元素(及其子元素)作为 Web 应用程序一部分的确切功能。这主要是作为屏幕阅读器的可访问性事物,但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的 HTML 客户端有用,需要将属性设置为我链接的规范中的一个角色。如果你自己构成,那么这个 “未来” 功能就无法运作 – 评论会更好。

实用性: http//www.accessibleculture.org/articles/2011/04/html5-aria-2011/

这个角色属性是否必要?

答: 是的

  • 当语言未定义自己的角色属性时,角色属性对于支持可访问富 Internet 应用程序WAI-ARIA以在基于 XML 的语言中定义角色是必需的。

  • 虽然这是Protocols and Formats Working Group发布角色属性的原因,但该属性也有更多的一般用例。

它为您提供:

  • 无障碍

  • 设备适配

  • 服务器端处理

  • 复杂的数据描述,…… 等。

网页模块命名规范

通常网页模块的命名规范需要遵循以下三个原则:

  • 命名避免使用中文字符(如id=“内容”);
  • 命名不能以数字开头(如id=“1header”);
  • 命名不能使用关键字(如id=“div”);
  • 命名应尽量用最少的字母表达含义,使之简明、易懂。

在网页开发中,常用驼峰式命名和帕斯卡命名两种命名方式。其具体解释如下所述。

驼峰式命名:除第一个单词外后面的单词首字母都要大写,其余小写,如navOne。

帕斯卡命名:每个单词之间用“_”连接,如nav_one。

下面列举网页中常用的一些命名。

常用命名
模块 命名 模块 命名
头部 header 标签页 tab
内容 content/container 文章列表 list
尾部 footer 提示信息 msg
导航 nav 小技巧 tips
子导航 subnav 栏目标题 title
侧栏 sidebar 加入 joinus
栏目 column 指南 guild
左右中 left right center 服务 service
登录条 loginbar 注册 register
标志 logo 状态 status
广告 banner 投票 vote
页面主体 main 合作伙伴 partner
热点 hot CSS文件 命名
新闻 news 主要的 master.css
下载 download 模块 module.css
菜单 menu 基本共用 base.css
子菜单 submenu 布局,版面 layout.css
搜索 search 主题 themes.css
友情链接 frIEndlink 专栏 columns.css
页眉 header 文字 font.css
页脚 footer 表单 forms.css
版权 copyright 补丁 mend.css
滚动 scroll 打印 print.css

@font-face的format属性

format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。

对于@font-face而言,兼容性问题就是各浏览器所能识别的字体格式不尽相同。

TrueType格式(.ttf)
Windows和Mac上常见的字体格式,是一种原始格式,因此它并没有为网页进行优化处理。
浏览器支持:IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+

OpenType格式(.otf)
以TrueType为基础,也是一种原始格式,但提供更多的功能。

浏览器支持:FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+

Web Open Font格式(.woff)
针对网页进行特殊优化,因此是Web字体中最佳格式,它是一个开放的TrueType/OpenType的压缩版,同时支持元数据包的分离。

浏览器支持:IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+

Embedded Open Type格式(.eot)
IE专用字体格式,可以从TrueType格式创建此格式字体。
浏览器支持:IE4+

SVG格式(.svg)
基于SVG字体渲染的格式。
浏览器支持:Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

为解决兼容性问题,Paul Irish写了称为Bulletproof的一个独特的@font-face语法:

@font-face {
font-family: ‘YourWebFontName’;
src: url(‘YourWebFontName.eot’); /* IE9 Compat Modes */
src: url(‘YourWebFontName.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘YourWebFontName.woff’) format(‘woff’), /* Modern Browsers */
url(‘YourWebFontName.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘YourWebFontName.svg#YourWebFontName’) format(‘svg’); /* Legacy iOS */
}

归去来兮辞

归去来兮,田园将芜胡不归既自以心为形役奚惆怅而独悲悟已往之不谏知来者之可追实迷途其未远觉今而昨非。舟遥遥以轻飏风飘飘而吹衣。问征夫以前路恨晨光之熹微

乃瞻衡宇,载欣载奔僮仆欢迎,稚子候门。三径就荒,松菊犹存。携幼入室,有酒盈樽壶觞以自酌,眄庭柯以怡颜。倚南窗以寄傲审容膝之易安园日涉以成趣门虽设而常关。策扶老以流憩时矫首而遐观云无心以出岫鸟倦飞而知还。景翳翳以将入抚孤松而盘桓

归去来兮,请息交以绝游世与我而相违,复驾言兮焉求?悦亲戚之情话乐琴书以消忧。农人告余以春及将有事于西畴或命巾车或棹孤舟既窈窕以寻壑亦崎岖而经丘木欣欣以向荣涓涓而始流。善万物之得时,感吾生之行休。

已矣乎寓形宇内复几时?曷不委心任去留?胡为乎遑遑欲何之富贵非吾愿,帝乡不可期怀良辰以孤往或植杖而耘耔登东皋以舒啸临清流而赋诗。聊乘化以归尽乐夫天命复奚疑

今天重读了陶渊明的归去来兮辞,还是那么琅琅上口,……舟遥遥以轻飏风飘飘而吹衣……云无心以出岫鸟倦飞而知还……木欣欣以向荣涓涓而始流……登东皋以舒啸临清流而赋诗……这几句是我最喜欢的。

悟已往之不谏,知来者之可追

破解PPT

1步:把你想破解的PPTX文件进行直接改名,将扩展名更改为.pptx.zip即可。

2步:将扩展名为.pptx.zip的压缩文件解压

3步:找到PPT文件夹里的presentation.xml文件,并用记事本打开。

4步:找到modifyVerifier,把<>里面的内容都删除掉,然后保存文件。

5步:把你解压的文件重新压缩为zip文件。

6步:将zip压缩文件的扩展名改回pptx即可。

最后~希望大家尊重作者,尊重版权,与人方便,与己方便!

Bootstrap 4的新布局——弹性盒子

04 Bootstrap4的新布局——弹性盒子(flex)

4.1 定义弹性盒子(.d-flex|.d-inline-flex)

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

采用Flex布局的元素,被称为Flex容器,简称“容器”。其所有子元素自动成为容器成员,成为Flex项目(Flex item),简称“项目”。

应用display工具创建一个flex box容器,并将直接子元素转换为flex项。Flex容器和项目可以通过附加的Flex属性进行进一步修改。

在bootstrap 4中有两个类来创建弹性盒子,分别为.d-flex和.d-inline-flex。.d-flex类设置对象为弹性伸缩盒子;.d-inline-flex类设置对象为内联块级弹性伸缩盒子。

bootstrap 中定义的.d-flex和.d-inline-flex样式类:

 .d-flex {
   display: -ms-flexbox !important;
   display: flex !important;
 }
 .d-inline-flex {
   display: -ms-inline-flexbox !important;
   display: inline-flex !important;
 }
 <body class="container">
 <h3 class="mb-4">定义弹性盒子</h3>
 <h4>d-flex</h4>
 <!--使用d-flex类创建弹性盒子-->
 <div class="d-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>d-inline-flex</h4>
 <!--使用d-inline-flex类创建弹性盒子-->
 <div class="d-inline-flex p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-inline-flex item 1</div>
     <div class="p-2 bg-success">d-inline-flex item 2</div>
     <div class="p-2 bg-danger">d-inline-flex item 3</div>
 </div>
 </body>

提示:对于.d-flex和.d-inline-flex也存在响应变化,可根据不同的断点来设置。

 .d-{sm|md|lg|xl}-flex
 .d-{sm|md|lg|xl}-inline-flex

4.2 排列方向

4.2.1 水平方向排列(.flex-row)

对于水平方向的排列,使用.flex-row设置子项目从左到右进行排列,是默认值;使用.flex-row-reverse设置子项目从右侧开始排列。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <h4>flex-row(从左侧开始)</h4>
 <div class="d-flex flex-row p-3 bg-warning text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div><br/>
 <h4>flex-row-reverse(从右侧开始)</h4>
 <div class="d-flex flex-row-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">d-flex item 1</div>
     <div class="p-2 bg-success">d-flex item 2</div>
     <div class="p-2 bg-danger">d-flex item 3</div>
 </div>
 </body>

提示:水平方向布局还可以添加响应式的设置,响应式类如下。

 .flex-{sm|md|lg|xl}-row
 .flex-{sm|md|lg|xl}-row-reverse

4.2.2 垂直方向排列(.flex-column)

使用.flex-column设置垂直方向布局,或使用.flex-column-reverse实现垂直方向的反转布局(从底向上铺开)。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <h4>flex-column(从上往下)</h4>
 <div class="d-flex flex-column p-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div><br/>
 <h4>flex-column-reverse(从下往上)</h4>
 <div class="d-flex flex-column-reverse bg-warning p-3 text-white">
     <div class="p-2 bg-primary">Flex item 1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

提示:垂直方向布局也可以添加响应式的设置,响应式类如下。

 .flex-{sm|md|lg|xl}-column
 .flex-{sm|md|lg|xl}-column-reverse

4.3 内容排列( justify-content-*)

使用flexbox弹性布局容器上的 justify-content-*通用样式可以改变flex项目在主轴上的对齐(以x轴开始,如果是flex-direction: column,则以y轴开始),可选方向值包括:start(浏览器默认值)、end、center、between和around,说明如下:

† .justify-content-start:项目位于容器的开头。

† .justify-content-center:项目位于容器的中心。

† .justify-content-end:项目位于容器的结尾。

† .justify-content-between:项目位于各行之间留有空白的容器内。

† .justify-content-around:项目位于各行之前、之间、之后都留有空白的容器内。

 <body class="container">
 <h3 class="mb-4">内容排列</h3>
 <!--justify-content-start-->
 <div class="d-flex justify-content-start mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-center-->
 <div class="d-flex justify-content-center mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-end-->
 <div class="d-flex justify-content-end mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-between-->
 <div class="d-flex justify-content-between mb-3 bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 <!--justify-content-around-->
 <div class="d-flex justify-content-around bg-warning text-white">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.4 项目对齐(align-items-*)

使用align-items-*通用样式可以在flexbox容器上实现flex项目的对齐(以y轴开始,如果选择flex-direction: column,则从x轴开始),可选值有: start、end、center、baseline和stretch (浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
         }
     </style>
 </head>
 <body class="container">
 <h3 class="mb-4">项目对齐</h3>
 <div class="d-flex align-items-start bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-end bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-center bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-baseline bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex align-items-stretch bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.5 自动对齐(align-self-*)

使用align-self-*通用样式,可以使Flexbox上的项目单独改变在横轴上的对齐方式(y值开始,如果是flex-direction:column则为x轴开始),其拥有与align-items相同的可选子项:start、end、center、baseline、和stretch(浏览器默认值)。

  <style>
         .box{
             width: 100%;   /*设置宽度*/
             height: 50px;   /*设置高度*/
             }
  </style>
 </head>
 <body class="container">
 <h3 class="mb-4">指定项目对齐</h3>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-start">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-center">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-end">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-baseline">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3 box">
     <div class="px-2 bg-primary">Flex item 1</div>
     <div class="px-2 bg-success align-self-stretch">Flex item 2</div>
     <div class="px-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.6 自动相等(.flex-fill)

在一系列子元素上使用.flex-fill类,来强制它们平分剩下的空间。

 <body class="container">
 <h3 class="mb-4">平均分配剩下的空间</h3>
 <div class="d-flex bg-warning text-white">
     <div class="flex-fill p-2 bg-primary ">Flex item1(包含大量内容)</div>
     <div class="flex-fill p-2 bg-success">Flex item 2</div>
     <div class="flex-fill p-2 bg-danger">Flex item 3</div>
 </div>
 </body>

4.7 等宽变换(.flex-grow-*)

使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。在下面的案例中,.flex-grow-1元素使用它可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。

 <body class="container">
 <h5>增长</h5>
 <div class="d-flex bg-warning text-white mb-4">
     <div class="p-2 flex-grow-1 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item 2</div>
     <div class="p-2 bg-danger">Flex item 3</div>
 </div>
 <h5>收缩</h5>
 <div class="d-flex bg-warning text-white">
     <div class="p-2 w-100 bg-primary">Flex item1</div>
     <div class="p-2 bg-success">Flex item2</div>
     <div class="p-2 w-100 bg-danger">Flex item3</div>
 </div>
 </body>

4.8 自动浮动(Auto margins)

4.8.1 水平方向浮动(.mr|.ml-auto)

以下是通过auto margin来控制flex项目的三种案例,分别是预设(无margin)、向右推两个项目(.mr-auto)、向左推两个项目(.ml-auto)。

 <body class="container">
 <h3 class="mb-4">水平方向</h3>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="mr-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex bg-warning text-white mb-3">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="ml-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.8.2 垂直方向浮动(margin-top|bottom:auto)

结合align-items、flex-direction:column、margin-top:auto或margin-bottom:auto,可以垂直移动一个Flex子容器到顶部或底部。

 <body class="container">
 <h3 class="mb-4">垂直方向</h3>
 <div class="d-flex align-items-start flex-column bg-warning text-white mb-4" style="height: 200px;">
     <div class="mb-auto p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="p-2 bg-danger">Flex item</div>
 </div>
 <div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;">
     <div class="p-2 bg-primary">Flex item</div>
     <div class="p-2 bg-success">Flex item</div>
     <div class="mt-auto p-2 bg-danger">Flex item</div>
 </div>
 </body>

4.9 弹性布局——包裹(.flex-wrap)

改变flex项目在flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。

 <body class="container">
 <h3 class="mb-4">包装</h3>
 <div class="d-flex bg-warning text-white mb-4  flex-wrap-reverse" >
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 <div class="d-flex bg-warning text-white mb-4 flex-wrap">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
 </div>
 </body>

4.10 排列顺序(order-*)

使用一些order实用程序可以实现弹性项目的可视化排序。bootstrap仅提供将一个项目排在第一或最后,以及重置DOM顺序,由于order只能使用整数值(例如:5),因此对于任何额外值需要自定义CSS样式。

 <body class="container">
 <h3 class="mb-4">排列顺序</h3>
 <div class="d-flex bg-warning text-white">
     <div class="order-3 p-2 bg-primary">Flex项目1</div>
     <div class="order-2 p-2 bg-success">Flex项目2</div>
     <div class="order-1 p-2 bg-danger">Flex项目3</div>
 </div>
 </body>

4.11 对齐内容(align-content)

使用flexbox容器上的align-content通用样式定义,可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。

 <h5>align-content-between</h5>
 <div class="d-flex align-content-between bg-warning text-white flex-wrap" style="height: 150px;">
     <div class="p-2 bg-primary">Flex项目1</div>
     <div class="p-2 bg-success">Flex项目2</div>
     <div class="p-2 bg-danger">Flex项目3</div>
     <div class="p-2 bg-primary">Flex项目4</div>
     <div class="p-2 bg-success">Flex项目5</div>
     <div class="p-2 bg-danger">Flex项目6</div>
     <div class="p-2 bg-primary">Flex项目7</div>
     <div class="p-2 bg-success">Flex项目8</div>
     <div class="p-2 bg-danger">Flex项目9</div>
     <div class="p-2 bg-primary">Flex项目10</div>
     <div class="p-2 bg-success">Flex项目11</div>
     <div class="p-2 bg-danger">Flex项目12</div>
 </div>

DOM节点类型——12种DOM节点类型

前面的话

DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model)。它的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容)。浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构。DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成。

总括

一般地,节点至少拥有nodeType、nodeName和nodeValue这三个基本属性。节点类型不同,这三个属性的值也不相同

nodeType

nodeType属性返回节点类型的常数值。不同的类型对应不同的常数值,12种类型分别对应1到12的常数值

元素节点              Node.ELEMENT_NODE(1)
属性节点              Node.ATTRIBUTE_NODE(2)
文本节点              Node.TEXT_NODE(3)
CDATA节点              Node.CDATA_SECTION_NODE(4)
实体引用名称节点       Node.ENTRY_REFERENCE_NODE(5)
实体名称节点          Node.ENTITY_NODE(6)
处理指令节点          Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点              Node.COMMENT_NODE(8)
文档节点              Node.DOCUMENT_NODE(9)
文档类型节点          Node.DOCUMENT_TYPE_NODE(10)
文档片段节点          Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点            Node.NOTATION_NODE(12)

DOM定义了一个Node接口,这个接口在javascript中是作为Node类型实现的,而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。所以,IE8-浏览器并不支持Node对象的写法

//在标准浏览器下返回1,而在IE8-浏览器中报错,提示Node未定义
console.log(Node.ELEMENT_NODE);//1

nodeName

nodeName属性返回节点的名称

nodeValue

nodeValue属性返回或设置当前节点的值,格式为字符串

接下来,将按照节点类型的常数值对应顺序,从1到12进行详细说明

 

元素节点

元素节点element对应网页的HTML标签元素。元素节点的节点类型nodeType值是1,节点名称nodeName值是大写的标签名,nodeValue值是null

以body元素为例

// 1 'BODY' null
console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
console.log(Node.ELEMENT_NODE === 1);//true

 

特性节点

元素特性节点attribute对应网页中HTML标签的属性,它只存在于元素的attributes属性中,并不是DOM文档树的一部分。特性节点的节点类型nodeType值是2,节点名称nodeName值是属性名,nodeValue值是属性值

现在,div元素有id=”test”的属性

<div id="test"></div>
<script>
var attr = test.attributes.id;
//2 'id' 'test'
console.log(attr.nodeType,attr.nodeName,attr.nodeValue)
console.log(Node.ATTRIBUTE_NODE === 2);//true    
</script>

 

文本节点

文本节点text代表网页中的HTML标签内容。文本节点的节点类型nodeType值是3,节点名称nodeName值是’#text’,nodeValue值是标签内容值

现在,div元素内容为’测试’

<div id="test">测试</div>
<script>
var txt = test.firstChild;
//3 '#text' '测试'
console.log(txt.nodeType,txt.nodeName,txt.nodeValue)
console.log(Node.TEXT_NODE === 3);//true    
</script>

 

CDATA节点

CDATASection类型只针对基于XML的文档,只出现在XML文档中,表示的是CDATA区域,格式一般为

<![CDATA[
]]>

该类型节点的节点类型nodeType的值为4,节点名称nodeName的值为’#cdata-section’,nodevalue的值是CDATA区域中的内容

 

实体引用名称节点

实体是一个声明,指定了在XML中取代内容或标记而使用的名称。 实体包含两个部分, 首先,必须使用实体声明将名称绑定到替换内容。 实体声明是使用 <!ENTITY name “value”> 语法在文档类型定义(DTD)或XML架构中创建的。其次,在实体声明中定义的名称随后将在 XML 中使用。 在XML中使用时,该名称称为实体引用。

实体引用名称节点entry_reference的节点类型nodeType的值为5,节点名称nodeName的值为实体引用的名称,nodeValue的值为null

//实体名称
<!ENTITY publisher "Microsoft Press">
//实体名称引用
<pubinfo>Published by &publisher;</pubinfo>

 

实体名称节点

上面已经详细解释过,就不再赘述

该节点的节点类型nodeType的值为6,节点名称nodeName的值为实体名称,nodeValue的值为null

 

处理指令节点

处理指令节点ProcessingInstruction的节点类型nodeType的值为7,节点名称nodeName的值为target,nodeValue的值为entire content excluding the target

 

注释节点

注释节点comment表示网页中的HTML注释。注释节点的节点类型nodeType的值为8,节点名称nodeName的值为’#comment’,nodeValue的值为注释的内容

现在,在id为myDiv的div元素中存在一个<!– 我是注释内容 –>

<div id="myDiv"><!-- 我是注释内容 --></div>
<script>
var com = myDiv.firstChild;
//8 '#comment' '我是注释内容'
console.log(com.nodeType,com.nodeName,com.nodeValue)
console.log(Node.COMMENT_NODE === 8);//true    
</script>

 

文档节点

文档节点document表示HTML文档,也称为根节点,指向document对象。文档节点的节点类型nodeType的值为9,节点名称nodeName的值为’#document’,nodeValue的值为null

<script>
//9 "#document" null
console.log(document.nodeType,document.nodeName,document.nodeValue)
console.log(Node.DOCUMENT_NODE === 9);//true    
</script>

 

文档类型节点

文档类型节点DocumentType包含着与文档的doctype有关的所有信息。文档类型节点的节点类型nodeType的值为10,节点名称nodeName的值为doctype的名称,nodeValue的值为null

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var nodeDocumentType = document.firstChild;
//10 "html" null
console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeName,nodeDocumentType.nodeValue);
console.log(Node.DOCUMENT_TYPE_NODE === 10);
</script>
</body>
</html>

 

文档片段节点

文档片段节点DocumentFragment在文档中没有对应的标记,是一种轻量级的文档,可以包含和控制节点,但不会像完整的文档那样占用额外的资源。该节点的节点类型nodeType的值为11,节点名称nodeName的值为’#document-fragment’,nodeValue的值为null

<script>
var nodeDocumentFragment = document.createDocumentFragment();    
//11 "#document-fragment" null
console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeName,nodeDocumentFragment.nodeValue);
console.log(Node.DOCUMENT_FRAGMENT_NODE === 11);//true
</script>

 

DTD声明节点

DTD声明节点notation代表DTD中声明的符号。该节点的节点类型nodeType的值为12,节点名称nodeName的值为符号名称,nodeValue的值为null

 

最后

在这12种DOM节点类型中,有一些适用于XML文档,有一些是不常用的类型。

JavaScript原型链(一)—__proto__的默认指向

JavaScript的原型链系统着实让人头痛,在查阅了各种资料之后,终于总结出了基于几条通用规则和少数例外情况的js原型链逻辑,下面就让我们来一起看看是怎样的一个原理。

虽然JavaScript里一切皆对象,但为了理解原型链系统,我们需要将JavaScript的对象分为对象函数两大类。在此基础上,JavaScript的原型链逻辑遵从以下通用规则:

通用规则

  1. 对象__proto__属性,函数prototype属性;
  2. 对象函数生成;
  3. 生成对象时,对象__proto__属性指向函数prototype属性。

在没有手动修改__proto__属性的指向时,以上三条便是JavaScript默认原型链指向逻辑。

下面我们来从最一般的情况开始,逐步深入的详细解释一下:

1. 一般情况

创建空对象时,实际上我们是用Object函数来生成对象的:
>var o = {}
>o.__proto__ === Object.prototype
true

我们也可以显式的使用Object函数来创建对象:
>var o = Object()
o.__proto__ === Object.prototype
true

当我们使用函数来创建自定义的对象时,上面的规则同样适用:
>function MyObj(){}
>typeof MyObj
"function"
>var mo = new MyObj()
>mo.__proto__ === MyObj.prototype
true

2. 函数对象

既然JavaScript里“一切皆对象”,那函数自然也是对象的一种。对于函数作为对象来说,上面的规则同样适用:

函数对象都是由Function函数生成的:
>function fn(){}
>fn.__proto__ === Function.prototype
true

我们可以看到,把函数当做对象时,生成它的函数就是 Function函数。那Function函数本身呢?同样适用!

Function函数本身作为对象时,生成它的函数是他自身!
>Function.__proto__ === Function.prototype
true

同样我们知道,Object函数也是一个函数对象,那么它是否符合上面的规则呢?当然!

Object函数既然是函数,那生成它的函数自然是Function函数咯:
>Object.__proto__ === Function.prototype
true

3. prototype是谁?

好了,现在我们知道,对象的__proto__属性是从生成它的函数的prototype那里得来的,那我们不禁要问,函数的prototype又是谁?

一般函数默认的prototype是系统自动生成的一个对象:
>function fn(){}
>typeof fn.prototype
"object"
>fn.prototype
{constructor: ƒ}
    constructor: ƒ fn()
    __proto__: Object

>fn.prototype.constructor === fn
true
>fn.prototype.__proto__ === Object.prototype
true

一般函数默认的prototype是一个类型为"object"的对象,它有两个属性:constructor__proto__。其中constructor属性指向这个函数自身,__proto__属性指向Object.prototype,这说明一般函数的prototype属性是由Object函数生成的。

4. 特殊情况

前面我们特别强调了是一般函数,那不一般的函数是谁呢?当然是Object函数和Function函数!
先来看Object.prototype:

>typeof Object.prototype
"object"
>Object.prototype
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,}
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

可以看到Object函数的prototype属性也是一个类型为"object"的对象,但和一般函数的默认prototype属性不一样的是,它多了一大堆方法,这些方法都是JavaScript对象的系统默认方法。
再仔细看,好像少了什么,对了,Object函数的prototype属性里没有__proto__属性,我们试着把它的__proto__属性打出来看看:

>Object.prototype.__proto__
null

这就是Object函数特殊情况了:Object.prototype.__proto__ === null,我们知道,这就是JavaScript原型链的终点了。
为什么要这样设定呢?
typeof Object.prototype === "object",说明它是一个Object对象,如果它由Object函数生成,于是按照我们上面的通用规则,就该是Object.prototype.__proto__ === Object.prototype
啊哈,问题出现了,Object.prototype.__proto__属性指向了它自身,这样以__proto__属性构成的原型链就再也没有终点了!所以为了让原型链有终点,在原型链的最顶端,JavaScript规定了Object.prototype.__proto__ === null

好,现在再来看Function函数吧:

>typeof Function.prototype
"function"

一上来就不走寻常路,Function函数的prototype属性是一个"function"类型的对象,而不像其他函数是类型为"object"的对象。那是个什么样的函数呢?

>Function.prototype
ƒ () { [native code] }

函数内部是[native code],也就是系统编译好的二进制代码函数,这就暂时没法深究了。现在让我们来看看我们最关心的__proto__属性:

>Function.prototype.__proto__
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ,}
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

怎么有种似曾相识的感觉呢?看起来很像是Object.prototype,让我们来试试:

>Function.prototype.__proto__ === Object.prototype
true

果然就是它!
按照我们最开始提出的通用规则,一个"function"类型的对象,应该是由Function函数生成的,那它的prototype属性应该指向Function.prototype,也就是Function.prototype.__proto__ === Function.prototype。和Object函数同样的问题出现了:循环引用。所以JavaScript规定Function.prototype.__proto__ === Object.prototype,这样既避免了出现循环引用,又让__proto__构成的原型链指向了唯一的终点:Object.prototype.__proto__ === null

5. 总结

至此,我们从最一般的对象一直追溯到了Object函数和Function函数,并找在原型链的顶端发现了两个例外情况,也知道了这两个例外个规定是为了让__proto__构成的原型链存在一个唯一的终点。

现在我们再来看这张JavaScript原型链的图,是不是一目了然了呢?

JavaScript原型链

JavaScript原型链

 

HBuilder快捷键以及快速生成代码行

HBuilderX快捷键

HBuilderX快捷键

快速生成代码行

1.在body内输入div.abc按下tab键

效果:<div class=”abc”></div>

2.在body内输入div#abc按下tab键

效果:<div id=”abc”></div>

3.在body内输入ul>li{小花}*3按下tab键

效果:<ul>
                 <li>小花</li>
                 <li>小花</li>
                 <li>小花</li>
         </ul>

 

4.在body内输入div>a[href='#']{小花}*3按下tab键

效果:<div>
                 <a href=”#”>小花</a>
                 <a href=”#”>小花</a>
                 <a href=”#”>小花</a>
        </div>

 

5.在body内输入select>option{$}*5按下tab键

效果:<select name=”” id=””>
                 <option value=””>1</option>
                 <option value=””>2</option>
                 <option value=””>3</option>
                 <option value=””>4</option>
                 <option value=””>5</option>
          </select>

6.在body内输入select>option[value='花香']{$}*5>a[href='#']{小花}按下tab键

效果:<select name=”” id=””>
                 <option value=”花香”>1<a href=”#”>小花</a></option>
                 <option value=”花香”>2<a href=”#”>小花</a></option>
                 <option value=”花香”>3<a href=”#”>小花</a></option>
                 <option value=”花香”>4<a href=”#”>小花</a></option>
                 <option value=”花香”>5<a href=”#”>小花</a></option>
        </select>
属性值用[ ]填充,文本内容用{ }填充,*数字:代表生成的元素个数