有关html，css的实用知识点总结

Posted 2021-08-13 老张在线敲代码

1. 简述一下 src 与 href 的区别。

src 用于替换当前元素，
href 用于在当前文档和引用资源之间确立联系。
src 是 source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在 位置；在请求 src 资源时会将其指向的资源下载并应用到文档内， href 是
Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）
或当前文档（链接）之间的链接，如果我们在文档中添加
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载
css，而不是使用@import 方式。

2. strong 与 em 的异同？

strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点

3. 两列布局，三列布局，如何自适应的

俩列

1:浮动：左边的给宽高，右边的不设宽，用margin-left把左边的宽给留出来
2：相对绝对定位：给父级加position:relative,左边的给宽高并absolute,右边的不设宽，给高度并用margin把left的宽留出来
3：flex：给父级设flex，left给宽高，right设置flex为1，给高 

三列

1.浮动：写div时要把center放在最后面，left和right设置宽高并左右浮动，center给高度，用margin把左右两边的宽留出来就行了
2.绝对布局：写div时要把center放在最后面，left和right给宽高设置absolute，left的left值为0，right的right值为0。center给高度并用margin把left和right的宽留出来
3.flex：要给他们的父级盒子设置为flex，宽度为100%，左右部分都给宽高，center设置flex为1，给高

4. 垂直水平居中，实现方法有哪些？

1. 定位： position: absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px; 300px是元素高宽
2. position: absolute;left:50%;top:50%;transform: translate(-50%, -50%);
3.flex：align-items:center;justify-content:center;

5. 一个ul下面有四个li要想把li俩行水平分布开俩种实现方式

1. ul设置width 100%，li设置50%，高20px,float:left
2. flex的两列布局,ul设为flex，两个类名li1,li2，li1宽50%，给高。li2flex为1,给高

6. 五个自带默认样式或者默认行为的html标签说五个

1.button
2.input
3.h1-h6
4.ul
5.ol
6.form
7.table

7. 请列举几种可以清除浮动的方法（至少三种）？

1.在父元素中 最后的位置 添加 一个空的div，并定义 其属性 clear:both
2.给父级加overflow:hidden属性
3.给父元素定义 伪类after 和 zoom
4.给父元素定义高度

8. 请列举几种隐藏元素的方法？（至少两种）

1. visibility: hidden；这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
2. opacity: 0；一个CSS3属性，设置0可以使一个元素完全透明，
3. display: none；元素会变得不可见，并且不会再占用文档的空间。

9. css什么属性可以继承(至少五个)

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
text-indent：文本缩进 t
ext-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色**

10. 有几种css选择器(至少三种)

元素选择器： 、标签选择器、id选择器、类选择器。关系选择器：子集选择器和后代选择器，属性选择器，伪类选择器*

11. css,link和@import的区别

1.link属于XHTML标签，出来能加载css，还能定义RSS等其他事物，@import只能定义css
2.link在页面引入时同时加载，@import需要在页面完全载入后再加载
3.link是XHTML标签，无兼容问题，，@import低版本浏览器不兼容
4.link支持js控制改变DOM改变样式，@import不能

12. 超链接访问过后 hover 样式就不出现的问题是什么？如何解决？

因为被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的 排列顺序:（link,visited,hover,active）

13. rgba()和 opacity 的透明效果有什么不同？

rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的 所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明 效果！

14 、px 和 em 的区别。

px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。 em 得值不是固定的，并且 em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,
10px=0.625em

15 、display:none 与 visibility:hidden 的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。 visibility: 隐藏对应的元素并且挤占该元素原来的空间。 即是，使用CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将 “丢失”;而使用visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完 全透明），而它所占据的空间位置仍然存在

16. BFC 是什么?

BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，盒子内元素的布局 不会影响盒子外面的元素。在同一个 BFC中的两个相邻的盒子在垂直方向发生 margin 重叠 的问题 BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外 元素的布局，这个渲染区域只对块级元素起作用

17. 对 WEB 标准以及 W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提 供打印版本而不需要复制内容、提高网站易用性