您的关注收藏是我持续更新总结的动力!
欢迎各位大佬不吝才华补充更全面的解析供大家参考~
本篇主要总结CSS相关问题,共52小题
文章的最后,我会给出某些题目具体点的补充,点击跳转到最后 补充点
补充点
关于布局讲解:给你一份详细的CSS布局指南,请查收
补充第14点:
补充第15点:对于position属性,除了static值不开启定位,其他的relative、absolute、fixed、inherit都会 开启定位 !一般我们最常见的relative是为absolute服务的!来看一种情况,设置position:absolute,如果父元素是<body>,不管父元素是否开启定位,绝对定位会相对于当前页面;如果父元素不是<body>,并且开启定位的话,绝对定位会相对于父元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
background-color:yellow;
}
.box1{
width:500px;
height:500px;
background:green;
margin:100px;
}
.box2{
width:200px;
height:100px;
background:red;
position: absolute;
left:120px;
top:200px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div><!-- 只要父元素没开启定位,还是按照body绝对定位-->
</div>
<!-- 如果父元素开启定位,就按照父元素定位,我们下一个例子来看 -->
</body>
</html>
运行结果(红块相对于页面的黄块绝对定位):
对比来看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding:0;
margin:0;
background-color:yellow;
}
.box1{
width:500px;
height:500px;
background:green;
margin:100px;
position:relative; /* 如果父元素开启定位,就按照父元素定位 */
top:200px;
}
.box2{
width:200px;
height:100px;
background:red;
position: absolute;
left:120px;
top:200px;
}
</style>
</head>
<body>
<div class="box1"> <!-- 现在父元素开启了定位,按照box1定位 -->
<div class="box2"></div>
</div>
</body>
</html>
运行结果(红块相对于父元素绿块绝对定位):
补充第34点:伪类和伪元素的例子讲解参考如下
补充第45点,设置水平居中的方法,如果是行内元素中的文字,text-align必须设置在父级块元素才有效。比如行内元素<a>标签中的文字,text-align: center设置在<a>中是无效的,如果没有额外写父级块元素,那么父级块元素就是<body>,text-align: center写在<body>才会水平居中,如果本身就是块元素,text-align: center直接设置在该元素即可,比如
<body>
<p style="text-align: center">文字111</p>
</body>
如果父级元素(不一定是块元素)和子级块元素都有text-align属性,那就是就近原则,所以以子级块元素的text-align属性为准,如果子级块元素没有text-align:center,父级行内元素有text-align:center,则子级块元素的文字还是居中!综上所述:如果文字是块元素中的,会从自身开始往上找text-align属性,找到就生效,就近生效,找不到就不生效。如果文字是行内元素中的,会找父级块元素(块!元!素)中的text-align,找到就生效,就近生效,找不到就不生效。(你必须是块元素特性或者你父亲是块元素特性才有或得text-align属性的资格,然后就近原则)
继续补充45点:行内块级元素inline-block(inline-block拥有block的特性),可以利用text-align:center来设置水平居中效果的,比如下面的例子
button {
width: 100px;
height: 100px;
background-color: yellow;
}
<div style="text-align:center">
<button></button>
</div>
button是行内块元素,也就是默认display:inline-block,上面的黄色区域就是水平居中的,这个也比较特殊,水平居中并不针对文字
还是补充第45点:宽度固定的时候,margin: 0 auto;可以水平居中,但是如果父元素高度固定了,怎么同时设置垂直居中呢?比如父元素高度100px,而自身高度40px,那么上下的空白就是60px,那么我们设置margin: 30px auto;就可以同时水平垂直居中
次回----JavaScript
关注、留言,我们一起学习,您的收藏是我持续更新的动力!
===============Talk is cheap, show me the code================