HTML+CSS复习笔记

浏览器的内核

Edge：EdgeHTML

Google Chrome : Blink/Chromium

safari:webkit

IE:Trident（时隔27年，ie浏览器于2022年6月15日停止维护）

firefox：Gecko

Opera：Presto

浏览器的内核可以分为两部分：渲染引擎(layout engineer 或者 Rendering Egine)和JS引擎。

渲染引擎：它负责获取页面的内容（HTML、CSS、图像等等）、整理讯息（例如加入css等），以及计算页面的显示方式，然后输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也有不同。

JS引擎：则是解析JavaScript语言，执行JavaScript语言来实现网页的动态效果。最开始，渲染引擎和JS引擎没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个ACID来测试引擎的兼容性和性能。内核的种类有很多，如加上没什么人使用非商业的免费内核，可能会有10多种，但是常见的浏览器内核可以分为这四种：Trident、Gecko、Blink、Webkit

web标准

通过以上浏览器的内核不同，我们知道他们的工作原理、解析肯定不同，显示就会有差别

web标准的好处

让web的发展前景更广阔

内容能被更广泛的设备访问

更容易被搜索引擎搜索

降低网站流量费用

使网站更容易被维护

提高页面浏览速度

HTML标签的语义化

白话：标签的含义

1. 方便代码的阅读和维护

2. 同时让浏览器或网络爬虫可以很好的解析，从而更好分析其中的内容

3. 使用标签语义化会具有更好的搜索引擎优化

新语义标签

新增属性

placeholder 占位符，提示文本

autofocus 自动获取焦点

multiple 多文件上传

auto complete 自动补齐

required 必填项

accesskey 快速获得焦点

多媒体 audio

autoplay 自动播放

controls 默认播放控件

loop 循环播放

muted 静音播放

标签的嵌套规范

1. 块元素可以嵌套块元素、行内元素、行内块元素

2. 行内块不能嵌套块元素，可以嵌套行内元素、行内块元素

3. 行内元素不能嵌套块元素、行内块元素、只能嵌套行内元素

4. a标签不能嵌套a标签

内嵌式

在head标签中写一个style标签，来书写css代码

行内式

写在标签内部（开发一般不用）

font的综合设置

1. 顺序 style->weight->size/line height->family 其中顺序不能改变，可以省略

2. 自号和字体不能省略

text-shadow 文字阴影

水平方向：正方向->

垂直方向：正方向->

模糊程度：不能为负

阴影颜色

设置背景透明的方式

transparent 颜色透明 （谁加谁透明）

rgba（0透 1不透）

opacity 整体透明（子元素收到影响）

css精灵技术

简单说，css精灵是一种处理网页背景图像的方式，他将一个页面所涉及到的所有零星背景图像都集中打到一张大图中去，然后将大图应用于网页，这样，当用户访问改页面时，只需要向服务发送一次请求，网页中的背景图像即可全部展示出来

background-image

background-repeat

background-position 属性进行背景定位

其中最关键的是使用backgr-position属性精确地定位

css三大特性

1. 层叠性：通常，我们有时候会将一个属性设置不同的值，例如一文字我在上一行代码写是绿色，下一行就写红色，这时候就近原则，谁离得近就执行谁。

2. 继承性：子承父业 text- font- line- 元素开头的属性以及color属性

其中a标签不能继承父元素的颜色，h标签不能继承父元素的大小

3. 优先级：由低到高依次为 继承和* 标签 类 ID 行内式 ！important

块级元素，行内元素，行内块元素分别有什么特点

快级元素 独占一行，可以设置宽高，默认宽度为容器的100%

<div> <p> <h> <ul> <ol> <li>

行内元素 不独占一行，不能设置宽高

<span> <strong> <em> <ins> <del> <a> <b> <i> <s> <u>

行内块元素 不独占一行，可以设置宽高

<input> <img> <td>

盒子模型

分为怪异盒模型，w3c盒模型

标准盒模型中 width 指的是内容区域 content 的宽度 height 指的是内容区域 content 的高度

标准盒模型下盒子的大小 = content + border + padding + margin

怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度

怪异盒模型下盒子的大小=width（content + border + padding） + margin

块级元素居中

1. 必须是块级元素

2. 盒子必须指定了宽度（width）

3. 然后给左右边距设置为auto，就可以使块级元素居中

清除元素默认的内外边距

为了更方便控制网页中的元素，制作网页时可以使用如下代码清除内外边距

*{
        padding: 0; 
        margin: 0;
    }

相邻元素垂直外边距和并（外边距塌陷）

当上下相邻的两个元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top,则他们之间的垂直距离不是margin-bottom与margin-top之和，而是两者中较大者。这种现象被称为相邻元素垂直外边距的和并（也成为外边距塌陷）

解决方法：

1. 父元素加border（边框），但会改变父元素实际大小

2. 父元素加内边距，但也会改变父元素实际大小

3. 给父元素加溢出隐藏 overflow:hidden;

浮动

浮动的特性：

加了浮动之后的元素，会具有很多特性，需要我们掌握。

1. 浮动元素会脱离标准流（脱标）

2. 浮动的元素会一行内显示并且元素顶部对齐

1. 浮动的元素会具有行内块元素的特性

清除浮动：准确的说，并不是清除浮动，而是清除浮动后造成的影响

清除浮动的本质：主要为了解决父级元素因为子级元素浮动引起内部高度为0的问题

清除浮动的方法：

1. 给父元素设置高度

2. 额外标签法（不推荐） div style = "clear:both;"

3. 给父元素加溢出隐藏

4. 双伪元素清除浮动

//双伪元素清除浮动方法
.clearfix::before,.clearfix::after {
    content:"";
    display:table;
    }
    .clearfix::after {
    clear:both;
    }
    .clearfix{
    *zoom:1;
    }

目的：让父盒子保留高度（标准流），不影响下面的标准流

定位

静态定位：是元素默认的定位方式，无法通过边偏移属性改变位置，不脱标

相对定位：是元素相当于它在标准流中的位置+边偏移的属性来设置元素位置，不脱标

绝对定位：

1.完全脱标——完全不占位置

2.父元素有定位——父元素在标准流的位置 + 边偏移的属性来设置位置

1. 如果父元素没有定位（相对、绝对或固定），则寻找上一级有定位的父元素

2. 如果父元素都没有定位，则以浏览器为准定位

3. 如果父元素有定位，则以父元素为准

子绝父相：儿子是绝对定位，则父亲要用相对定位

为什么在布局时，子集元素使用绝对定位时，父级元素就要用相对定位呢？

分析:

方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。

父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它

如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的

结论:父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

脱标元素居中：先走父盒子的一半，再回自己的一半。

固定定位：完全脱标（只针对浏览器可视窗口进行边偏移，与父元素无关）