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.如何创建BfC?

典型的例子：给父元素加display：flex
子元素加float：let/right
子元素加绝对定位或者固定定位

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

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

有关html，css的实用知识点总结（一）相关推荐

CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
如何 sizing 一台物理机上可以承载多少 VMware 虚拟机？分享 Vsphere HA 几个实用知识点
如何 sizing 一台物理机上可以承载多少 VMware 虚拟机? https://mp.weixin.qq.com/s?__biz=MjM5NTk0MTM1Mw==&mid=2650633 ...
html和css最全的知识点归纳总结,html和css的面试知识点总结（附示例）
本篇文章给大家带来的内容是关于html和css的面试知识点总结(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS优先级算法优先级就近原则,同权重情况下样式定义最近者为 ...
一文梳理CSS必会知识点
本文主要梳理CSS必会知识点,会持续补充更新哦!长文预警!这可能是目前最长的一篇了???? ???? ???? ???? CSS引入有哪些引入方式?通过link和@import引入有什么区别?(* ...
HTML5实用知识点
本文讲解HTML5实用知识点新增的表单type Canvas使用 SVG使用 Audio使用 Video使用网页缓存文件缓存后台worker Server-Sent Events 定位拖放功 ...
apache伪静态把css 排除掉_一文梳理CSS必会知识点
本文主要梳理CSS必会知识点,会持续补充更新哦!长文预警!这可能是目前最长的一篇了? ? ? ? CSS引入有哪些引入方式?通过link和@import引入有什么区别?(* ) CSS引入方式有4种 ...
前端开发[html+css]的实用网站分享（一）
目录 1.Glassmorphism 玻璃特效生成器 2卡片快速生成器 3.button按钮集合 1.Glassmorphism 玻璃特效生成器 Glassmorphism generator 玻璃特 ...
CSS基础必备知识点03
1.标准文档流什么是标准文档流? 制作HTML网页和PS画图软件画图有本质上的区别:HTML网页在制作的时候都遵循一个"流"的规则:从左到右.从上到下:使用PS软件画图时,我们想 ...
关于CSS与HTML知识点总结（二）
HTML知识点整理置换元素:浏览器根据标签和属性来决定元素的具体显示内容,如 img input textarea select object video 等 Form <input type ...

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

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

2. strong 与 em 的异同？

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

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

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

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

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

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

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

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

11. css,link和@import的区别

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

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

14 、px 和 em 的区别。

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

16. BFC 是什么?

17.如何创建BfC?

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

有关html，css的实用知识点总结（一）相关推荐

最新文章

热门文章