图片 12

CSS常用样式(二)

Posted by

深刻理解 background-position 中的百分比

2015/11/02 · CSS

本文由 伯乐在线 –
risker
翻译。未经许可,禁止转载!
英文出处:vjeux。欢迎加入翻译组。

通过这篇文章我要教大家解决一个曾经很困扰我的麻烦问题。我们要使用百分比的
background-position值来解决一些问题。

一、边框样式

通常使用方法

  1. 摆放图片
    通常在容器里摆放图片是给出具体图片的topleft相对容器的topleft的值。
    图片 1
  2. 在CSS中很容易做到。
JavaScript

* 在容器里使用`<img>`标签 .container{

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010c3463746966-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d12010c3463746966-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f6d12010c3463746966-3">
3
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010c3463746966-1" class="crayon-line">
    *   在容器里使用`&amp;amp;amp;lt;img&amp;amp;amp;gt;`标签
</div>
<div id="crayon-5b8f6d12010c3463746966-2" class="crayon-line crayon-striped-line">
.container{
</div>
<div id="crayon-5b8f6d12010c3463746966-3" class="crayon-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>


`</pre> position:relative; } .container img{ position:absolute; top:12px; left:20px; }`  


JavaScript

* 或者可以使用`background-position`&lt;pre&gt;`.container{

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010cc478883379-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f6d12010cc478883379-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010cc478883379-1" class="crayon-line">
*   或者可以使用`background-position`&amp;lt;pre&amp;gt;`.container{
</div>
<div id="crayon-5b8f6d12010cc478883379-2" class="crayon-line crayon-striped-line">
 
</div>
</div></td>
</tr>
</tbody>
</table>


background-position:12px 20px; }`
  1. 在容器里移动现在你想让图片在容器里面移动而且还不能超出容器边界。你肯定是要简单算一算图片topleft的最大值。图片 2然后得到left值的范围是
    0 到 container_width - image_width,同样也可以得到top值的范围。
  2. 图片比容器大到目前为止,我们讨论的问题都很简单。现在,我们要看看图片比容器大的情况。容器必须要被图片填满。图片 3同样我们可以算出left值的范围是
    0 ~
    container_width - image_width,只不过这次container_width - image_width
    是负值。你可以搞明白正值和负值的关系,也可以凭直觉搞定。当你看到12px 20px你很容易知道图片是怎么放置的。但是,你看到-12px -20px就比较难想明白了。
  3. 不变量好了,现在你已经写好了位置点并且没有任何问题。现在,因为某些原因,我们不用长方形容器了,用正方形容器。那么之前的那些位置值就不那么合适了。我们之前计算的值不再有效,因为现在情况变了。你想要改变图片和容器大小也是一样的道理。图片 4可以从图中看到,如果使用固定的值,那么一旦改变某些条件,那么就可能会让已经写好的布局乱掉。

    背景图片的百分比方法

  4. 定义我们要换一个确定图片位置的方法了。当图片的左边框和容器的左边框挨着时,left0%。当图片右边框和容器的右边框挨着时,left100%。这两个例子分别就是
    0% 和 100%
    的情况:图片 5我们很容易得到两者之间的值

JavaScript

`left = (container_width - image_width) * percentage

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010d1355851788-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010d1355851788-1" class="crayon-line">
`left = (container_width - image_width) * percentage
</div>
</div></td>
</tr>
</tbody>
</table>


 
  1. 范围检测这个方法最方便的就是我们不用再算图片相对容器的范围。它就是 0
    ~ 100 。
  2. 不变量我们画两个轴,一个对于容器,一个对于图片。如果我们设置值为60%,则两个轴的60%会重合在一个点上。图片 6就像上面的图片一样,这个新的方法在不同比例大小情况下也工作得很好。
  3. 水平和垂直如果你细心的话你会注意到图片和容器一样大的话,两个轴会完全重合。设置
    30% 还是 80%
    都不重要。图片 7再看看数学公式
JavaScript

`left = (container&lt;em&gt;width - image_width) &lt;/em&gt;
percentage = 0 _ percentage = 0

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f6d12010d5992620587-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f6d12010d5992620587-1" class="crayon-line">
`left = (container&lt;em&gt;width - image_width) &lt;/em&gt; percentage = 0 _ percentage = 0
</div>
</div></td>
</tr>
</tbody>
</table>

你只需要设置两个值lefttop就行了。

1、border:复合属性。设置对象边框的特性。

总结

一开始,我没有明白百分比值是怎么对background-position作用的。我真的有点迷惑,因为使用百分比让我不能直观地感受到变化。然而,后来我发现使用百分比解决图片定位是极其方便的。

我的博客,欢迎订阅

微博粉丝太少,求粉

1 赞 3 收藏
评论

  取值:

关于作者:risker

图片 8

2014年大学毕业,现在在北京某互联网公司从事前端开发的工作,近半年主要做移动web开发。微博粉丝太少,求粉。

个人主页 ·
我的文章 ·
7 ·
  

图片 9

  border-width: 设置或检索对象边框宽度。

  border-style: 设置或检索对象边框样式。

  border-color: 设置或检索对象边框颜色。

#border4
 {
      width: 100px;
      height: 100px;
      border:1px solid #FF0000;
 }

<div id="border4"></div>

 

 

2、border-width:设置对象的边框宽度。  

  取值:

  meadium:  定义默认厚度的边框

    thin:  定义比默认厚度细的边框。

  thick:  定义比默认厚度粗的边框。

 ★ 如果提供全部四个参数值,将按上、右、下、左的顺序作用于四边。

   
 如果只提供一个,将用于全部的四边。

   
 如果提供两个,第一个用于上、下,第二个用于左、右。

   
 如果提供三个,第一个用于上,第二个用于左、右,第三个用于下。

  也可以分别对四边设置边框:

    border-top-width
设置上边框宽度

    border-bottom-width
设置下边框宽度

    border-left-width
设置左边框宽度

    border-right-width
设置右边框宽度

<style>            
    #border1{
    width:200px;
    height:100px;
    border:solid;
    /*border-width: 5px;*/
    border-width:2px 3px 4px 5px ;                
            }
</style>

<div id="border1"></div>

 

 

3、border-color:设置或检索对象的边框颜色

  取值:

  (1)英文单词的颜色,如“blue”、“red”

  (2)十六进制值,如“#ffffff”、“#ff0000”

  (3)rgba、rgb,如rgba(0,0,0,.5)、rgb(255,255,255)

<style>            
    #border2
      {
         width: 200px;
         height: 100px;
         border: solid;            
         border-color: #FF0000;                
    }
</style>

<body>
        <div id="border2"></div>        
</body>    

 

 

4、border-style:设置对象的边框样式

     
 取值:

  none:无轮廓。border-color与border-width将被忽略

     
 hidden:隐藏边框。IE7及以下尚不支持

     
 dotted:点状轮廓。IE6下显示为dashed效果

     
 dashed:虚线轮廓。

     
 solid:  实线轮廓。

     
 double:双线轮廓。两条单线与其间隔的和等于指定的border-width值

  可以对四边分别设置其边框样式:

#border3
  {
   width: 200px;
   height: 100px;
   border: solid;
   border-top-style:dotted ;
   border-left-style:dashed ;    
   border-right-style: double;
   border-bottom-style: solid;    
  }

<div id="border3"></div>

 

 

5、border-radius:设置对象使用圆角边框

  • 水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
  • 如果只提供一个,将用于全部的于四个角。
  • 如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
  • 如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
     

   取值

      length:用长度值设置对象的圆角半径长度。不允许负值

 
 percentage:用百分比设置对象的圆角半径长度。不允许负值 

  

CSS代码
#yj{
                background-color:indianred ;
                width: 100px;
                height: 100px;
                border-radius: 10px 10px 20px 20px;

            }
HTML代码:
<div id="yj"> </div>

 

 二、段落样式

1、行高:

  控制段落内每行高度

  line-height:nornmal|length

  CSS代码:

#duan1
 {
      border: 1px solid black;
      width: 500px;
      height:30px ;
      line-height: 30px;
  }

  HTML代码:

<body>        
        <p id="duan1">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>
</body>

CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。

 

 2、段落缩进:

  控制段落的首行缩进

  text-indent:length

  CSS代码:

      #duan2
        {
            width: 200px;
            text-indent: 2em;/*1em为16px。这里缩进2个字符*/
        }

 HTML代码:

 <p id="duan2">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

 

图片 10

3、段落对齐:

  控制段落对齐方式,不但是文本,对象中的其它inline或inline-block元素也能够被text-
align进行对齐方式的设置。

  取值:

     text-align:left      左对齐

       right      右对齐

       center   居中对齐

       justify   两端对齐

   CSS代码:

              #duan3
        {
            background-color: aquamarine;
            width: 150px;
            text-align: right;
        }

   HTML代码: 

<p id="duan3">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

   效果:

  图片 11

4、文字间距:

  控制段落的文字间的距离

  letter-spacing : normal | length 

  CSS代码:

             #duan4
        {        
            width: 150px;
            letter-spacing: 5px;
        }

  HTML代码:

        <p id="duan4">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

  效果:

  图片 12

5、文字溢出:

  控制文字内容溢出部分的样式

  text-overflow:clip    将溢出部分裁切掉   

           ellipsis  将溢出部分替换为(…)

  注: 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。

  CSS代码:

        #duan5
        {
            width: 50px;
            height: 30px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }            

  HTML代码:

  <p id="duan5">CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。</p>

  效果:

相关文章

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注