HTML与CSS知识点总结

最新推荐文章于 2022-09-04 23:02:06 发布

cherish_LYE

最新推荐文章于 2022-09-04 23:02:06 发布

阅读量2.6k

点赞数 5

文章标签：定位 html css css3

本文链接：https://blog.csdn.net/cherish_hyl/article/details/109139822

版权

1、常用浏览器

浏览器内核（渲染引擎）：负责读取网页内容、整理讯息，计算网页的显示方式并显示页面。

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360、百度浏览器
Firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	chrome/opera浏览器内核。Blink其实是Webkit的分支

注：国内浏览器一般采用Webkit/Blink内核，如UC、QQ等

2、Web标准

主要构成结构Structure、表现Presentation、行为Behavior

标准	说明
结构	结构用于对网页元素进行整理和分类，HTML
表现	表现用于设置网页原色的板式、颜色、大小等外观样式，CSS
行为	行为是指网页模型的定义及交互的编写，javascript

3、CSS的三大特性

层叠性、继承性、优先级

3.1 层叠性

3.2 继承性

子标签继承父标签的某些样式（子承父业）

可以继承（text- , font- , line- 这些元素开头的可以继承，及color

3.3 优先级

4、盒子模型

盒子模型由：内容、边框、内边距、外边距组成

4.1 外边距合并

（使用margin定义块元素的垂直外边距时，可能出现外边距合并）

嵌套块元素垂直外边距的塌陷（对于两个嵌套关系【父子关系】的块元素，父元素上有外边距同时子元素也有上边距，此时父元素会塌陷较大的外边距值。

解决方法：

为父元素定义边框
为父元素定义内边距
为父元素添加 overflow:hidden
浮动、固定、绝对定位的盒子不会有塌陷问题

5、浮动 Float

5.1 为什么需要浮动？

在很多布局效果中，标准流无法完成，而浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：让多个块级元素一行内排列显示

网页布局的准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

5.2 浮动的特性

脱离标准普通流的控制（浮）移动到指定位置（动），称脱俗
浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

注：浮动的元素是相互贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐）
浮动元素具有行内块特性
- 如果块级盒子没有设置宽度、默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 浮动的盒子没有间隙，紧挨在一起
- 行内元素同理

5.3 浮动布局注意点

1、浮动元素经常和标准流搭配使用

策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aWOrmEv6-1602948137292)(D:\前端面试题汇总\img\HTML、CSS基本知识点总结\浮动元素与标准流父级搭配使用 .jpg)]$

2、一个元素浮动了，理论上其余兄弟元素也要浮动（浮动的盒子只会影响浮动后面的标准流，不会影响前面的标准流）

5.4 清除浮动

父盒子有高度不需要清除浮动；清除浮动后，父级会根据浮动的子盒子自动检测高度，父级有了高度，则不会一项项下面的标准流了。

1、清除浮动的方法：

额外标签法

在最后一个浮动的子元素后面添加一个额外的标签，添加清除浮动样式
父级添加overflow属性

给父级添加overflow属性，将其属性值设置为hidden、auto或scroll 【缺点：无法显示溢出部分】

父级添加after伪元素

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix { /*IE6、7专有*/
    *zoom: 1;
}

父级添加双伪元素

.clearfix:before,.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

6、PS切图

6.1 常见的图片格式

jpg 图像格式：对色彩的信息保真较好，常用于产品类的图片
gif 图像格式：最多存储256色，通常用来显示简单图形及字体，实际经常用于一些图片小动画效果，也可支持背景透明
png 图像格式：存储形式丰富，能够保持透明背景
psd 图像格式：Photoshop的专用格式，对于前端人员来说，最大的优点是：可以直接从上面复制文字，获得图片，还可测量大小与距离。

7、定位

定位：将盒子定在一个位置，顾为，按照定位的方式移动盒子

定位 =定位模式+边偏移

1、定位模式

值	语义
static	静态定位（默认定位方式，无定位意思）
relative	相对定位
absolute	绝对定位
fixed	固定定位

2、边偏移

就是定位的盒子移动到最终位置，有top、bottom、left、right 4个属性

1.1 相对定位 relative

特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
原来在标准流的位置继续占有，后面的盒子仍以标准流的方式对待它（不脱标，继续保持原来的位置）

1.2 绝对定位 absolute

特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位祖先元素为参考点移动位置
绝对定位不再占有原来的位置（拖标）

1.3 固定定位 fixed

指元素固定于浏览器可视区的位置【浏览器页面滚动时元素的位置不会改变】

特点：

以浏览器的科室窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随着滚动条滚动
不占有原先的位置（拖标）

小技巧：固定在版心右侧位置

让固定定位的盒子 left：50%，走到浏览器可视区的一半位置
让固定定位的盒子margin-left版心宽度的一半距离，多走版心宽度的一半

1.4 粘性定位（了解) sticky

相对定位和固定定位的混合

特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
占有原先的位置（相对定位特点）
必须添加top、left、right、bottom其中一个才有效

【跟页面混动搭配使用，兼容性叉，IE不支持】

总结：

定位模式	是否脱节	移动位置	是否常用
static	否	不能使用边偏移	很少
relative	否【占有位置】	相对于自身位置移动	常用
absolute	是【不占有位置】	带有定位的父级	常用
fixed	是【不占有位置】	浏览器可视区	常用
sticky	否【占有位置】	浏览器可视区	当前阶段少

3、定位叠放次序 z-index

控制盒子的前后次序，数值越大，盒子越靠上（默认 auto）

数字后不加单位，只有定位的盒子才有z-index属性

4、定位拓展：

4.1 绝对定位盒子居中

加了绝对定位的盒子不能通过margin：0 auto实现水平居中

left：50%；让盒子的左侧移动到父级元素的水平中心位置。
margin-lelt：100px; 让盒子向左移动自身宽度的一半。

4.2 定位特殊性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小

4.3 拖标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题

4.4 绝对定位（固定定位）会完全压住盒子（包括内容）

浮动元素不同，只会压住他下面标准流的盒子，但是不会压住下面标准流里面的文字（图片）

而绝对定位（固定定位）会压住下面标准流的所有内容

8、网页布局总结

标准流

可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准布局
浮动

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
定位

可以让多个盒子前后叠压来显示，如果元素自由在某个盒子内移动就用定位布局

9、元素的显示与隐藏

display显示隐藏【不再占有原来的位置】
visibility显示隐藏【占有原来的位置】

visible：可见； hidden：隐藏
overflow溢出隐藏

visible：不剪切内容也不添加滚动条
hidden：不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出内容否，总显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条

【如果有定位的盒子，请慎用 overflow:hidden，会隐藏多与部分】

10、精灵图

10.1 为什么需要精灵图？

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度

10.2 精灵图的使用

主要针对于小的背景图片使用
辅助于背景位置实现 background-position
一般都是负值

11、字体图标

优点：轻量、灵活、兼容

总结：

遇到一些结构和样式比较简单的小图标，使用字体图标
遇到一些结构和样式复杂一点的小图片，使用精灵图

12、常用属性应用

12.1 vertical-align

1、使用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐【只针对行内元素或者行内块元素】

2、属性值：baseline【默认，基线】、top、middle、bottom

3、解决图片底部默认空白缝隙问题

因为行内块元素和文字是基线对齐

解决：

1、给图片添加 vertical-align ：middle|top|bottom

2、将图片转为块级元素 display：block；

12.2 溢出文字省略号显示

单行文本溢出

/* 1、先强制一行内显示文本*/
white-space: nowrap;
/* 2、超出部分溢出*/
overflow: hidden;
/* 3、文字用省略号替代超出部分*/
text-overflow: ellipsis;

多行文本溢出

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;

12.3 margin负值应用

13、HTML5 新特性

13.1 video 与 audio

video: MP4、WebM、Ogg ;
audio: MP3、Wav、Ogg
在这里插入图片描述

13.2 input 类型

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnT9TAgJ-1602948137309)(D:\前端面试题汇总\img\HTML、CSS基本知识点总结\HTML5新增的input类型.jpg)]$

13.3 表单属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lsuHT13G-1602948137317)(D:\前端面试题汇总\img\HTML、CSS基本知识点总结\HTML5新增的表单属性.jpg)]$

14、CSS3 新特性

14.1 属性选择器【权重：10】

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KxYXanh5-1602948137320)(D:\前端面试题汇总\img\HTML、CSS基本知识点总结\属性选择器.jpg)]$

14.2 结构伪类选择器【权重：10】

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m0ZLDOf1-1602948137332)(D:\前端面试题汇总\img\HTML、CSS基本知识点总结\结构伪类选择器.jpg)]$

nth-child(n): 选择某个父元素的一个或多个特定的元素

n 可以是数字、关键字、公式
如果是数字，从1开始
关键字：even 偶数；odd奇数
如果是公式，从0开始

nth-child(n) 与 nth-of-type(n)的区别：

div:nth-child(1)：先看nth-child(1) , 之后回去看前面的div【对父元素里面的所有孩子排列选择，先找到第n个孩子，然后看是否与 E 匹配】

div:nth-of-type(1)：先看div指定的元素，之后回去看：nth-of-type(1) 第几个孩子【对父元素里面指定子元素进行排列选择，先去匹配 E，然后再根据 E 找第n个孩子】

14.3 伪元素选择器

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

两者都属于行内元素
新创建的这个元素在文档树中找不到，所以称伪元素
必须有content属性
权重为1

15、行内元素、行内块元素、块元素

转换时可分别对应 inline、inline-block、block

行内元素特征：
- 设置宽高无效
- 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，会撑大空间
- 不会自动进行换行
如：span、a、img、input、select、textarea、button、em、label
行内块元素：
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右
如：img、input、select、textarea、button
块级元素：
- 能识别宽高
- margin和padding的上下左右均对其有效
- 自动换行
- 多个块状元素标签写在一起，默认排列方式为从上到下
如：div、h1~h6、p、ul、ol、table、form