HTML与CSS、安全相关知识点

用户180554289221
328 阅读10分钟

HTML与CSS

介绍盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)： image.png 不同部分的说明：

  • Margin(外边距)  - 清除边框外的区域，外边距是透明的。
  • Border(边框)  - 围绕在内边距和内容外的边框。
  • Padding(内边距)  - 清除内容周围的区域，内边距是透明的。
  • Content(内容)  - 盒子的内容，显示文本和图像。 为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

内联元素与块状元素、display

内联元素

内联元素又称行内元素等，表示位于行内的元素。
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行。
内联元素的宽度高度不起作用。

常见的内联元素：<a>/<span>/<i>/<strong>等。

块状元素

块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素。
块状元素排斥其他元素与其位于同一行。
块状元素的宽度高度起作用。

常见的块状元素有：

  • <div>/<p>/<h1>/<h2>…<h6>/<ul>/<ol>
  • HTML5 新元素: <section>/<article>/<header>/<footer>等

文档流的理解：static/relative/absolute/fixed等

文档流：正常的文档流也叫普通流，在 HTML 里面的写法就是从上到下，从左到右的排版布局。

而我们常用的布局，与position样式属性紧紧相关。

#static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

#inherit

规定应该从父元素继承 position 属性的值。

#relative

生成相对定位的元素，相对于其正常位置进行定位。

relative的特点：

  • 保持原有文档流，但相对本身的原始位置发生位移，且占空间
  • 元素也遵循从上到下，从左到右的排版布局
  • 相对于其正常位置进行定位，在这里设置了relative的元素相对其原本位置（position: static）进行位移
  • 元素占有原本位置，因此下一个元素会排到该元素后方
  • 元素占位不会随着定位的改变而改变。也就是说relative在文档流中占有的位置与其原本位置（position: static）相同

这里有个需要注意的地方： 虽然relative元素占位与static相同，但会溢出父元素，撑开整个页面（document）。

#absolute

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
元素的位置通过left, top, right以及bottom属性进行规定。

absolute的特点：

  • absolute元素脱离文档流
  • absolute元素不占位，因此下一个符合普通流的元素会略过absolute元素排到其上一个元素的后方
  • absolute元素的定位是相对于static定位以外的第一个父元素进行定位

#fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过left, top, right以及bottom属性进行规定。

fixed的特点：

  • fixed元素脱离文档流
  • fixed元素不占位
  • fixed相对于浏览器窗口来定位，不管是否有static定位以外的父元素
  • absolute元素会随着页面的滚动而滚动，而fixed不会

元素堆叠：z-index 与 position 的作用关系

元素的堆叠方式和顺序，除了与position定位有关，也与z-index有关。

#z-index

有关z-index的说明：

  1. 无z-index或者z-index值相等时，堆叠顺序均由元素在文档中的先后位置决定，后出现的会在上面。
  2. 当向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素。
  3. 自由的z-index元素可以与其他自由的定位元素或者父元素的同级兄弟定位元素来比较z-index的值，决定其堆叠顺序。
  4. z-index值只决定同一父元素中的同级子元素的堆叠顺序。
  5. 父元素的z-index值为子元素定义了堆叠顺序，即子元素依赖于父元素z-index值来获得页面中的堆叠顺序。

参考：《CSS 的 position 和 z-index 有关》

Flex 布局方式的理解和使用

flex布局又叫伸缩、布局 、弹性布局、伸缩盒布局 、弹性盒布局 * 1.采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），父级简称"容器"，容器默认存在两条轴一条水平的主轴，一条垂直的交叉轴（侧轴）。

2.它的所有子元素自动成为容器成员，称为 Flex 项目（flexitem），简称"项目"。

任何一个容器都可以指定为Flex布局！！！！ Flex布局中不分块级元素与行内元素！！！！

参考文章：《[彻底弄懂flex布局]》，《[flex布局基础理解与运用]》

BFC 的优点和缺点

BFC: 块级格式化上下文（Block Formatting Contexts）

BFC是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域

BFC 清浮动 用来处理浮动元素脱离文档流的问题

   1.父级也浮动（弊端：左右的margin:0 auto;会失效）
   
   2.父级加display:inline-block;（弊端：左右的margin:0 auto;会失效   如需让元素居中可给父级加 text-align:center;）
   
   3.父级加高（弊端：扩展性不好）

CSS 动画考察：关键

关键帧动画

一旦完成动画的时间设置， 接下来就需要定义动画的表现。

通过使用 @keyframes 建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。

因为动画的时间设置是通过 CSS 样式定义的，关键帧使用 percentage 来指定动画发生的时间点。0%表示动画的第一时刻，100%表示动画的最终时刻。因为这两个时间点十分重要，所以还有特殊的别名：from和to。

当然，也可包含额外可选的关键帧，描述动画开始和结束之间的状态。帧、animate、transition 等

CSS animations 使得可以将从一个 CSS 样式配置转换到另一个 CSS 样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

CSS transitions 提供了一种在更改 CSS 属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用 CSS transitions 后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。

参考文章：CSS 过渡与动画

安全相关

前端安全中，需要注意的有哪些问题

跨站脚本攻击（XSS攻击）、跨站请求伪造(CSRF攻击)、SQL注入

参考文章：web前端应该注意的安全问题

XSS/CSRF 是怎样的攻击过程，要怎么防范

见上题

除了 XSS 和 CSRF，你还了解哪些网络安全相关的问题呢

见上题

SQL 注入、命令行注入是怎样进行的

见上题

DDoS 攻击是什么

DDoS攻击就是Distributed Denial of Service，分布式拒绝服务攻击，是指攻击者利用大量“肉鸡”对攻击目标发动大量的正常或非正常请求、耗尽目标主机资源或网络资源，从而使被攻击的主机不能为正常用户提供服务。
用一则奶茶店的故事解释：
假设A、B两家奶茶店互为竞争对手，A奶茶店羡慕嫉妒B奶茶店生意太兴隆了，雇佣了一群社会闲散人士逗留在B奶茶店门前的马路，消费者无法通过B奶茶店前马路到店消费。
这里的社会闲散人士就是非法流量，B奶茶店门前的马路是带宽，消费者是正常流量，B奶茶店是服务器，非法流量堵塞了带宽，正常流量就无法访问了。
在网络攻击中，这种使用非法流量占用带宽的攻击叫做DDoS攻击，DDoS是使用大量的肉鸡，在同一时间发送大量的数据到目标服务器上的一种攻击方式。
这种攻击使服务器神志不清，服务器神志不清的状态叫做黑洞。服务器进入黑洞之后，无论是攻击流量还是正常流量都无法再继续访问。

流量劫持包括哪些内容

1.流量劫持就是利用各种恶意软件修改浏览器、锁定主页或不停弹出新窗口，强制用户访问某些网站，从而造成用户流量损失的情形。

2.目前“流量劫持”主要分为两类：一是域名劫持，表现为在用户正常联网状态下，目标域名会被恶意地解析到其他IP地址上，造成用户无法正常使用服务。二是数据劫持，指强行插入弹窗或嵌入式广告等其他内容，干扰用户的正常使用。

3.相关案例

(1):会话劫持 黑客可用手机主人账号发微博

将一部家用无线路由器设置好，然后将一部安装了特殊软件的手机加入该WiFi网络，袁伟邀请华商报记者的手机加入该WiFi后，他开始在自己的手机上进行操作，很快就获取了记者手机的IP地址。袁伟说，遭遇流量劫持后，黑客对被劫持网络账号拥有和手机主人相同的权限，所以根本不需要输入账户名和密码。

(2):信息篡改 使用手机同样也可对同一WiFi下的电脑进行“流量劫持”。只要弄清楚IP地址就可以。

在这台电脑打开看一个网页时，网页上所有的图片均被袁伟替换为同一张他随手制作的图片。另一台没有遭受劫持的电脑，网页上图片显示正常。袁伟说，这是由于遭“流量劫持”的电脑发出上网请求后，从网络服务器上传回来的信息也必须要先经过他的手机，中途他将图片进行了替换。

(3)抓包分析 用户看什么全知道,成功实现劫持后，还可以对用户数据进行抓包，通过电脑进行详细分析。

袁伟说，不仅可利用无线网络进行“流量劫持”，有线路由器也可能会被人通过DNS欺骗、ARP欺骗、DHCP欺骗等方式劫持网关，从而达到流量劫持的目的。防范有线路由器遭劫持的办法，就是安装相应的防火墙软件。

4.预防：无线后台设置，应启用无线AP隔离。

avatar
文章
阅读
粉丝