前端-----浮动做一个简单的导航栏和通俗理解一下margin 和padding区别

一：浮动

(1)浮动的概念：浮动起来变成行内块元素，并且不占位，父级高度为0（浮动塌陷）
其解决方法是：
1丶给父级一个overflow：hiiden（overflow：hiiden：要有宽度或者高度才会溢出部分隐藏，如果外部盒子没有宽度或者高度，里面又是浮动元素，就会被撑开。）
2、让父级元素也浮动起来(不建议直接使用，会造成二次塌陷)
3、直接给父级元素一个高度(不建议使用)
注：当float li 的时候，li不能横着排的时候，一般都是ul宽不够，只需要给ul一个宽 像素大一点的宽就可以了我一般是直接给1200px
(2)浮动导航栏小案例
先附上代码，具体操作看注释
思路：使用浮动是li浮动起来，也就是说让li它横着排(一开始是竖着排的)，然后再用margin 进行调距离 调到自己想要的距离就可以了

样式：

<style>
    		.top{
    			width:100%;
    		}
    		.top-con{
    			width:1200px;
    			height:60px;
    			border:1px solid #ccc;
    			margin:10px auto;/* 让top-con这个div距离上10px 左右居中*/
    		}
    		.top-con-nav li{
    			list-style:none;/* 去掉li前面的小黑点 */
				float:left;/* 让li左浮动起来，浮动起来就不占位置了，浮动只有左右浮动没有上下浮动的说法 */
				margin-left:48px; /* 设置一个外边距 使li撑开 这样就可以调整到自己合适的位置 */
    			
    		}
    </style>

HTML代码：

    <div class="top"> 
		<div class="top-con">
			<ul class="top-con-nav">
				<li>首页</li>
				<li>电视剧</li>
				<li>最新电影</li>
				<li>新闻头条</li>
				<li>八卦娱乐</li>
				<li>都市热点</li>
				<li>热门电影</li>
				<li>下游戏</li>
				<li>今日特价</li>
				<li>特价旅游</li>
			</ul>
			
		</div>
	</div>

运行之后的效果图的截图

二丶margin padding的介绍：（百度参考过来的）

（1）margin有4个值：margin:1px 2px 3px 4px; ，按顺序分别代表对象与父容器的上、右、下、左的距离值为1px,2px,3px,4px。（&&：注意不要把顺序认为是上下左右）
（2）只写两个值：margin:10px 5px; ，表示对象与父容器的上下距离值都是10px，与左右的距离值都是5px。
（3）margin:0 auto; 表示上下的距离值是0，而左右自动居中。

三丶margin和padding的区别：

（1）对我自己的理解就是：margin就是调整盒子与盒子（框与框之间距离）之间的距离，padding 就是就是盒子里边内容和盒子（边框）之间的距离。
（2）在这里margin就是调整li与li之间的距离。如果这里用到padding 那么既是调整 li与li里边的文字的距离