1.盒子常见属性
1）容器盒子
Box-size:设置盒子模型，CSS3标准，
content-box:正常默认模式，起源于谷歌，元素的整体大小会被内边距和边框撑开
border-box：怪异模式，起源于IE，元素的整体大小不会被内边距和边框撑开
Width:宽度
Height:高度
注意：width,height会根据box-size盒子模型的不同来决定是内容的宽度和高度，还是整个元素大小的宽度和高度。
2）Padding:内边距
Padding-left,padding-right,padding-top,padding-bottom
Padding:上 右 下 左;
Padding:上 右 下；左边距等于右边距
Padding:上 右；下跟上边一样，左跟右一样
3）Margin:外边距
外边距跟内边距一致。但是两个元素的外边距会重叠。
4）Border:边框
语法：border: 边框宽度 边框样式 颜色;
可以分开设置，例如
|
border-width: 30px; border-style: dashed; border-color: purple; |
分别设置上下左右边框，例如
|
border-bottom:50px dotted green; |
5）Box-shadow:盒子阴影
|
box-shadow: 阴影的水平偏移值 阴影的垂直偏移值 阴影的模糊度 阴影的颜色; |
6）Display:设置盒子是块级元素还是行级元素还是弹性元素
Block:块级元素，会占据一整行，有宽高，div,h1,p,li,ul...
Line-block:行块元素，不会占据一整行，有宽高,img...
Line:行元素，不会占据一整行，也没有宽高,a,span...
7）Border-radius:边框的圆角
8）Background:设置元素的背景，背景图片，背景颜色
Background:是一个综合性的属性，可以分出背景颜色，背景图片，背景是否重复，背景图片的位置，背景图片的大小
Background-position:设置背景图片的位置，left,right,top,bottom,center,百分比一般可以设置2值，第一个值是设置水平位置，第二个值设置垂直位置
Background-size:设置背景图片的大小，注意：有时候不知道图片的确切比例的时候，只需要设置一个宽度或者高度，另外一个值设置为auto即可。
2.浮动
浮动元素会寻找父元素的边缘或者是同样浮动元素的边缘，紧紧的靠拢在一起。
1）优点
[1]可以让文字包围图片。
[2]可以去掉莫名其妙的间距
[3]可以让内容向左和向右排布
2)大问题
父元素高度塌陷
原因：使用了浮动的元素，会脱离正常的文档流，使其父元素找不到子元素，从而认为自己内部没有元素，所以没有高度。
3)解决方案：
[1]给父元素设置高度
[2]万能的解决方案
案例代码：
1 <!DOCTYPE html>
2
3 <html>
4
5 <head>
6
7 <meta charset="UTF-8">
8
9 <title></title>
10
11 <style type="text/css">
12
13 .parent{
14
15 width: 900px;
16
17 /*height: 600px;*/
18
19 border: 1px solid #000;
20
21 margin: 20px auto;
22
23 }
24
25
26
27 .child{
28
29 width: 200px;
30
31 height: 200px;
32
33 background: skyblue;
34
35 display: inline-block;
36
37
38
39 }
40
41
42
43
44
45 .left{
46
47 float: left;
48
49 }
50
51
52
53 .right{
54
55 float: right;
56
57 }
58
59
60
61 /*
62
63 解决方案：清除浮动
64
65 1、在父元素的最后面加上一个div
66
67 2、设置这个div的样式为:clear:both;
68
69
70
71 缺点：多了1个div,结构比较混乱
72
73 * */
74
75
76
77 /*
78
79 完美升级方案：
80
81 1、使用伪元素创建一个假的元素，：after在元素的最后面创建一个假的子元素
82
83 2、设置这个假的元素为块级元素
84
85 3、清除左右浮动clear:both
86
87 * */
88
89
90
91 .clear:after{
92
93 content: "";
94
95 display: block;
96
97 clear: both;
98
99 }
100
101 </style>
102
103 </head>
104
105 <body>
106
107 <div class="parent">
108
109 <!--只有class才可以同时放置多个class，中间用空格隔开-->
110
111 <div class="child left"></div>
112
113 <div class="child right"></div>
114
115 <div class="child right"></div>
116
117
118
119 <div style="clear: both;"></div>
120
121 </div>
122
123
124
125
126
127 <div class="parent clear">
128
129 <!--只有class才可以同时放置多个class，中间用空格隔开-->
130
131 <div class="child left"></div>
132
133 <div class="child right"></div>
134
135 <div class="child right"></div>
136
137
138
139
140
141 </div>
142
143 </body>
144
145 </html>
弹性布局--->当下最佳布局方式。
3.定位(Position)
1)相对定位relative
语法：postion:relative;
特点：相对于自身进行位移，只是样子进行了移动，其实还是会牢牢占据原来的位置，不会影响到整个布局的变化
2)绝对定位absolute
语法：postion:absolute
特点：脱离正常的文档流，不会占据原来的位置。相对于设置了定位的父元素或者是祖先元素。
3)固定定位fixed
语法：position:fixed
特点：脱离正常的文档流，不会占据原来的位置。相对于浏览器进行定位
4)层：z-index
语法：Z-index：数字；
解析：z-index可以设置统一级别下，使用了定位的层级关系。z-index值越大，层越在上面。默认情况下，所有元素的z-index值为0。没有使用定位的元素，不可用。
原文地址：https://www.cnblogs.com/qq2267711589/p/10923380.html