CSS-Day-4 文字溢出，背景图片处理，导航栏，淘宝页图片超链接

Day-4

注：

1. 行级元素只能嵌套行级元素

2. 块级元素可以嵌套任何元素，有个例。

3. <p></p>标签内不可以嵌套块级元素，一旦嵌套会被截断x形成以下样式

   <p>
           </p>
           <div></div>
       <p>
          </p>
   

4. 凡是带有inline的，就都带有文本类元素的特点。就像多张图片并列会有空格，只要删除<img>之间的空格就可以解决了,因为图片为inline-block元素,空格和回车都相当于加上了一个文本分隔符。

5. 若在行级块元素中带有文字（eg：span），那么外面的文字就会与文字底对齐，而不会与行级块元素底对齐。

文字溢出处理

1.单行文本

p{
    width: 300px;
    height: 20px;
    line-height:20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   
}

超出容器的文本以“…”形式展现

2.多行文本

多行只做截断，不做打点。

   overflow: hidden;

背景图片处理

    background-image: url();
    background-size: 200px 200px;
    background-repeat:no-repeat ;
    background-position: center center;
    background-attachment:背景图是否跟随网页滚动;
    

代码作用，见css属性。

CSS属性

• background-attachment:

背景图是否跟随网页滚动;

scroll：背景图片附着在背景容器上，它是相对于背景容器（元素）固定，它会随着背景容器的滚动，而不是随着它的内容滚动（也可以看成是对元素边框固定）。

fixed： 背景图片附着在浏览器的可视区域。因为浏览器的可视区域不具备滚动的性格，所以它是不滚动的。

local：CSS3新增的属性值。背景图片附着在背景容器的内容区域。会随着内容的滚动而滚

• white-space: nowrap;

当文本超出容器大小不进行换行

• text-overflow: ellipsis;

溢出部分用“…”来展示

• background-image: url();

背景图片设置

• background-size: 200px 200px;

背景图的大小设置

• background-repeat:no-repeat ;

当背景图无法铺满容器时的显示方式，

no-repeat: 不重复

repeat: 重复放置

repeat-x: x轴重复放置

repeat-y: y轴重复放置

• background-position: center center;
  背景图在容器中的位置，单位可px，%，center，left…

	*背景图片的位置
	默认背景图的初始位置从元素的左上角开始
					
	写法1: 直接写px数值;
	x方向: 正值向右, 负值向左
	y方向: 正值向下, 负值向上
					
	写法2: 使用方位单词
	x方向: left center right
	y方向: top center bottom
					
	写法3: 使用百分比
	x方向的百分比:
	(容器的宽-背景图的宽) * 百分比x值
	y方向的百分比:
	(容器的高-背景图的高) * 百分比y值
					
	小图: 200*200  容器: 700*700  bgp:50% 50%
	x: (700-200)*50% = 250px;
	y: (700-200)*50% = 250px;
	bgp: 250px 250px
					
					
	大图: 2880*1800 容器: 700*700 bgp:50% 50%
	x: (700-2880)*50% = -1090px;
	y: (700-1800)*50% = -550px;
				

• vertical-align:2px;

调整文本对齐线

两边留白的导航栏框架

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

*{
    margin: 0;/*同时去除了body的8px */
    padding: 0;
 }

 .wrapper{
     height: 30px;
     background-color: #112233;
 }

 .content{
     margin: 0 auto;
     width: 1200px;
     height: 30px;
     background-color: #00ff00;
 }

淘宝页图片超链接

1.  <a href="http://www.taobao.com" target="_blank">淘宝网</a>
   
   

   a{
       display:inline-block;
       text-decoration:none;
       color:#424242;
       width: 190px;
       height: 90px;
       border: 1px solid black;
       background-image: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png);
       background-size: 190px 90px;
       text-indent: 200px;
       white-space: nowrap;
       overflow: hidden;
   }