目录
6、说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）
1、H5C3和Html，css相比有什么变化
H5新增特性：
（1）语义化标签：如header、nav、footer、aside、article、section等。
（2）音频（audio）、视频（video）
（3）表单属性：placeholder、autofoocus、required、maxlenght、minlength、novaildate、autocomplete
（4）输入框类型：email、url、number、search、range、color、time、date、month
C3新特性：
（1）选择器：属性选择器、伪类选择器、伪元素选择器
（2）颜色：rgba、hsla表示方式
（3）阴影：盒子阴影（box-shadow）文字阴影（text-shadow）
（4）边框：圆角border-radius
（5）怪异盒子模型：box-sizing
（5）背景剪切：背景色剪切：background-clip背景图剪切：background-origin
（6）渐变：线性渐变：linear-gradient 径向渐变：radial-gradient
（7）转换：transfrom 缩放拉伸scale 扭曲skew 平移translate旋转rotate
（8）过渡：transition可以实现动画
（9）动画animate
2、标签元素分类和特点
（1）根据标签在文档中的位置特性进行分类:块级元素（block）
行内元素（inline）
行内块元素（inline-block）
（2）特点：
块级元素：（1）有默认的宽高，宽度是父元素的100%高度是内容撑起来的，table除外
（2）宽高可以设置
（3）可以包含任意元素（表格系除外），hn不能包含hn，p不能包含块级 元素
（4）独占一行
（5）四个方向的内外边距都可以设置
行内元素：（1）有默认的宽高，都是内容所撑起来的
（2）设置宽高无效
（3）一般只能包含行内元素与文本内容
（4）相邻的行内元素在同一行显示
（5）水平方向的外边距可以设置，垂直方向设置无效；内边距四个方向 都可以。
行内块元素：（1）有默认的宽高，有本身特点所决定
（2）宽高可以设置
（3）一般不包含其他元素
（4）相邻的行内元素在同一行上显示
（5）四个方向的内外边距都可以设置
3、圣杯布局（双飞翼布局）有哪几种实现方式
（1）定位
让左右两边的盒子绝对定位，左边盒子left:0,右边盒子：right:0,绝对定位盒子不占位置，中间的盒子padding左右宽度为左右两边盒子的宽度保留左右盒子的位置
（2）使用浮动加calc计算属性
让所有盒子左浮动，左右两边的盒子宽度固定，中间盒子的宽度通过calc计算属性动态计算得出即中间盒子的宽度为100%减去左右两边的盒子总宽度
（3）使用flex布局
通过父元素设置flex布局，让盒子在一行显示，左右两边的盒子固定宽度，而父元素的剩余宽度则为中间盒子的宽度flex:1
4、弹性盒模型有哪些属性和属性值，什么效果
（1）容器（container）的属性：
flex-direction：决定主轴的方向：row：默认值从左向右
row-reverse：从右向左
column：从上向下
column_reverse：从下向上
flex-wrap：设置超出容器的项目是否换行：
nowrap（默认值）：项目显示在一行中，默认情况下会缩小
wrap：如果需要，从左到右、从上到下，弹性项目将显示在多行中;
wrap-reverse：如果需要，从左到右和从下到上，弹性项目将显示在多行中
flex-flow：flex-direction和flex-wrap的简写样式，默认值是row
justify-content：定义项目在主轴上的对齐方式：
flex-start:（默认值）：左对齐
flex-end：右对齐
cenetr：居中
space-between:项目之间的间隔都相等，开始和结束的间距为0
space-around:：每个项目两侧的间隔相等，开始和结束的距离是项目间距的一半
space-evenly:开始和结束的间距与项目间的间距相等
align-items：定义项目在交叉轴上如何对齐：
flex-start:（默认值）：左对齐
flex-end：右对齐
cenetr：居中
stretch
baseline
align-content：定义了多跟轴线的对齐方式。如果项目只有一根轴线该属性不起作用：
flex-start:（默认值）：左对齐
flex-end：右对齐
cenetr：居中
space-between:项目之间的间隔都相等，开始和结束的间距为0
space-around:：每个项目两侧的间隔相等，开始和结束的距离是项目间距的一半
space-evenly:开始和结束的间距与项目间的间距相等
stretch
（2）项目：
order：定义项目的排列顺序。数值越小，排列越靠前，默认值为0。值为<integer>
flex-grow：定义项目的放大比例，默认为0。
flex-shrink：定义项目的缩小比例，默认为1。
flex-basis：项目占据的主轴空间。
flex：Flex-grow、Flex-shrink和Flex-basis的简写。默认值是0,1，auto
align-self:设置个别项目在交叉轴（Y轴）上的对齐方式
5、常见的盒子模型有哪些，有什么区别
（1）标准盒模型
①给标签添加：box-sizing:content-box；(默认)
②这个标签就转换为了标准盒模型
③标签得实际宽度 = 设置的宽度 + border宽度 + padding的宽度
（2）怪异盒模型
①给标签添加：box-sizing:border-box；
②这个标签就转换为了怪异盒模型
③标签得实际宽度 = 设置的宽度
④如果设置了padding和border就是从设置的实际宽高中减去，减去后才是内容的宽高。
主要区别：对于宽高的二者定义不同
标准盒模型：设置的宽度就等于内容的宽度
怪异盒模型：内容的宽度 = 设置的宽度 - border的宽度 - padding的宽度
6、说一下对浮动的理解，（什么是浮动，有什么用，怎么用，有什么问题，怎么清除浮动）
（1）浮动：元素脱离标准流，漂浮到指定位置的过程。
（2）设置浮动的初衷：实现文字环绕图片的效果
（3）浮动的特点：添加浮动后的元素与其他元素不在同一平面，会漂浮在其他元素之上
添加浮动后的元素是不占位置的
添加元素后的多个元素会在同一行上显示
添加浮动后的元素不会超出父元素的范围
添加浮动后的元素不会覆盖父元素的内边距与边框
添加浮动后的元素会有行内块元素的特性
（4）清除浮动：并不是清除浮动，而是清除浮动所带来的影响
（5）浮动的影响：添加浮动后的子元素撑不开父元素的高度
（6）清除浮动的方式：额外标签法：给子元素添加额外的兄弟元素
给父元素添加overflow:hidden
伪元素清除浮动： ::after后边添加元素，::before：前面添加元素
双伪元素清除浮动
7、伪类有哪些，作用和书写顺序（按以下顺序）
:link：未单击时
:visited：已访问时
:hover：鼠标移入时
:active：鼠标点击时
8、如何去掉相邻两个图片中间的白边
img是内联块状元素，默认之间是存在缝隙的。要去除缝隙有两种方法：
（1）设置包含img的盒子font-size属性为0
（2）设置img为block元素，然后加浮动
9、如何实现文字垂直水平居中，盒子垂直水平居中
单行文字水平居中：text-align：center；
单行文字垂直居中：line-hight：盒子高度；
多行文字水平居中：text-align：center；
多行文字垂直居中（父盒子有宽高，均为200px）：
（1）父盒子：display: table;
文字：display: table-cell;
vertical-align: middle;
（2）文字：display: inline-block;
position: relative;
top: 30%;
transform: translateY(-30%);
（3）父盒子：display: flex;
align-items: center;
盒子居中：①子盒子：绝对布局: position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
②子盒子：绝对布局：margin:auto;
top、left、right、bottom的值相等即可
③父盒子：flex布局： display:flex;
justify-content:center;
align-items:center;
10、单行文本溢出显示省略号，多行文本溢出显示省略号
（1）单行文本：white-space: nowrap ;overflow: hidden; text-overflow: ellipsis;
（2）多行文本（以2行为例）：overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertial;
853
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
