Html 和 Css

 Html部分

一、块级元素，行内元素，行内块元素

块级元素（block）：

特点：可设置宽高，边距，占满整行，会自动换行

示例：div ul ol h1-h6......

行内元素（inline）：

特点：不能设置宽高，边距，不会占满整行，不会自动换行

示例：span label

行内块元素（inline-block）：

特点：具备块级元素和行内元素的特点，可设置宽高，边距，占满整行，但不会自动换行

示例：img input

二、块级元素，行内元素，行内块元素三者之间的转换

display：block；转换成块级元素。

display：inline；转换成行内元素。

display：inline-block；转换成行内块级元素。

三、html的语义化

1、正确的标签做正确的事 

2、页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

3、便于阅读维护理解

四、img标签中的title属性和alt属性

title属性：图片说明信息，鼠标移上去时显示的信息。

alt属性：替代图片的信息，图片缺省时显示的信息。 

五、html5新特性

1、语义化标签（通过语义化标签，可以让页面有更加完善的结构，让页面的元素有含义，同时利于被搜索引擎解析，有利于SEO，主要标签包括下面的标签） 

标签	描述
header	表示文档的头部区域
footer	表示文档的尾部区域
nav	表示文档导航部分
section	表示文档的某一节
article	表示文章
main	表示文档主要的内容区域

2、表单元素（可以通过input的type属性指定类型是number还是date或者url，同时还添加了placeholder和required等表单属性。） 

3、媒体元素如video（视频），audio（音频）

<video src="" autoplay="" controls=""></video>
    <audio src="" autoplay="" controls=""></audio>
    <!-- 
      src:播放的资源路径.
      autoplay：是否自动播放。
　　　 controls：是否显示播放控件。
　　　 currentTime：当前播放的时间点。
　     duration：总时长(s)。
　　　　ended：是否结束。
　　　　loop：是否循环播放。
　　　　muted：是否静音。
　　　　volume：音量设置(0~1)。
　　　　paused：是否在播放。
　　　　preload：指定视频预加载方案。
　　　　play()：播放。
　　　　pause()：暂停。
　　　　onplay：开始播放事件。
　　　　onpause：开始暂停事件。
　　　　onplaying：正在播放中事件。
     -->

 4、本地存储Localstorage和SessionStorage、cookie

Localstorage和SessionStorage在另一文中有详解

如图：

5、Websocket协议（websocket和HTTP的区别）

相同点：HTTP和Websocket都是基于TCP的应用层协议。

不同点：

a、websocket是双向通信协议，模拟socket协议，可以双向发送和接受消息，HTTP是单向的，意思是说通信只能由客户端发起。

b、websocket是需要浏览器和服务器通过握手建立连接，但是HTTP是浏览器向服务器发送连接，服务器预先不知道这个连接。

联系：websocket建立握手时需要基于HTTP进行传输，建立连接之后便不再需要HTTP协议了。

6、canvas绘图 

canvas绘图指的是在页面中设定一个区域，然后通过JS动态的在这个区域绘制图形。

7、svg绘图

8、地理定位（使用getCurrentPosition()方法来获取用户的位置，从而实现队地理位置的定位。） 

9、拖放API（通过给标签元素设置属性draggable值为true，能够实现对目标元素的拖动。） 

六、 <!DOCTYPE>的作用

告诉浏览器以何种文档规范解解析网页

七、src和href的区别 

src 表示引用资源，替换当前元素，用在 img，script，iframe 上，src 是页面内容不可缺少的一部分。

href 用于在当前元素和引用资源之间确立联系，用在 link 和 a 等元素上

八、优雅降级和渐进增强 

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 

渐进增强 progressive enhancement：一开始保证最基本的功能，再改进和追加功能 

九、link和@import的异同点

相同点：外部引用css的方式

不同点：

link	@import
XHTML标签，除了加载css外，还可以定义rss等其他事务	属于CSS范畴，只能加载css
引用css时，在页面载入时同时加载css	页面完全载入后再加载css
是XHTML标签，无兼容问题	不支持低版本的浏览器
支持使用js控制DOM去改变样式	不支持使用js控制DOM去改变样式

 

CSS部分

一、css盒模型

介绍：盒模型又称框模型，由元素内容，内边距（padding），边框（border），外边距（margin）组成。

分类：

标准盒模型：宽度=内容的宽度（content）+ padding + border + margin

怪异盒模型： 宽度=内容宽度（content+border+padding）+ margin

IE怪异盒模型和标准模型唯一的区别是内容计算方式的不同

示意图：

标准盒模型：宽度=元素宽度，高度计算同理

 怪异盒模型：宽度=元素宽度+padding+border，高度计算同理

 二、box-sizing属性

介绍：控制元素的盒模型属性，默认是content-box

说明：

属性	说明
content-box（标准盒模型）	盒子宽高=元素宽高
border-box（怪异盒模型）	盒子宽高=元素宽高+padding+border

 示例：

当box-sizing:content-box;

.first .one {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid red;
  margin: 15px;
}

 当box-sizing:content-box;时，宽度=元素宽度=100px；如下图

 当box-sizing:border-box;时即为怪异盒模型时

.first .two {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 5px solid skyblue;
  margin: 15px;
  box-sizing: border-box;
}

当为怪异盒模型时，它的宽度=元素宽度+padding+border=content+10px*2+5px*2=100px，所以内容的宽度=70px

 

 三、单行文本超出显示省略号

 介绍：超出一定宽度后，显示省略号，必须加宽度

示例：

.desc{
  width:200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 四、多行文本超出显示省略号

介绍：超出指定行数后显示省略号

示例：

.duohang{
  display: -webkit-box;   // 将对象作为弹性伸缩盒子模型显示 ,必须结合的属性 
  -webkit-box-orient: vertical;    // 设置或检索伸缩盒对象的子元素的排列方式,必须结合的属性 
  -webkit-line-clamp: 3;     //文本显示行数
  overflow: hidden;
}

五、浮动 

应用：让块级元素水平排列

语法：

选择器 {
	float: 属性值;
}

说明：

属性值	作用
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

注意：
（1）脱离标准流的控制移动到指定位置
（2）浮动的盒子不再保留原先的位置

六、清除浮动

原因：浮动引起父元素高度坍塌（即父元素高度为0） 

示例：

方法：

一、父元素添加高度（不太灵活）

二、父元素设置超出隐藏（overflow:hidden）

三、增加一个空标签，给它设置（clear:both），增加多余的空标签

四、利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果

             .clear {
                zoom: 1;
            }
            .clear:after {
                content: "";
                clear: both;
                display: block;
                height: 0;
                overflow: hidden;
                visibility: hidden;
            }

七、title和alt 

title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息. 

alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息. 

八、nth-of-type | nth-child? 

举例说明：
<ul> <p>111</p> <span>222</span> <li>1</li> <li>2</li> <li>3</li> </ul>
li:nth-of-type(2):表示ul下的第二个li元素
li:nth-child(2)：表示既是li元素又是在ul下的第二个元素（找不到）。
建议一般使用nth-of-type，不容易出问题

九、:before和::before区别? 

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

伪元素：
::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动
::selection用来改变浏览网页选中文的默认效果

十、CSS3有哪些新特性 

a、新增选择器

选择器	说明
p:first-of-type	属于其父元素的首个元素
p:last-of-type	属于其父元素的最后元素
p:only-of-type	属于其父元素唯一的元素
p:only-child	属于其父元素的唯一子元素
p:nth-child(2)	属于其父元素的第二个子元素

b、新增样式

1、边框
border-radius：创建圆角边框；
box-shadow：添加阴影；
border-image：使用图片绘制边框

2、背景
background-clip：确定背景画区；
background-origin：当我们设置背景图片时，图片是会以左上角对齐，但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的；
background-size：用来调整背景图片的大小；
background-break：元素可以被分成几个独立的盒子（如使内联元素span跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。

3、文字
word-wrap：normal：使用浏览器默认的换行；break-all：允许在单词内换行。
text-overflow：当文本超过盒子大小时，是修建文本，还是省略号表示。
text-shadow：设置文本阴影。

4、颜色
rgba：颜色和透明度；
hala：色相+饱和度+亮度+透明度。

c、transition过渡（一般和:hover搭配使用）

语法：

transition: 过渡属性 花费时间 运动曲线 何时开始;

说明：

1.过渡属性：想要变化的css属性，如高度宽度，颜色，边框啥，如果想要所有的属性都过渡变化，只需写一个all就可以

2.花费时间：单位是秒，必须写

3.运动曲线：默认是ease，可省略

4.何时开始：单位是秒

口诀：谁做过渡就给谁加

d、transform转换

translate移动

rotate旋转

scale缩放

skew倾斜

e、animation动画

语法：

animation: name duration timing-function delay iteration-count direction;

说明：

animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
 

f、颜色渐变

线行渐变

background: linear-gradient(to right top,pink,blue);

径向渐变

background: linear-gradient(25deg,red,green);

十、a标签中 如何禁用href 跳转页面 或 定位链接

e.preventDefault();
href="javascript:void(0);

十一、display的值

值	说明
inline（默认）	内联
block	块级元素
inline-block	行内块
none	隐藏
table	表格
list-item	项目列表

 十二、position的值

值	说明
static（默认）	按正常文档流排列
relative	相对定位，不脱离文档流，相对于自身位置而言
absolute	绝对定位，相对于最近已定位的父元素而言，如果没有相对于根元素
fixed	固定定位，相对于可视窗口而言
sticky	粘性定位，基于用户滚动的位置

十三、媒体查询（另一篇文章有，不再重复）

十四、css中可继承、不可继承的属性 

可继承的属性：字体属性如：color   font-size  font-family

 不可继承的属性：尺寸属性如：width   height   padding   border   margin

十五、元素水平垂直居中的方式

方式一：flex布局

方式二：定位+margin（盒子宽高的一半）

方式三：定位+transform

方式四：定位+margin（定位时top,bottom,left,right均为0，margin:0 auto） 

十六、两栏布局，左边定宽，右边自适应

方式一、flex布局（左边盒子设置宽度，右边盒子设置flex:1剩余空间均等分）

示例：

   .box1 {
                display: flex;
            }
            .box1 .left {
                width: 200px;
                height: 600px;
                background: pink;
            }
            .box1 .right {
                flex: 1;
                height: 600px;
                background-color: skyblue;
            }

 方式二、浮动

        .box2 {
                overflow: hidden;
                margin-top: 30px;
            }
            .box2 .left {
                float: left;
                width: 200px;
                height: 600px;
                background-color: pink;
            }
            .box2 .right {
                height: 600px;
                background-color: skyblue;
                margin-left: 200px;
            }

十七、三栏布局，左右定宽，中间自适应

方式一、flex布局

    .box3 {
                display: flex;
            }
            .box3 .left {
                width: 200px;
                height: 600px;
                background-color: pink;
            }
            .box3 .mid {
                flex: 1;
                background-color: yellowgreen;
            }
            .box3 .right {
                width: 200px;
                height: 600px;
                background-color: skyblue;
            }

方式二、定位 

    .box4 {
                position: relative;
                margin-top: 50px;
            }
            .box4 .left {
                position: absolute;
                top: 0;
                left: 0;
                width: 200px;
                height: 600px;
                background-color: pink;
            }
            .box4 .mid {
                height: 600px;
                background-color: yellowgreen;
            }
            .box4 .right {
                position: absolute;
                top: 0;
                right: 0;
                width: 200px;
                height: 600px;
                background-color: skyblue;
            }

十八、隐藏元素的方法

方法	说明
display:none	元素隐藏，不占位置
visibility:hidden	元素隐藏，占据位置
opacity:0	元素隐藏，占据位置，如果绑定了事件，点击该区域时，也会触发点击事件

 十九、CSS  hack

前言：浏览器兼容性问题，不同浏览器对同一段代码有不同的解析，造成页面显示不统一的情况。为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的css样式

介绍：我们把针对不同浏览器或版本而写css的过程叫做CSS  hack

分类：IE条件注释法，css属性前缀法，选择器前缀法

二十、transition和animation的异同点

相同点：随时间改变元素的属性值

不同点：

1、transition：需要触发事件才能改变属性

2、animation：不需要触发事件随时间改变属性值

二十一、如何实现6px大小的字 

font-size:12px;

transform:scale(.5) 

二十二、单位px  em  rem  vw  vh

值	说明
px	绝对单位长度，物理像素
em	相对于父元素字体大小而言
rem	相对于根元素字体大小而言
vw	相对于屏幕宽度的1%
vh	相对于屏幕高度的1%