1. position定位
写出css中position的属性以及含义
答:position属性有五个:static、fixed、absolute、relative、sticky。
- static:默认属性,没有定位,遵循正常文档流。不受bottom、left、right、top影响。
- fixed:元素相对于浏览器窗口是固定位置,与文档流无关,不占空间。和其它元素重叠。
- absolute:相对于最近的已定位的父元素是不变的,若没有已定位的父元素,则相对于html。与文档流无关,不占空间。
- relative:相对其正常定位的(static),移动位置所占空间不会改变。常用来当作absolute定位的元素的 “容器” (子绝父相)。
- sticky:粘性定位,即固定位置,雷打不动。必须和至少一个bottom、left、right、top属性一起用。
- 关于z-index:与文档流无关,表示重叠元素的堆叠顺序。如果没有指定,则最后的元素显示在最上面。
2. 清除浮动
方法一:在需要浮动的元素后加一个带clear属性的空元素。
.clear{
clear:both;
}
<div class="clear"></div>
优点:简单,代码少;缺点:要添加很多 无语义的html代码。
方法二:给浮动元素的容器添加overflow:hidden/auto;属性。
( 小模块常用)(本身是浮动元素,内部自动清理浮动)
(在IE6还需触发hasLayout ,为父元素设置容器宽高zoom:1;)
方法三:使用邻接元素,,给浮动元素后面的元素添加clear:both;属性
(正文常用)
方法四:使用CSS的:after伪元素,给浮动元素的容器添加:after
(网页布局常用)
(在IE6还需触发hasLayout ,为父元素设置容器宽高zoom:1;)
.clearfix:after{
..
..
visibility:hidden;
}
.clear-fix{
/*触发hasLayout*/
zoom:1;
}
浮动溢出现象:
非IE浏览器 ,容器高度设置为auto,容器内有浮动元素 ,这个时候,容器的高度不能自动伸长适应内容,使内容溢出到容器以外的现象。
3. a标签的css伪类,优先级顺序
记忆:love hate - l v h a
a:link - a:visited - a:hover - a:active
4. 盒子水平居中垂直方案
共五种。
看我的另一篇文章吧~
例:若不知道父元素的宽高,怎么设置子元素水平居中?(手写css样式)
1.flex,父元素flex布局
<style>
.father{
display:flex;
justify-content:center;
align-items:center;
}
</style>
2.css新特性,盒子的
<style>
.box{
...
...
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
3.js方法:获取当前屏幕宽高,当前盒子宽高,再计算
let html=document.documentElement;
let wHeight=html.clientHeight,
wWidth=html.clientWidth,
bHeight=box.offsetHeight,
bWidth=box.offsetWidth;
box.style.position='absolute';
box.style.width=(wWidth-bWidth)/2+'px';
box.style.height=(wHeight-bHeight)/2+'px';
5. 盒模型
问:讲一讲盒模型有哪些?区别是什么?各个浏览器的兼容性如何?怎么解决兼容性问题?
CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。
分类:标准盒子模型(W3C)、怪异盒子模型(IE6)
1.标准盒子模型(W3C):
元素width=content,
盒子宽度=width+padding+border+margin
2.怪异盒子模型(IE6):
元素width=左右border+左右padding+content
盒子宽度=width+margin
加上doctype声明,让浏览器使用标准模式
6.浏览器兼容问题
7.画一条0.5px的线
本来最小的像素是1px,画不了1px。
方法一:meta viewport 将页面初始缩放值设置为0.5
viewport只针对于移动端
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
方法二:采用transform: scale()的方式
transform: scaleY(0.5); /*y方向上缩小*/
transform-origin:50% 100%;/*必须要这个,不然会虚化*/
transform-origin: x-axis y-axis;属性值的所代表的偏移位置,可以很灵活得使元素按照某一基准点进行旋转。
是以左上角为原点偏移的,举个栗子: transform-origin: 100% 50%;
更多transform-origin属性参考