web前端学习（三）css学习笔记部分（2）-- css定位+盒子操作
3.CSS定位
3.1定位
1.CSS定位：
改变元素在页面上的位置
2.CSS定位机制
普通流：元素按照其在HTML中的位置顺序决定排布的过程
浮动
绝对布局
| 属性 | 描述 |
| position | 把元素放在一个静态的、相对的、绝对的或固定的位置中 |
| top | 元素向上的偏移量（从上往下加数） |
| left | 元素向左的偏移量（从左往右加数） |
| right | 元素向右的偏移量（从右往左加数） |
| bottom | 元素向下的偏移量（从下往上加数） |
| overflow | 设置元素溢出其区域发生的事情 |
| clip | 设置元素显示的形状 |
| vertical-align | 设置元素垂直对齐方式 |
| z-index | 设置元素的堆叠顺序 |
3.CSS定位属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>outline</title> <style> #position1{ width:100px; height:100px; background-color: blue; /*position:relative;*/ /*相对位置和绝对位置都是只更改自己相对于本来应该在的位置， 只对自己的子元素起作用，不会对同级元素产生影响。*/ position:absolute; /*absolute定位相当于把自己从页面中抠出来， 其他的同级元素按只有他们自己的方式排列*/ /*position: fixed;*/ /*fixed布局是指该元素相对于当前页面位置不懂，下拉都不会动的那种*/ /*position:static;*/ /*设置静态的时候偏移量是对该元素不起作用的。*/ left:10px; top:10px; } #position2{ width:100px; height:100px; background-color: aqua; position:absolute; left:20px; top:20px; z-index: 2; } #position3{ width:100px; height:100px; background-color: red; position:absolute; left:30px; top:30px; z-index: 1; /*z-index只对写这句话的元素起作用，1就是最先放置的，越大越往后放置， 一般不写的情况下就是按顺序摆放*/ } </style> </head> <body> <div id="position1"></div> <div id="position2"></div> <div id="position3"></div> <script> for(var i=0; i<50; i++){ document.write(i+"<br/>"); /*这个script在哪写的他就在哪生成文件；*/ } </script> </body> </html>
3.2浮动
3.2.1 浮动
float属性可用的值：
left：元素向左浮动
right
none：元素不浮动
inherit：从父级继承浮动属性
3.2.2 clear属性
去掉浮动属性（包括继承来的属性）
clear属性值：
left、right：去掉元素向左、向右浮动
both：左右两侧均去掉浮动
inherit：从父级元素继承来clear的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> #div1,#div2,#div3{ height:50px; width:50px; float:left; } #div1{ background-color: aqua; float:left; } #div2{ background-color: fuchsia; float:left; } #div25{ height:80px; width:80px; background-color: sienna; float:right; } #div3{ background-color: purple; clear:right; } #div4{ background-color: deeppink; clear:both; } #div5{ height:150px; width:150px; background-color: sienna; } /*清除浮动的意思就是在与他水平的位置那一侧不能有浮动元素， 要相应下移使之位置错开。*/ </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div5">div5</div> <!--不浮动的元素放在浮动的元素后面之后会按照原来的位置排列--> <div id="div25">div2.5向右浮动</div> <div id="div3">div3</div> <div id="div4">div4</div> <!--每一个如果都是向左浮动的话那么他们都在同一行排列--> </body> </html>
浮动例子2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <style> #div1,#div2,#div3{ float:left; } #div1{ width:30px; height:50px; background-color: aqua; } #div2{ width:30px; height:20px; background-color: fuchsia; } #div3{ width:30px; height:60px; background-color: red; } #container{ width:80px; height:300px; background-color: darkgrey; } #text{ /*clear: both;*/ clear:right; } </style> </head> <body> <div id="container"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="text">hi lin</div> <!--第四个文本容器也继承了浮动的属性，如果想要去除这个特点就在text的id--> <!--中添加一句clear:both(两侧不能有浮动的功能);--> </div> <!--浮动只要有位置就会放下，超过容器宽度就会换一行，但是换行又不是 平常所说的换行，是找位置--> </body> </html>
3.3浮动的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /**{*/ /*margin:0px;*/ /*padding:0px;*/ /*}*/ ul{ float:left; } li{ float:left; list-style: none; /*liststyle在li中写，不是在ul中写*/ } /*ul中float:left就是实现瀑布流， 在li中写float:left就是实现列表横向排列*/ </style> </head> <body> <div> <ul> <li>ul1.1</li> <li>ul1.2</li> <li>ul1.3</li> </ul> <ul> <li>ul2.1</li> <li>ul2.2</li> <li>ul2.3</li> </ul> <ul> <li>ul3.1</li> <li>ul3.2</li> <li>ul3.3</li> </ul> </div> </body> </html>
4. CSS盒子模型
4.1概述
4.2内边距
4.3边框
1.CSS边框可以应用于任何元素
2.边框的样式
border-style：定义了十个不同的非继承样式，包括none
3.边框的单边样式：
border-top-style
border-left-style
border-right-style
border-bottom-style
4.设置单边的宽度
border-top-width
border-left-width
5.CSS3边框
border-radius：圆角边框（半径）
box-shadow：边框阴影
（边框阴影和文字阴影差不多
编写方式都是box-shadow:10px 10px 5px #FFCCFF;）
(向右，向下，阴影透明度，阴影颜色)
border-image：边框图片
4.4外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <style> #test{ height:30px; width:30px; margin:10px 20px 30px; background-color: fuchsia; } /* margin标记可以带一个、二个、三个、四个参数，各有不同的含义。 margin: 20px;（上、下、左、右各20px。） margin: 20px 40px;（上、下20px；左、右40px。） margin: 20px 40px 60px;（上20px；左、右40px；下60px。） margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。） */ </style> </head> <body bgcolor="gray"> <div id="test"></div> </body> </html>
4.5外边距合并
4.1 外边距合并：
外边距合并就是一个叠加的概念（上面盒子的下外边距和下面盒子的上外边距合并之后只剩一个边距了）
这个外边距合并是自动就形成了，哪个大就是按哪个算的。
4.6盒子模型应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型应用</title> <style> *{ margin:0px; padding:0px; } .top{ width:100%; height:50px; background-color: black; } .top_content{ width:75%; height:50px; /*让盒子处于某一个div上下中间的话需要直接设置好 高度和padding、margin等内容，auto好像不管用*/ margin:auto auto; background-color: blue; } .body{ margin:20px auto; width:75%; height:1500px; background-color: blanchedalmond; } .body_img{ width:100%; height:400px; background-color: darkred; } .body_content{ width:100%; height:1100px; background-color: deeppink; } .body_no{ width:100%; height:50px; background-color: brown; } .footing{ width:75%; height:50px; background-color: indigo; margin:0px auto; } .footing_content{ width:100%; height:330px; background-color: darkseagreen; } .footing_subnav{ width:100%; height:70px; background-color: black; } </style> </head> <body> <div class="top"> <div class="top_content"></div> </div> <div class="body"> <div class="body_img"></div> <div class="body_content"> <div class="body_no"></div> </div> </div> <div class="footing"> <div class="footing_content"></div> <div class="footing_subnav"></div> </div> </body> </html>
