问题一,img用什莫方法,在不调动它的层级的前提下,使其居中定位
vertical-align属性
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img水平居中</title>
<style>
*{
color: red;
}
html,body {
height: 100%;
//水平居中
text-align: center;
}
body::after {
content: '';
height: 100%;
//必须为行内元素,不然无法影响img的基线定位
display: inline-block;
vertical-align: middle;
}
img {
//如果存在同级的行内元素,则以同级行内元素的中部为基线与img基线【中部】对齐
//高度居中【前提:伪元素也存在vertical-align: middle;声明】
vertical-align: middle;
}
</style>
</head>
<body>
<img src="img/4.png" />
</body>
</html>
问题二,怎末使div居中
margin属性
先进行定位,在利用margin:auto特性居中
01,position=absolute,lrtb=0,margin=auto,定位对应的是其父元素容器。
02,position=absolute,lt=50%,margin-lt= -自身的一半
问题三,怎末使文字居中
line-height:父级容器高度;【若只是一行】
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中以及文字居中</title>
<style>
*{
color: red;
}
html,body {
height: 100%;
text-align: center;
}
#test {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 200px;
font: 40px "宋体";
line-height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="test">
燃情雪
</div>
</body>
</html>
问题四,怎末在不知道元素高宽的情况下居中?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>未知高宽,元素居中</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
div {
display: inline-block;
background-color: pink;
padding: 50px;
text-align: center;
font-size: 2em;
font: bold;
color: #888888;
position: absolute;
//先绝对定位元素左上角位置为初始包含块的width50%,height50%
left: 50%;
top: 50%;
//因为translate百分比是自身为参照
//所以将元素中心基点移动到包含块的width50%,height50%的位置
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
燃情雪
</div>
</body>
</html>
问题五,怎末配合UI人员的设计图纸中的框框如图
高度改为:30px;
box-sizing属性【用处极大】
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<style>
*{
color: red;
}
html,body {
height: 100%;
text-align: center;
}
#test {
margin: 20px auto;
width: 200px;
height: 30px;
padding: 0px 30px;
//整个所设width,height包裹padding,border
box-sizing: border-box;
background-color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="test" value="" placeholder="输入所想" />
</body>
</html>
问题六,border-radius的具体用法和相关注意点是什莫呢?
注意点:在移动端,因为浏览器是随着操作系统升级而升级的,所以可能比较老版,不支持百分比,所以最好用px值。
用法:左上角【上】,右上角【右】,右下角【下】,左下角【左】
UI图形表示:
图形错了,但是意思是这个,不改了。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style>
*{
color: red;
}
html,body {
height: 100%;
text-align: center;
}
#test {
margin: 20px auto;
width: 200px;
height: 200px;
border-radius: 30px 10px 20px 50px;
background-color: pink;
}
</style>
</head>
<body>
<div id="test">
</div>
</body>
</html>
问题七,怎末禁止系统默认滚动条
html,body {height:100%;overflow:hidden;}
扩展:
滚动条是不可能存在html上,如果html上有overflow:srcoll;则滚动条出现在document上,如果body上同时也存在overflow:auto;则出现在body上
问题八,什么是初始包含块
简单来说,为什么DOM树的根节点是document而不是html?所以咯,在html的外部肯定存在一个父节点,那就是初始包含块,大小为viewport【窗口】的尺寸。
问题九,在html和body还未定位时,body中的绝对定位是相对于谁的呢?这又可以产生什么作用呢?
当然,是相对于初始包含块的定位。那想想既然html是不可能存在滚动条的,那我们可不可以利用层级的不同来解决有些移动端fixed不支持的情况。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解决移动端fixed不支持【绝对定位代替固定定位】</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body {
height: 100%;
text-align: center;
//若body没有overflow属性,则将会在初始包含块中生成滚动条而不是html
//若body存在overflow属性,则会继承给body
overflow: auto;
}
#test {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: pink;
}
#wrap{
height: 1000px;
width: 200px;
background-color: #0000FF;
line-height: 500px;
}
</style>
</head>
<body>
<div id="test"></div>
<div id="wrap">
sssssssssssssss
</div>
</body>
</html>