前端知识整理

Posted 2021-02-12 xhmz

 

前端知识整理

代码千万行，安全第一行；前端不规范，运营两行泪

*html

 

HTML 语义化

HTML 语义化是指仅仅从 HTML 元素上就能看出页面的大致结构，比如需要强调的内容可以放在 <strong> 标签中，而不是通过样式设置 <span> 标签去做。不同浏览器对 HTML 元素的解析可能有差异，HTML 语义化便是在抛开样式之后，页面能有一个友好的展示效果。我们力求让页面有良好的结构，让页面的元素有含义，同时利于被搜索引擎解析，利于 SEO。HTML 语义化的建议：

• 少使用无意义的 <div>、<span> 标签；
• 在 <label> 标签中设置 for 属性和对应的 <input> 关联起来；
• 设置 <img> 标签的 alt 属性，给 <a> 标签设置 title 属性，利于 SEO；
• 在页面的标题部分使用 <h1>~<h6> 标签，不需要给它们加多余的样式；
• 与表单、有序列表、无序列表相关的标签不要单独使用。

 

HTML5 也新增了一些语义化的元素，我们通过标签名就能判断标签内容。使用语义元素的页面大致结构如下：

较长的的HTML文件，请在板块之间加入注释，使得结构更清晰

 

*CSS

 

css中的块级元素与行级元素

 

最近初学CSS时对块级元素与行级元素有时会产生混淆，写篇博客记录一下自己对其的理解。

先从概念上来看：

块级元素

特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　

　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

行级元素

特点：1.可以和其他元素处于一行，不用必须另起一行。

　　　2.元素的高度、宽度及顶部和底部边距不可设置。

　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

常见的块级元素：heda   meat   title  lable  span  br  a   style  em  b  i   strong

行内块元素常见的有： img  input  td 

行级元素与块级元素的转换

如果想将块级元素与行级元素相互转换，该怎么办呢？

　　 可以在css样式中用display:inline将块级元素设为行级元素

 　　同样，也可以用display:block将行级元素设为块级元素

行级-块级元素

如果又想设置高度、宽度、行高以及顶和底边距，又想元素处于一行，该怎么办呢？

此时就可以用display:inline-block将元素设置为行级-块级元素。（IE8不支持）

 

 

flex布局

在传统的方式中，我们通常会设置盒模型的 display、position、float 等属性来进行布局，对于一些特殊布局运用起来不是很方便，比如垂直居中水平居中，如果运用了浮动特性的话，就需要清除浮动，不但比较麻烦，一不小心还会出现意料之外的布局，最后呈现的结果往往不尽人意。

 

Flexbox（全称 Flexible Box）布局，也叫 Flex 布局，意为“弹性布局”，顾名思义，Flex 布局中的元素具有可伸缩性，是的，通过设置父元素的 display 属性为 display: flex | inline-flex; 其子元素便有了伸缩性，即使在子元素的宽高不确定的情况下，也能通过设置相关 css 属性来决定子元素的对齐方式、所占比例和空间分布。

一些概念

在开始学习Flex 布局前，我们先来熟悉下有关 Flex 布局的几个概念，这些概念可以帮助对后文的理解。

 

 

上图便是一个 Flex 布局的大致架构了，图中的囊括概念有几点：

• Flex 布局是一整个模块，其中父元素称为 flex container，意为容器；子元素称为 flex item，意为项目；
• Flex 布局中有两条看不见的轴线：主轴（main axis）和交叉轴（cross axis）。默认的主轴是平行的，交叉轴是垂直于主轴的；
• 主轴的开始位置叫 main start，结束位置叫 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end；
• 子元素在主轴方向上的大小称为 main size，在交叉轴方向上的大小称为 cross size。

 

在上面的相关概念中，比较重要的是主轴、交叉轴，和它们的开始位置、结束位置。子元素在父元素中会沿着主轴从 main start 到 main end 排列，沿着交叉轴从 cross start 到 cross end 排列。在常规的布局中，浏览器是从左到右排列，挤不下了就换行，在这种情况下，主轴是水平方向，交叉轴是垂直方向，主轴是从左到右，交叉轴是从上到下。

 

在 Flex 布局中，默认的主轴方向也是水平的，交叉轴是垂直的，通过改变 flex-direction 和 flex-wrap 的属性值可以分别改变两个轴的方向和它们的开始位置、起始位置，这就让布局更加灵活多变了。

 

了解完 Flex 布局相关的抽象概念，接下来我们来看看有关 Flex 布局的属性部分，这里分为两部分介绍，一是作用于父元素（容器）的，二是作用于子元素（项目）的。

容器属性

display 属性用来将父元素定义为 Flex 布局的容器，设置 display 值为 display: flex; 容器对外表现为块级元素；display: inline-flex; 容器对外表现为行内元素，对内两者表现是一样的。

<div class="container"></div>

.container {
    display: flex | inline-flex;
}

上面的代码就定义了一个 Flex 布局的容器，我们有以下六个属性可以设置的容器上：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction 定义了主轴的方向，即项目的排列方向。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认值）：主轴在水平方向，起点在左侧，也就是我们常见的从左到右；
• row-reverse：主轴在水平方向，起点在右侧；
• column：主轴在垂直方向，起点在上沿；
• column-reverse: 主轴在垂直方向，起点在下沿。

（flex-direction 为 row）

（flex-direction 为 row-reverse）

（flex-direction 为 column）

（flex-direction 为 column-reverse）

flex-wrap

默认情况下，项目是排成一行显示的，flex-wrap 用来定义当一行放不下时，项目如何换行。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

假设此时主轴是从左到右的水平方向：

• nowrap（默认）：不换行；
• wrap：换行，第一行在上面；
• wrap-reverse：换行，第一行在下面。

（默认情况，flex-wrap 为 nowrap，不换行，即使设置了项目的宽度，项目也会根据屏幕的大小被压缩）

（flex-wrap 为 wrap）

（flex-wrap 为 wrap-reverse）

将 flex-wrap 设置为 wrap-reverse 可以看做是调换了交叉轴的开始位置（cross start）和结束位置（cross end）。

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的简写，默认值是 row no-wrap。

.container {
    flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

justify-content 定义了项目在主轴上的对齐方式。

 

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start（默认）：与主轴的起点对齐；
• flex-end：与主轴的终点对齐；
• center：项目居中；
• space-between：两端对齐，项目之间的距离都相等；
• space-around：每个项目的两侧间隔相等，所以项目与项目之间的间隔是项目与边框之间间隔的两倍。

 

假设此时主轴是从左到右的水平方向，下面给出了不同属性值的效果图。

（justify-content 为 flex-start）

 

（justify-content 为 flex-end）

 

（justify-content 为 center） 

 

（justify-content 为 space-between）

 

（justify-content 为 space-around）