声明:本篇文章是我在学习“指尖流逝的夏末”博主的文章——CSS3与页面布局学习总结(四)——页面布局的多种方法过程中,把自己认为重要的易忘记的一些点加以记录,另外有些地方再加上自己的一些理解。
一、负边距与浮动布局
1.1负边距(margin为负值时)
1.1.1向上移动
当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移。
1.1.2去除列表右边框
就像原文中实现的商品展示列表,最初很困惑为什么div2的设置一定要设置为-20px,且无论是修改成0,-10还是其他的值,都不会正确显示出来。
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>负边距</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#div1 {
width: 780px;
height: 380px;
margin: 0 auto;
border: 3px solid dodgerblue;
overflow: hidden;
margin-top: 10px;
}
.box {
width: 180px;
height: 180px;
margin: 0 20px 20px 0;
background: orangered;
float: left;
}
#div2{
margin-right: -20px; //不懂为什么要是-20px!!!!!!
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</body>
</html>
查看元素,发现这时候div2的大小为,width:800px。为什么是800呢,因为本来应该4个div的width +4个右间隙=820px,但是div2设置了margin-right:-20px,就相当于将div向右移动了20px,这时候刚好达到如图所示的效果,第四个div的margin-right被隐藏了。
否则,例如当我们将div2的margin-right设置为0时,查看元素,少了两个。
再次查看其余的两个div块,如下图所示。原来是被挤到了下一行去了。这正是因为,我们刚才算的,本来需要820的width才能放下8个div块,但是,margin-right:0时,相当于此时的div2等于外部的div大小760px,明显放不下8个div块,但是一排三个是绰绰有余的,因此放不下的自然就挪到了下一行!
小小的总结:浮动元素在包含块内,当包含块宽度不足以容下浮动元素时,便会自动折行。
二、定位
又翻看了该博主的另一篇博文:CSS3与页面布局学习总结(三)——BFC、定位、浮动、垂直居中
2.1两个概念:
(1)BFC:“块级格式化上下文”——触发条件:元素定位非static、relative的情况下,float也是一种定位方式;
特点有:不和浮动元素重叠,清除外部浮动,阻止浮动元素覆盖;
例如:如果一个浮动元素后面跟着一个非浮动元素,就产生重叠。如图所示:
因此,通过overflow:hidden属性产生BFC块级格式化上下文,阻止浮动元素的覆盖。
(2)IFC:“行内格式化上下文”——触发条件:
2.2定位类型
(1)static:静态定位->定位偏移属性将不会被应用如top、right、bottom、left。
(2)relative:相对定位->参照自身在常规流中位置,通过top、right、bottom、left定位。
(3)absolute:绝对定位->找里自身最近的祖先元素,一直找到,如果没有那么其祖先元素就是body。!!但祖先元素必须定位,不为static即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
div {
border: 2px solid yellow;
padding: 10px;
}
#div1 {
width: 400px;
height: 400px;
}
#div2 {
width: 300px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
position: absolute;/*在这里 div1div2都没有设置定位,
因此这里的absolute是相对于body元素 从标准准流中脱离了 所以会跑到div的外面去*/
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div id="div1"> div1
<div id="div2"> div2
<div id="div3">div3
</div>
</div>
</div>
</body>
</html>
现在当给div3的父元素的父元素即div1设置定位后,效果如下所示:
(4)fixed:固定定位->偏移定位以窗口为参考,即相当于窗口右下角浮动着一个小窗口,但滑动滚动条时,该窗口始终相当于位于窗口的右下角,并不会随滚动条的滑动而改变他的位置。
注:absolute和fixed都脱离了常规流,该定位下,盒子的偏移位置都不会影响常规流中的任何元素。
2.3 其他的定位属性
(1)z-index:设置层叠次序的优先级,值越大优先级越高,越显示在前面。默认值为auto,元素在当前层叠上下文中的层叠级别是0。
上图所示图片的示例代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
position: absolute;
}
#div1 {
background: lightsalmon;
}
#div2 {
background: lightgreen;
left: 33px;
top: 33px;
z-index: 1; //层叠次序最大,显示在最前面一层,其余两个div1和div2均按在dom结构中的次序,从上往下显示。
}
#div3{
background: lightblue;
left: 66px;
top: 66px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
</body>
</html>
(2)display:取值有none(元素不显示)、inline(显示为行内元素)、block(0块级元素)。
(3)opacity属性:设置元素的不透明级别,取值为(0-1)。
(4)target伪类(只有只是css3的浏览器才可以使用,详细参见原文例子及本人的css笔记):匹配相关URL指向的E元素,URL后面跟锚点#,也就是指向文档内某个具体的元素,这个被链接的元素就是目标元素,:target选择器用于选择当前活动的目标元素。
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.content {
height: 50px;
font-size: 20px;
color: royalblue;
border: 2px solid darkblue;
}
div :target {
background: lightgreen;
}
</style>
</head>
<body>
<div id="div1">
<a href="#p1">第一段</a> //这里的href就相当于url后面跟了一个#p1,然后通过点击时,即会触发选择到id为p1的div元素。
<a href="#p2">第二段</a>
<a href="#p3">第三段</a>
</div>
<div id="div2">
<div id="p1" class="content">第一段内容</div>
<div id="p2" class="content">第二段内容</div>
<div id="p3" class="content">第三段内容</div>
</div>
</body>
</html>
(5)浮动:行内元素不能设置其宽高,设置也不会起作用。
因此,一般需要将行内元素转换为block或inline-block后,才可以设置其宽高。
清除浮动:clear none | left | right | both,顺次为两边都有浮动对象 | 不允许左边有浮动对象 | 不允许右边有浮动对象 | 两边均不允许有浮动对象
例如,清除内部浮动时,外部一个div包含了浮动的div,必须要在内部的末尾加上清除浮动的,放在前面则不会起作用。
(6)多种居中方法:
有宽度标签设置margin: 0 auto ->水平居中;
设置定位元素的所有偏移都为0且margin为auto是,将水平垂直居中,父元素自身高度可动态变化??父元素自身高度可动态变化是什么意思。。
如下所示的示例中,设置了div1的所有偏移为0且定位为绝对定位,由于这时父元素div0设置了其定位,因此div1的参照标准为div0。因此,这里偏移都为0时,设置的margin:auto就生效了。div的width为100,div0的width为600,故将margin-left及margin-right均设置为250px,同理margin-top和margin-bottom自然也就被设置为50px。这时候的div1也就自然是水平垂直居中的了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
#div0{
width: 600px;
height: 200px;
position: relative;
margin:0 auto;
border:2px #9acfea solid;
}
#div1{
width: 100px;
height: 100px;
background: #2aabd2;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">div1</div>
hello word
</div>
</body>
</html>
当修改div的左偏移和上偏移均为10px时,效果如下。但是要注意带单位不然,偏移为10时,就是按其他的标准来的。
第三种:让元素相对于父元素定位,left左right右各偏移50%,在同时定位margin-left为宽度的一半,距离父元素顶端为自身高度的一半margin-top为自身高度的一半,且两者都为负。即左移和上移。
总之,脱离文档流的两种方式,浮动和定位!