1.z-index的使用
答:z-index是用于设置标签的层级关系,需要同时设置标签的position属性,标签的默认z-index为0,可以设置负数,值越大,越在顶部,相反值越小 越在下面, 权重的数字也要适当 导航 底部切换 固定logo等 一些常见估计在最顶部 的权重可以把数值调大 ,其他的 就适当
2.float的使用
答:属性定义元素在哪个方向浮动。在HTML有标准流,浮动流 当元素浮动的时候,他本身就会脱离标准流,如果父盒子没设置高度的话 会变成0,所以我们可以通过清除浮动来消除影响 以往这个属性总应用于图像,使文本围绕在图像周围,在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。具体如下:
float造成的效果
- 使元素本身变成了类似于inline-block的元素
- 使包裹它的元素忽略它的高度,即父元素没有了高度
- 如:给子元素box设置了height:100px;此时的父元素height也是100px。
float的影响
- float使元素脱离了文档流按照指定的方向发生了移动,直到它的外边缘碰到包含框或者另一个浮动的边框为止。
- 浮动只会影响他后面的元素,如果上面的元素不浮动,他也不会上去的
- 如果父元素太窄,无法容纳所有的浮动元素,无法容纳的浮动元素会换行显示。
- 以换行的那个元素为基准,如果有浮动元素的高度大于换行的那个元素,那么当换行元素换行时会被高的那个元素"卡住"
3.清除浮动影响的方式
答:float会造成文档流的破坏,会让布局方式发生改变 浮动元素会覆盖在标准流的元素上面 因此,需要消除float所造成的影响一般有如下几种方案解决:
- 针对子元素:给浮动的子元素后面再加一个元素,加上一个clear:both属性即可正常显示,缺点是随意添加了一个空元素,不符合代码规范
- 针对于1的另外一个思路就是通过伪类的方法在伪类上添加clear:both;
- 针对父元素:给父元素后面添加一个相邻的空元素,设置clear属性,但只是让后面的元素正常显示,并没有撑开父元素的高度
- 针对父元素:给父元素设置高度,可以正常显示,但扩展性不好,因为一般都是由里面的内容来撑开高度
- 针对父元素:给父元素设置display: inline-block,可以正常显示,但父元素的margin:auto失效了,而且会发现上下两个部分会出现间隙
- 针对父元素:给父元素设置overflow: hidden,可以正常显示了,但需要配合宽度,否则会默认占满一行。
4.css形变属性
答:CSS3添加了形变功能,通过transform 我们可以对元素进行旋转,平移,缩小放大,倾斜的操作,默认是2D,操作X和Y,
- 通过transform-style: preserve-3d 开始元素的3D模式 多了个Z轴,
- 通过 backface-visibility选择元素旋转到180度后 是否可以看到背面
- 通过perspective 开始元素近大远小的效果
- 这个是一些常见CSS图形 CSS图形变化
5.box-sizing的用法
答:标准的盒子模型的包括:margin,border,padding以及内容的宽度,即:盒子的实际宽度=内容的左右margin+左右border+左右padding+内容的实际宽度;默认的添加边距的话 内容盒子就会对应变换,而有时候我们需要固定大小但又要加边距 wm引入了box-sizing属性,可以改变标准盒子模型的计算方式,具体为:设置box-sizing:border-box的时候,盒子的实际宽度=内容的左右margin+内容的实际宽度,即宽度会保持不变 当然可以直接设置box-sizing:content-box的时候即可恢复正常的标准盒子模型
6.flex弹性布局
答:设置盒子的display属性为flex,或者line-flex,其对应还有六个css属性
- flex-direction:设置子元素的排列方式(row,column,row-reverse,column-reverse)
- row 默认值。灵活的项目将水平显示,正如一个行一样。
- column 灵活的项目将垂直显示,正如一个列一样。
- row-reverse 与 row 相同,但是以相反的顺序。
- column-reverse 与 column 相同,但是以相反的顺序。
- flex-warp:设置子元素的是否换行(nowarp,warp,warp-reverse)
- flex-flow:flex-direction和flex-warp的缩写,默认为row nowarp
- justify-content:设置子元素的水平排列方式(flex-start,flex-end,center,span-around,span-between)
- align-items:设置子元素的垂直方式(flex-start,flex-end,center,stretch,baseline)
- align-content:设置多个轴线的排列方式(flex-start,flex-end,center,spand-around,spand-between,stretch)
7.常见居中方案
- 行内元素水平居中:直接使用text-align:center;
- 行内元素垂直居中:vertical-align:middle并设置父级元素的行高为父级元素的高度
- 块级元素 水平居中使用:magin:0 auto;
- flex弹性布局:设置justify-content:center水平居中,align-items:垂直居中
- 通过padding属性进行垂直居中,计算中间值
- 通过table 布局 设置父级元素为:display:table-cell,vertical-align:middle;text-align:center;
- 高度确定的时候:绝对定位+margin来垂直居中 上下各为50%,上边距为高度的一半 左边距为宽度的一半
- 高度不确定的时候:绝对定位+transform,具体为:设置需要垂直居中的元素为:position:absolute,top:50%,left: 50%; transform:translate(-50%,-50%)
- 父级元素高度已知,子元素高宽固定(高度可不固定):text-align:center,line-height:父级高度