html：容器盒子，盒子阴影，背景图片，浮动，定位，分层
大家可以关注一下我的博客 我的博客所有随笔都是我从基础开始学习java的所有知识点
容器盒子
Box-size:设置盒子模型，CSS3标准，
content-box:正常默认模式，起源于谷歌，元素的整体大小会被内边距和边框撑开
border-box：怪异模式，起源于IE，元素的整体大小不会被内边距和边框撑开
Width:宽度
Height:高度
注意：width,height会根据box-size盒子模型的不同来决定是内容的宽度和高度，还是整个元素大小的宽度和高度。
Padding:内边距
Padding-left,padding-right,padding-top,padding-bottom
Padding:上 右 下 左;
Padding:上 右 下；左边距等于右边距
Padding:上 右；下跟上边一样，左跟右一样
Margin:外边距
外边距跟内边距一致。但是两个元素的外边距会重叠。
Border:边框
语法：border: 边框宽度 边框样式 颜色;
可以分开设置，例如
|
border-width: 30px; border-style: dashed; border-color: purple; |
分别设置上下左右边框，例如
|
border-bottom:50px dotted green; |
Box-shadow:盒子阴影
|
box-shadow: 阴影的水平偏移值 阴影的垂直偏移值 阴影的模糊度 阴影的颜色; |
Display:设置盒子是块级元素还是行级元素还是弹性元素
Block:块级元素，会占据一整行，有宽高，div,h1,p,li,ul...
Line-block:行块元素，不会占据一整行，有宽高,img...
Line:行元素，不会占据一整行，也没有宽高,a,span...
Border-radius:边框的圆角
Background:设置元素的背景，背景图片，背景颜色
Background:是一个综合性的属性，可以分出背景颜色，背景图片，背景是否重复，背景图片的位置，背景图片的大小
Background-position:设置背景图片的位置，left,right,top,bottom,center,百分比一般可以设置2值，第一个值是设置水平位置，第二个值设置垂直位置
Background-size:设置背景图片的大小，注意：有时候不知道图片的确切比例的时候，只需要设置一个宽度或者高度，另外一个值设置为auto即可。
background-image: url();插入背景图片
background-repeat: no-repeat;背景图片不可重复
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{/*Block:块级元素，会占据一整行，有宽高，div,h1,p,li,ul...*/ width: 1500px; height: 1500px; background: blue; } #d1{ box-sizing: content-box;/*此为默认容器盒子类型，可省略不写*/ width: 500px;/*宽度*/ height: 300px;/*高度*/ background: palegoldenrod;/*容器盒子底层颜色*/ padding: 30px;/*内边距：Padding-left,padding-right,padding-top,padding-bottom*/ border: 20px solid black;/*边框：语法：border: 边框宽度 边框样式 颜色;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;*/ margin: 100px;/*外边距：外边距跟内边距一致。但是两个元素的外边距会重叠。*/ } #d2{ /*盒子模型*/ box-sizing: border-box; width: 1000px; height: 600px; background: palegreen; padding: 30px 20px 10px 5px;/*顺时针方法 上-左-下 -右*/ border: 20px solid blue; /*边框大小 ，颜色*/ border-width: 30px; border-style: dashed;/*边框类型*/ border-color: purple;/*边框颜色*/ border-bottom:50px dotted green; /*下边框大小，类型，颜色*/ } #d3{/*用边框画三角形*/ /*设置盒子阴影*/ width: 0; height: 0; border-bottom: 1000px solid rgba(0,0,0,0); border-top: 1000px solid transparent; border-left: 1000px solid transparent; border-right: 1000px solid green; transition: all 1s;/*设置抬起来时间*/ } /*盒子阴影（hover：抬起来才有阴影）*/ #d3:hover{/*阴影的水平偏移值 阴影的垂直偏移值 阴影的模糊度 阴影的颜色;*/ box-shadow: 0 100px 150px red; } #d4{/*画圆型*/ width: 200px; height: 200px; background: red; border-radius: 400px;/*边框的圆角*/ } </style> </head> <body> <div id="d1">helloworld</div> <div id="d2">helloworld</div> <div id="d3"></div> <div id="d4"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #d1 { margin: 0 auto; width: 2500px; height: 2400px; background: gold; /*设置背景图片，可以放置多张背景图片，中间用逗号隔开，越写在前面，层级越高。*/ background-image: url(img/联图二维码.png),url(img/u=2129560155,3163871690&fm=26&gp=0.jpg); /*背景图片不重复*/ background-repeat: no-repeat; /*设置背景图片的位置，left,right,top,bottom,center,百分比一般可以设置2值，第一个值是设置水平位置，第二个值设置垂直位置*/ background-position: 10% 10%,right center; /*设置背景图片的大小，注意：有时候不知道图片的确切比例的时候，只需要设置一个宽度或者高度，另外一个值设置为auto即可。*/ background-size: 1000px auto,500px 400px; border: 1px solid #000000; } </style> </head> <body> <div id="d1">1</div> </body> </html>
浮动
浮动元素会寻找父元素的边缘或者是同样浮动元素的边缘，紧紧的靠拢在一起。
优点
1、可以让文字包围图片。
2、可以去掉莫名其妙的间距
3、可以让内容向左和向右排布
大问题
父元素高度塌陷
原因：使用了浮动的元素，会脱离正常的文档流，使其父元素找不到子元素，从而认为自己内部没有元素，所以没有高度。
解决方案：
1、给父元素设置高度
2、万能的解决方案
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .d1{ width: 200px; height: 200px; background: skyblue; /*行块元素，不会占据一整行，有宽高,img...*/ display: inline-block; /*浮动：内容向左，去掉莫名其妙的间距*/ float: left; } .d2{ width: 200px; height: 200px; background: skyblue; /*行块元素，不会占据一整行，有宽高,img...*/ display: inline-block; /*浮动：内容向左，去掉莫名其妙的间距*/ float:right; } /* 解决方案：清除浮动 1、在父元素的最后面加上一个div 2、设置这个div的样式为:clear:both; <div style="clear: both;"></div> 缺点：多了1个div,结构比较混乱 * */ /* 完美升级方案： 1、使用伪元素创建一个假的元素，：after在元素的最后面创建一个假的子元素 2、设置这个假的元素为块级元素 3、清除左右浮动clear:both * */ .clear:after{ content: ""; display: block; clear: both; } </style> </head> <body> <div class="d">1</div> <img src="img/u=2129560155,3163871690&fm=26&gp=0.jpg"/> 嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪嘛咪 <div class="d">2</div> <!--只有class才可以同时放置多个class，中间用空格隔开--> <div class="d d1">3</div> <div class="d d2">4</div> </body> </html>
定位Position
相对定位relative
语法：postion:relative;
特点：相对于自身进行位移，只是样子进行了移动，其实还是会牢牢占据原来的位置，不会影响到整个布局的变化
绝对定位absolute
语法：postion:absolute
特点：脱离正常的文档流，不会占据原来的位置。相对于设置了定位的父元素或者是祖先元素。
固定定位fixed
语法：position:fixed
特点：脱离正常的文档流，不会占据原来的位置。相对于浏览器进行定位
层：z-index
语法：Z-index：数字；
解析：z-index可以设置统一级别下，使用了定位的层级关系。z-index值越大，层越在上面。默认情况下，所有元素的z-index值为0。没有使用定位的元素，不可用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; margin: 20px; background: skyblue; } .d1{ /*z-index可以设置统一级别下，使用了定位的层级关系。z-index值越大，层越在上面。默认情况下，所有元素的z-index值为0。没有使用定位的元素，不可用。*/ z-index: 1; } .d2{/*设置相对定位:特点：相对于自身进行位移，只是样子进行了移动，其实还是会牢牢占据原来的位置，不会影响到整个布局的变化*/ position: relative; /*配合left,top,bottom,right*/ /*left:100px;*/ left: 100px;/*在原本的位置基础上向右移了100px*/ /*z-index可以设置统一级别下，使用了定位的层级关系。z-index值越大，层越在上面。默认情况下，所有元素的z-index值为0。没有使用定位的元素，不可用。*/ z-index: 1; } .d3{/*设置绝对定位:脱离正常的文档流，不会占据原来的位置。相对于设置了定位的父元素或者是祖先元素。*/ position: absolute; /*配合left,top,bottom,right*/ top: 100px; left: 100px;/*完全不遵守原有基础，以整个父元素（有定位才能做父元素）基础定位（先找body，再找html）*/ background:black; } .i{ width: 300px; height: 400px; background: yellow; /*设置固定定位：特点：脱离正常的文档流，不会占据原来的位置。相对于浏览器进行定位*/ position: fixed; right:100px; top: 100px; text-align: center; } .i img{ width: 200px; height: 200px; } </style> </head> <body> <div class="d"> <h1>正常页面</h1> <div class="d1">1</div> <div class="d2">2</div> <div class="d3">3</div> </div> <div class="i"> <img src="img/u=2129560155,3163871690&fm=26&gp=0.jpg"/> <hr /> <a href="http://www.baidu.com"">百度一下</a> </div> </body> </html>
