CSS 笔记 导航栏 浮动模型 文字溢出 图片字体链接兼容

“解决”margin塌陷

   如何触发一个盒子的BFC
	position:absolute
	display:inline-block
	float:left/right
	overflow:hidden; 溢出部分隐藏（改变父级的渲染规则）

浮动模型
float:left/right
所有产生了浮动流的元素，块级元素看不见他们，
产生了BFC的元素和文本类属性的元素以及文本都能看见浮动元素

claer:both;
清楚左右两边的浮动流，解决父级包住浮动流的问题

导航栏

HTML
<ul class="nav">
		<li class="item"><a href="#">天猫</a></li>
		<li class="item"><a href="#">聚划算</a></li>
		<li class="item"><a href="#">天猫超市</a></li>
</ul>

CSS文件
*{
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}

.nav{
    list-style: none;
}

.nav .item{
    float: left;
    margin: 0 10px;
    line-height: 30px;
}

.nav .item a{
    text-decoration: none;
    color: #f40;
    font-weight: bold;
    height: 30px;
    display: inline-block;
    padding: 0 5px;
    border-radius: 15px;
} 

.nav .item a:hover{
    background-color: #f40;
    color: #fff;
}

.nav::after{  /* 删除浮动 避免字体在导航栏后面展示*/
    content: "";
    display: block;
    clear: both;
}

文字溢出

       <p>的撒好看的痕迹萨达斯柯达季
		后赛U盾那数据库的哈阿萨德静安
		寺来得及阿斯拉斯加大
		粮食局dassa</p>
CSS
p{
    width: 300px;
    height: 20px;
    line-height: 20px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; //三件套 解决单行文本
    //多行打点 自己写点
}

解决CSS无法加载时，图片下字体显示

HTML
<a href="https://www.taobao.com" target="_bank">淘宝网</a>
CSS
a{
    display: inline-block;
    width: 150px;
    height: 150px;
    background-image: url(//img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
    background-size: 150px 150px;
    background-repeat: no-repeat;
    
    /* 方法一 */
    /* text-indent: 150px;/* 首行缩进 宽度*/
    /*white-space: nowrap;/* 单行显示 */
    /*overflow: hidden;/* 溢出隐藏 */
    
    /* 方法二 */
    height: 0px;
    padding-top: 90px;
    overflow: hidden;
}

行级元素只能套行级元素
块级元素可以套任何元素

特殊
p里面不能套div
a里面不可以套a元素

用margin实现中间不变 浏览器大小改变时，只遮住两遍的
即是网页两边的空白
注意 必须父子级都是快级元素

	<div class="wrapper">
		<div class="content"></div>
	</div>

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

.wrapper{
    height: 30px;
    background-color: rgb(32, 30, 30);
}

.content{
    margin: 0px auto;
    width: 800px;
    height: 30px;
    background-color: cornsilk;
}

position:absolute
float:left/right
只要设置了这两个 就会自动变为display:inline-block
如果一个块级元素里面包含文字，就会和这个字底对齐。
调对齐线vertical-align: 10px;