css积累中。。。

1、div或者p中文字居中效果。

    第一种方法:在div中使用 height和line-height来约束。

.alert-ban{
  top: 50%;
  width: 120px;
  height: 35px;
  line-height: 35px;
  position: fixed;
  background: #545252;
  border-radius: 5px;
  margin-top: 40%;
  margin-left: 35%;
  text-align: center;
  }

    overflow:hidden是为了防止div中的文字过多超出div。

    如图:

        css积累中。。。

    第二种方法:

    如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定        Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把                 <div> 完全填充的一种方式而已。可以使用类似下面的代码: 

    

div {   
  padding:25px;   
}

    这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸     缩的。

2、css hack

        

    参考博客:http://blog.csdn.net/freshlover/article/details/12132801


3、overflow属性

基本语法
overflow-x : visible | auto | hidden | scroll 
语法取值
visible  :默认值。不剪切内容也不添加滚动条。假如显式声明此默认值,
             对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 
auto     : 在必需时对象内容才会被裁切或显示横向滚动条 
hidden   :?不显示超过对象尺寸的内容 
scroll   : 总是显示横向滚动条 

使用说明
检索或设置当对象的内容超过其指定宽度时如何管理内容。所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说,假如 table-layout 属性设置为 fixed ,则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ,那么超出 td 尺寸的内容将被剪切。如果设为 visible ,将导致额外的文本溢出到右边或左边(视 direction 属性设置而定)的单元格。自IE5开始,此属性在MAC平台上可用。自IE6开始,当你使用 !DOCTYPE 声明指定了 standards-compliant 模式,此属性可以应用于 html 对象。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 overflowX 。

    场景:有时候我们在展示一个列表,每个列表中的描述可能长度不一,但是我们又要实现列表中的每个项高度一致。超出部分用省略号来代替。

    配合

text-overflow:ellipsis

    可以实现。(注:最好在文字前后加上<nobr>标签,你懂得)

css积累中。。。


4、html右侧页面空出一截

    css积累中。。。


解决办法:

html {
  width: 100%;
  overflow: hidden;
}


5、div中加三角形

    效果图:

    css积累中。。。

    代码:

    

{  
  height: 0;
  line-height: 0;
  border-width: 14px;
  border-style: solid;
  border-color: transparent transparent transparent #1000FF;
  left: 160px;
  position: relative;
}

    其他位置的三角形只要修改border-color就行了。



  关注开发,欢迎加好友交流,一起成长:

      qq群: 175677844

       微信:css积累中。。。


你可能感兴趣的:(css积累中。。。)