前端技术基础篇

最新推荐文章于 2023-05-02 09:41:41 发布

ftToday

最新推荐文章于 2023-05-02 09:41:41 发布

阅读量323

点赞数

分类专栏：前端文章标签：前端基础前端前端总结前端知识点总结

本文链接：https://blog.csdn.net/longlc123/article/details/76167888

版权

前端专栏收录该内容

125 篇文章 3 订阅

订阅专栏

前置知识

永恒的主题-兼容性

一、PC Web
Internet Explorer 8+(Trident)、Edge(EdgeHTML)
Chrome/Opera (Blink/Webkit)
Firefox(Gecko)
Safari(Webkit)

二、Mobile

移动端几乎所有浏览器内核都是webkit或者webkit的变种，我们更多的是考虑iOS safari、微信X5、Android4.1-4.3以及Android4.4+的兼容细节。

注：请关注 http://caniuse.com 了解各浏览器对Web相关技术的支持情况

Web图片格式

网络使用的传统图片格式
GIF: 支持256色，支持透明，体积小，并且支持动画
JPG: 24位颜色，不支持透明，也支持渐进式加载
PNG8: 256色，不支持透明，体积小，基本上可以取代GIF
PNG24: 支持全色，支持透明以及半透明，体积较大

需要关注的新兴图片格式（bitmap 位图）
SVG: XML格式的矢量图，图片中的文本可选，对搜索引擎支持良好
WEBP: 谷歌出的新图片格式，体积普遍比PNG24小20%-40%

需要关注的单位与取值

长度单位
px 像素(Pixels) 屏幕上的一个点
em 相对于当前对象文本的字体大小
rem 相对于html元素的字体大小

时间单位
s 秒
ms 毫秒，即1s=1000ms

角度单位
deg 度，1圆即360deg

颜色取值
名称比如red、blue、green
hex 使用16进制表示颜色 #RRGGBB
RGB rgb(r, g, b)
RGBA rgba(r, g, b, a) 支持透明度
transparent 透明色

分辨率
dpi 每英寸包含点的数量一般是96dpi

HTML书写小贴士

编码必须使用UTF-8

HTML：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS：@charset "UTF-8";

使用HTML5 DTD

<!DOCTYPE html>

要求浏览器优先使用webkit内核（双核浏览器 PC）

<meta name="renderer" content=“webkit | ie-comp | ie-stand”/>

要求浏览器使用最新IE内核（双核浏览器 PC）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

让你的代码更语义化

合理使用header、main、section、footer等标签，让你的HTML学会说话

CSS Reset & CSS Hack

CSS Reset

不同的浏览器在渲染HTML元素时经常会出现各种差距，为了得到一张白纸以便在所有浏览器都能得到一致的基础渲染效果，在进行页面构建之前一般会对大部份元素的样式进行重置，即css reset。

参考资料： http://meyerweb.com/eric/tools/css/reset/

CSS Hack

由于各浏览器的渲染引擎对CSS的解析处理方式略有不同（特别是IE！），导致同样的代码在各页面上显示出来的实际效果也有出入，聪明的工程师们通过研究找到了在不同浏览器让不同的CSS生效的办法，即CSS Hack。另外，尽可能不要使用CSS Hack。

.text {
color: red; /* 所有浏览器都支持 */
color: black\0; /* IE8-11，被后续样式影响只有IE8生效 */
color: orange\9\0; /* IE9-10，最终只有IE9生效 */
color: blue; / IE6、IE7，最终只有IE7生效 */
_color: green; /* IE6 */
}

在现阶段，由于WinXP基本上已经极少人使用，因此IE6/7除非必要否则也不会去考虑支持，我们平时在PC上只需要支持IE8以上版本即可。

页面构建-布局

W3C标准盒子模型

所有占位置的元素都拥有一个盒子，由以下部份组成：

Content: 内容区域
Padding: 内容区域与边框的距离，即内边距
Border: 边框
Margin: 外部元素边框与本元素边框的距离
盒子模型分两种，可以使用box-sizing进行切换

Content-box: W3C标准盒子，盒子宽度等于content的宽度
Border-box: IE盒子，盒子宽度包含content、padding以及border

元素盒子类型-display

CSS的display属性决定了该元素的盒子类型，以下几种属性值是最常用到的：

None 该元素将被隐藏，并且不占空间
Block 块元素，独占一行
Inline 行内元素，可以与其它行内元素共处一行
Inline-block 能够与其它行内元素共处一行，并且像块元素一样能够设置宽高
Flex 弹性伸缩盒子，内部元素将自动成为该盒子的项(12版)
Inline-flex 行内弹性伸缩盒子(12版)
Box 同flex(09版)
Inline-box 同inline-flex(09版)

注：弹性伸缩盒子有3个版本，分别是最新的12版，过渡版本09版以及微软版

定位经典应用-自适应左右布局

左右布局是PC上经常使用的布局方式，经常是左边为固定宽度的导航，右边为自动伸展占满其它空间的主体内容，使用相对定位可以比较完美地实现。

HTML结构：

<main class="wrapper">
<nav class="nav"></nav>
<div class="main"></div>
</main>

CSS代码：

body, html { 
    padding: 0; margin: 0;
}
.wrapper {
    position: relative;
    padding-left: 200px;
}
.nav {
    position: absolute;
    width: 200px;
    height: 1200px;
    background-color: #333333;
    left: 0;
    top: 0;
}
.main {
    height: 1200px;
    background-color: #999999;
}

这里写图片描述

浮动相关知识

浮动在PC上的Web开发是经常会使用到的布局技巧，一般用来实现图文混排或者让多个块元素并排布局。
浮动并不会让元素脱离文档流，而是让元素在文档流中尽可能地往左上角或者右上角漂浮，直到碰到在它之前的块元素的边框或者外层容器的边框。
浮动元素的外层容器在计算高度的时候并不会将浮动元素的高度计算在内，而只计算除了浮动元素之外的元素的高度，导致外层容器没有完全包住浮动元素。
使用clear属性或者建立BFC盒子可以解决浮动元素导致的排版问题，也就是大家经常提到的清浮动。

这里写图片描述

清浮动的三种方法

1.在父容器最后添加一个空的子节点，并且设置clear:both

<main class="wrapper">
    <div class="float-item">浮动内容</div>
    <div class="text">我的生涯一....的青春!</div>
    <div style="heigth: 0; clear: both;"></div>
</main>

2.为父容器写:after伪对象，并且设置clear:both

.wrapper:after {
    content: "";
    display: block;
    height: 0;
    clear:both;
}

3.为父容器增加overflow:auto或者overflow:hidden(BFC)

.wrapper {
    overflow:auto;
}

这里写图片描述

flex弹性布局

flex弹性布局不是针对一个元素的属性设置，而是一整套的布局方案。想使用flex弹性布局，首先要认识以下几个概念：【阮一峰】

伸缩容器(flex container)

弹性布局的容器，当一个元素被设置为弹性盒子时，它的所有直接子元素将自动成为伸缩项目。
伸缩项目(flex item)

伸缩项目会按照主轴的方向排列，它允许设置固定宽度，也可以设置flex属性来决定它在主轴的非空置空间中占据的比例。
主轴(main axis)

伸缩项目会沿着主轴进行排列，注意主轴未必是水平的，也可能是垂直方向。
主轴起点与终点(main start/end)

主轴默认是从左到右，但flex-direction可以更改它，变成从右到左、从上到下或者从下到上。
主轴尺寸(main size)

伸缩项目在主轴方向上的宽度或者高度就是主轴尺寸，每个伸缩项目都可能不一样。
侧轴(cross axis)

垂直于主轴就是侧轴，根据主轴方向的变化它也会变化。
侧轴起点与终点(cross start/end)

与主轴起点与终点类似，优先从上到下或者从左到右。
侧轴尺寸(cross size)

与主轴尺寸类似，在侧轴上的宽度或者高度就是侧轴尺寸。

参考资料： http://www.w3cplus.com/css3/a-guide-to-flexbox.html

flex弹性布局示例

HTML代码：

<header></header>
<section class="section-1"></section>
<section class="section-2"></section>
<footer></footer>

CSS代码：

html, body { 
    padding: 0; margin: 0; 
}
html { 
    height: 100%;
}
body {
    min-height: 100%;
    display: flex; /* 设置body为flex盒子 */
    flex-direction: column; /* 设置主轴为从上到下方向 */
}
header, footer {
    height: 60px; /* 固定高度为30px; */
    background-color: #333333;
}
.section-1 {
    flex: 1;
    background-color: #666666;
}
.section-2 {
    flex: 2;
    background-color: #999999;
}

注：

ul {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          li {
              -webkit-box-flex: 1;//做兼容
              -webkit-flex: 1;
              flex: 1;
    }
}

这里写图片描述

ftToday

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端技术基础篇

前置知识永恒的主题-兼容性一、PC Web Internet Explorer 8+(Trident)、Edge(EdgeHTML) Chrome/Opera (Blink/Webkit) Firefox(Gecko) Safari(Webkit)二、Mobile移动端几乎所有浏览器内核都是webkit或者webkit的变种，我们更多的是考虑iOS safari、微信X5、Android4.
复制链接

扫一扫