html5图片浮动float,float浮动的一些基础常识

1

2

3

4

5

6

7

8

document

9

10 *{margin: 0;padding: 0;}

11 /* 先给定义的box一个高度和宽度 */

12 .box{width: 1200px;height: 50px;outline:1px red solid;margin:30px auto;}

13 /* 去除ul无序列表的全局样式 */

14 ul{list-style:none;}

15 /* 再给li的父级一个宽高 */

16 .box>ul{height: 100%;width: 100%;}

17 /* 再给li一个宽高 宽是父级除以他的子级的出来的*/

18 .box>ul>li{height:100%;width: 150px;outline: 1px solid pink;

19 /* 这是左浮动，要想右浮动就直接把left改变成right; */

20 float: left;

21 /* 这里让li里面的内容在他的宽度里水平居中 */

22 text-align: center;

23 /* 这里是让li里面的内容在他的高度里面垂直居中 注：他的父级有多高那么就可以设置他的行高为多少 */

24 line-height: 50px;

25 }

26

27

28

29

30

31

32

33

34

你好！明天

35

你好！明天

36

你好！明天

37

你好！明天

38

你好！明天

39

你好！明天

40

你好！明天

41

你好！明天

42

43

44

45

46

47