目录
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;