html5+css3

最新推荐文章于 2024-05-05 16:18:19 发布

随~安

最新推荐文章于 2024-05-05 16:18:19 发布

阅读量456

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/lu14725836/article/details/92796650

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目标：

学会布局、特效、动画轻松应对日常前端工作。

html常见元素和理解

前端三大件：

HTML结构
css样式
JavaScript行为。

html 常见元素

head:meta、title、style、link、script、base。
body:div/section/article/aside/header/footer
p/
span/em/strong
table/thead/tbody/tr/td
ul/ol/li/dl/dt/dd
a/
form/input/select/textarea/button

HTML 元素分类

按默认样式分

块级 block
行内 inline(也称为内联元素a/span/em/strong)
inline-block(表单元素大部分是inline-block)
HTML元素嵌套关系
块级元素可以包含行内元素
块级元素不一定能包含块级元素例如：（p标签中不可以包含div标签）
行内元素一般不能包含块级元素（在html5中a元素是可以包含块级元素的，原因是：）
HTML元素默认样式
默认样式的意义：减少一部分的工作量
默认样式带来的问题就是有些样式并不是我们想要的。
css reset（可以了解一下normalize.css库）

HTML面试真题

doctype的意义是什么？
1）让浏览器以标准模式渲染，2）让浏览器知道元素的合法性。
HTML XHTML HTML5的关系
HTML属于SGML的一个应用
XHTML属于XML,是HTML进行XML严格化的结果。
HTML5不属于SGML或XML,比XHTML宽松
HTML5有什么变化?
1）新的语义化元素，2）表单增强，3）新的API(离线、音视频、图形、实时通信、本地存储、设备能力)，4）分类和嵌套变更
em和i有什么区别?
1）em是语义化的标签，表强调，2）i是纯样式的标签，表斜体，3）HTML5中i不推荐使用，一般用作图标。
语义化的意义是什么？
1)开发者容易理解，2)机器容易理解结构（搜索、读屏软件），3）有助于SEO，4）semantic microdata
那些元素可以自闭合？
1）表单元素input，2）图片img，3）br/hr，4）meta/link
HTML 和DOM的关系
1）HTML是“死”的，2）DOM是有HTML解析而来的，是活的，3）JS可以维护的是DOM
property 和attribute 的区别
1）attribute是‘死’的，2）property是‘活’的
form的作用有哪些
1)直接提交表单，2)使用submit/reset按钮，3）便于浏览器保存表单，4）第三方库可以整体提取值，5）第三方库可以进行表单验证

CSS(Cascading Style Sheet:层叠样式表)基础

基本规则

选择器的作用：1）用于配HTML元素，有不同的匹配规则，多个选择器是可以叠加的。2）选择器的分类和权重，3）解析方式和性能（了解就好，可能会出现在面试中，开发中没有什么用的，浏览器的解析方式是从右向左开始解析的，加快浏览器对css的解析速度），4）值得关注的选择器

>选择器{
属性：值；
属性：值；
}

选择器的分类

元素选择器 a{}
伪元素选择器::before{}
类选择器 .link{}
属性选择器 [type=radio]{}
伪类选择器 :hover{}
ID选择器 #id{}
组合选择器[type=checkbox] +label{}
否定选择器:not(.link){}
通用选择器 *{}

选择器的权重（面试要点)

ID 选择器 #id{} +100
类属性伪类 +10
元素伪元素 +1
其它选择器 +0
!important 优先级最高
元素属性优先级高
相同权重后写的生效
写在style属性中的样式的权重比id选择器的权重还要高

非布局样式

字体、字重、颜色、大小、行高
背景、边框
滚动、换行
粗体、斜体、下划线
字体族有：serif/sans-serif/monospance/cursive/fantasy（在写样式的时候字体可以加双引号，但是字体族不用加双引号）
行高的构成
行高相关的现象和方案
行高的调整
背景

自定义字体
@font-face{
font-family:'IF';/*自定义字体的名称为IF*/
src:url(路径)；/*此处可能引用远程的字体，而引用远程的字体可能会出现跨域的问题*/
}

背景颜色

渐变色背景
多背景叠加(css3才有的)
背景图片和属性(雪碧图)
base64和性能优化
多分辨适配
表示颜色可以使用hls的方法。
渐变颜色的写法

<!DOCTYPE html>
<html>
<head>
	<title>练习</title>
	<style type="text/css">
		.c2{
			height:90px;
			width:100%;
			/*表示从左边开始最左边是红色，右边是绿色*/
			/*此写法已经是比较老的写法了。*/
			/*background: -webkit-linear-gradient(left,red,green)*/
			/*background:linear-gradient(to right,red,green);*/
			/*第一个值表示角度，0，即从上到下开始渐变。45deg表示45度方向开始渐变，90deg表示从左向右开始渐变*/
			/*background:linear-gradient(90deg,red,green);*/
		/*	此语句颜色后面的值是指颜色渐变的占比。*/
			/*background:linear-gradient(135deg,red 0,green 10%,yellow, blue)*/
			/*根据背景透明设置背景图案*/
			/*利用多背景的方式画出网络格式的背景*/
			/*可以搜索使用background的渐变做成各种图案。*/
			background:linear-gradient(135deg,transparent 0,transparent 49.5%, green 49.5%,green 50%,transparent 50.5%,transparent 100%),linear-gradient(45deg,transparent 0,transparent 49.5%, red 49.5%,red 50%,transparent 50.5%,transparent 100%);
			background-size: 30px 30px;

		}
	</style>
</head>
<body>
	<div class="c2"></div>

</body>
</html>

背景图片的渐变可能会有面试题。
注意背景颜色和背景图片的叠加是不需要加逗号的。
背景属性
background-repeat(值有norepeat即不平铺，repeat-x即延x方向平铺，repeat-y即沿y方向平铺)
background-position:背景图的位置。
background-size:背景图的大小。
(根据背景图的定位，可以使用css雪壁图，定位到不同的图标，这样就可以只请求一张图片，然后将一张图片展示不同的图标背景)。
background-size的作用，应用场景：第一种即真的需要将背景缩小。第二种场景，即适配移动端的时候。）
将图片变成base64的方式来引用。(原理同样是减少http请求)

background:url(data:image/png;base64,[base64数据])

base64和性能优化

浏览器拿到base64的数据的时候会先将其先转换成图片数据，再渲染到页面这个过程会比较慢。

边框

边框的属性：线型大小颜色（这三个值都要设置，若想显示边框的话）
线型的值有（solid 实线 dottde 点状 dashed 虚线）
边框背景图
边框衔接（三角形）

面试题：使用边框形成三角形

<div class="c3"></div>
	.c3{
			height: 200px;
			width: 0;
			border-bottom: 30px solid red;
			border-right: 20px solid transparent;
			border-left:20px solid transparent;
			/*加上此句会形成扇形*/
			/*border-radius:20px;*/
		}

非布局样式（滚动）

滚动行为和滚动条
（overflow:内容超出边框外[visible]/内容隐藏[hidden]/滚动条显示[scroll]/滚动条自动显示[auto]）

非布局样式（文字的折行）

overflow-wrap（word-wrap）:通用换行控制(是否保留单词)
word-break:针对多字节文字，可以设置句子为单位即（句子不换行）
white-space：空白处是否断行 [经常使用的属性是:nowrap]

非布局样式（装饰性属性及其它)

字重（粗体）font-weight
斜体 font-style:itatic
下划线 text-decoration (值为none去掉下划线)
指针 cursor（值为pointer为手形）

案例

使用css美化checkbox的样式如下图：

代码如下：

<div class="c4">
		<input type="checkbox" name="" id='check_box'>
		<label for="check_box">都挺好</label>
</div>
.c4 input{
			display: none;
		}
.c4 input:checked + label{
			background: url('./checkbox1.png') no-repeat;
			background-size: 20px 20px;
			padding-left: 20px;
		}
.c4 input + label{
			background: url('./checkbox2.png') no-repeat;
			background-size:20px 20px;
			padding-left: 20px;
		}

CSS Hack

CSS Hack 主要用来兼容ie6 ,ie7,ie8。Hack即不合法但生效的写法主要用于区分不同浏览器，缺点是：难理解，难维护，易失效。替代方案：特性检测。替代方案：针对性加class。

面试题

css样式（选择器）的优先级（计算权重确定/!important/内联样式）
雪碧图的作用（减少HTTP请求书提高加载性能，有一些情况下可以减少图片大小）
自定义字体的使用场景（宣传/平牌/banner等固定文案）
base64的使用（用于减少HTTP请求/适用于小图片/base64的体积约为原图4/3）
伪类和伪元素的区别（伪类表状态，伪元素是真的有元素，前者使用单冒号，后者使用双冒号）
如何美化checkbox(label[for]和id;隐藏原生inpu；：checked +label)

css 布局

css布局是CSS体系中的重中之重，早期以table为主（简单），后来以技巧性布局为主（难），现在有flexbox/grid(偏简单)，响应式布局是必备知识。常用的布局方法有：table表格布局，float浮动+margin,inline-block布局，flexbox布局。
####table布局
####盒子模型
盒子模型中的宽度和高度的问题是内容区的宽度和高度，若要计算整个盒子的宽度和高度要加上padding、margining和border

display/position
display:确定元素的显示类型;block/inline/inline-block。
position:确定元素的位置；static/relative/absolute/fixed。
**注意:**relative：是指针对元素本身应该在的位置。（不会因为偏移而改变布局的预算）
absolute:是脱离文档流的，不会对文档的布局产生影响。的position(是相对于最近的父元素（absolute或者reletive）的定位)
fixed:也是脱离文档流的，也不会对文档的布局产生影响。相对于屏幕。
z-index的属性值是position为（absolute/relative/fixed时可以设置）。

flexbox布局

首先其被称为弹性盒子，盒子其本身本来就是并列的，我们在应用它的时候只需要指定其宽度即可。

详细了解：查看一下网址
http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html

float布局（面试难点）

float的特性：根据其名称可以了解到，它的作用就是让其元素浮动起来，也就是脱离文档流，和absolute一样不会对其他元素的定位产生干扰，它虽然脱离了文档流，但是却不会脱离文本流。

float的应用场景主要作用于图文混排，文字环绕等这种布局的。
float元素对自身的影响

形成“块”（BFC）
位置尽量靠上
位置尽量靠左（右）

float元素对兄弟元素的影响

上面贴非float元素
旁边贴float元素
不影响其他块级元素的位置
影响其他块级元素内部文本

float元素对父级元素的影响

从布局上“消失”
高度“塌陷”（解决父元素高度“塌陷的问题”就是在父元素中加入overflow:auto的属性）

inline-block布局

表现形式像文本一样block元素，没有高度塌陷，清楚浮动的问题，但是它有一个独特的问题就是需要处理间隙，其布局的限制就是做起响应式布局不如其他的布局方式。其比较适合那些定宽的布局需求。

处理间隙的方法: 方法一：父元素的字体设置为0，子元素的字体再设相应的字体号
代码如下

<!DOCTYPE html>
<html>
<head>
	<title>练习</title>
	<style type="text/css">
	.container{
		width:800px;
		height:400px;
		font-size: 0;
	}
	.left{
		width: 200px;
		display: inline-block;
		background: pink;
		font-size:14px;
	}
	.right{
		width: 580px;
		display: inline-block;
		background:red;
		font-size:14px;
	}

	</style>
</head>
<body>
	<div class="container">
		<span class='left'>左</span>
		<span class="right">右</span>
	</div>

</body>
</html>

方法二：就是改变html中的代码的编写方式让代码之间没有空格如下：

<!DOCTYPE html>
<html>
<head>
	<title>练习</title>
	<style type="text/css">
	.container{
		width:800px;
		height:400px;
		font-size:14px;
	}
	.left{
		width: 200px;
		background: pink;
	}
	.right{
		width: 580px;
		background:red;
	}

	</style>
</head>
<body>
	<div class="container">
		<span class='left'>左</span><span class="right">右</span>
	</div>

</body>
</html>

响应式设计和布局

通俗的讲，响应式设计和布局就是页面在不同设备上都能正常显示，我们在日常生活中主要处理的是屏幕大小的问题。主要的方法：隐藏（即确定好那些内容是要在PC端展示在手机端隐藏的）+折行+自适应空间，rem/viewport/media query(媒体查询)

面试题

实现两栏（三栏布局的方法）
- 表格布局
- float + margin布局
- inline-block布局
- flexbox布局（兼容性不太好）
position:absolute/fixed有什么区别？
前者相对最近的absolute/relative而后者则是相对屏幕而言。
display:inline-block的间隙
- 原因：字符间距
- 解决：消灭字符或者消灭间距
如何清除浮动
- 清除浮动原因：浮动的元素不会占据父元素的布局空间，也就是说父元素布局的时候不会去管浮动元素，有可能浮动元素会超出父元素从而对其他的元素产生影响。
- 清除浮动的方式：让盒子负责自己的布局，overflow:hidden(auto),::after{clear:both}
如何适配移动端页面？

背景图

纹理、图案
渐变
雪碧图动画

css 动画

动画的原理：主要是视觉暂留的作用（意思是人眼看到的东西会在人的大脑停留一部分时间）在技术方面我们则通过一些逐渐变化的画面形成动画。
动画的作用：使用户产生愉悦感，引起注意。
动画的类型：1.transition 补间动画。2.keyfram 关键帧动画。 3.逐帧动画

补间动画

补间动画的实现主要通过 transition 此属性实现的。
实例：

<div class="c2"></div>
.c2{
		width:20px;
		height:50px;
		background: green;
		transition: width .5s;
		/*transition-timint-function,描述变化和时间的关系*/
		transition-timing-function: ease-in;
	}
.c2:hover{
	width: 200px
}

关键帧动画

关键帧动画，相当于多个补间动画，与元素状态的变化无关。定义更加灵活。此动画，可以没有触发条件。
关键帧动画的实现主要通过animation

实例：

<div class="c3"></div>
.c3{
		width:20px;
		height:50px;
		background: red;
		animation: run 1s;
		animation-iteration-count: infinite; 
		/*指动画的次数，infinite是指无限循环。*/
	}
@keyframes run{
	0%{
		width: 0px;
	}
	100%{
		width:200px;
	}
}

逐帧动画

逐帧动画实现的原理是在关键帧动画的基础上实现的。

动画的面试题

css动画的实现方式有几种
- transition
- keyframes(animation)
过渡动画和关键帧动画的区别
- 过度动画需要有状态变化
- 关键帧动画不需要状态变化
- 关键帧动画能控制更精细
如何实现逐帧动画
- 使用关键帧动画
- 去掉补间（steps）
css动画的性能
- 性能不坏
- 部分情况下优于js
- 但js可以做到更好
- 部分高危属性 box-shadow等

css预处理器

基于css的另一种语言，通过工具编译成css,添加了很多css不具备的特性，能提升css文件的组织。

特性：

嵌套反应层级和约束
变量和计算减少重复代码
Extend 和Mixin代码片段
循环适用于复杂有规律的样式
import Css 文件模块化

sass和less变量的区别

sass变量是用‘$’符号去声明的。
less变量是用‘@’符号去声明的。

sass和less中mixin的使用

less代码示例：

.block(@fontsize){
    font-size:@fontsize;
    border:1px solid #ccc;
    border-radius:4px;

}

调用：
.box{
    .block(12px)
}
.box1{
    @include block(12px);
    color:green;
}

sass代码示例：

@mixin block($fontSize){
    font-size:$fontSize;
    border:1px solid #ccc;
    border-radius:4px;
    
}
调用：
.box{
    @include block(12px);
    color:red;
}
.box1{
    @include block(12px);
    color:green;
}

生成对应的css

.box{
    font-size:12px;
    border:1px solid #ccc;
    border-radius:4px;
    color:red;
}
.box1{
    font-size:12px;
    border:1px solid #ccc;
    border-radius:4px;
    color:green;
}

less和sass中extend的使用

less代码示例：

.block{
    font-size:@fontsize;
    border:1px solid #ccc;
    border-radius:4px;

}
使用：
.box{
    &:extent(.block);
    color:red;
}
.box1{
    &:extent(.block);
    color:red;
}

sass代码示例：

.block{
    font-size:$fontsize;
    border:1px solid #ccc;
    border-radius:4px;

}
使用：
.box{
    @extend .block;
    color:red;
}
.box1{
    @extend .block;
    color:green;
}

生成对应的css

.block .box .box1{
    font-size:$fontsize;
    border:1px solid #ccc;
    border-radius:4px;
}
.box{
    color:red;
}
.box1{
    color:green;
}

css预处理器框架

SASS-Compass
Less-Lesshat/EST
提供现成的mixin
类似JS类库封装常用功能

面试题

常见的CSS预处理器
- Less(Node.js)
- Sasss(Ruby有node版本)
预处理器的作用
- 帮助更好地组织CSS代码
- 提高代码复用率
- 提升可维护性
预处理器的能力
- 嵌套反映层级和约束
- 变量和计算减少重复代码
- Extend和Mixin代码片段
- 循环适用于复杂有规律的样式
- import CSS文件模块化
预处理器的优缺点
- 优点：提高代码复用率和可维护性
- 缺点：需要引入编译过程有学习成本

Bootstrap相关面试题

Bootstrap的优缺点
- 优点：CSS代码结构合理现成的样式可以直接使用
- 缺点：定制较为繁琐体积大
Bootstrap如何实现响应式布局
- 原理：通过media query设置不同分辨率的class
- 使用：为不同分辨率选择不同的网格class
如何基于Bootstrap定制自己的样式
- 使用CSS同名类覆盖
- 修改源码重新构建
- 引用scss文件修改变量

CSS工程化

笼统的说css工程化有一下几个特点：组织、优化、构建、维护。

工具：PostCSS

PostCSS 本身只有解析能力
各种神奇的特性全靠插件
目前有200多种插件
- import 模块合并
- autoprefixier 自动添加前缀
- cssnano压缩代码
- cssnext使用css新特性
- precss变量、mixin、循环等

随~安

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5+css3

目标：学会布局、特效、动画轻松应对日常前端工作。html常见元素和理解前端三大件：HTML结构css样式JavaScript行为。html 常见元素head:meta、title、style、link、script、base。body:div/section/article/aside/header/footerp/span/em/strongtable/thead...
复制链接

扫一扫

专栏目录