一些CSS小结

来源:互联网 发布:数据库宝典 编辑:程序博客网 时间:2024/06/06 14:10
  • overflow:hidden;
     overflow 属性规定如何处理不符合元素框的内容。语法见下
    Object.style.overflow=visible|hidden|scroll|auto

  可能的值

值 描述 visible 内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,但是浏览器不会显示供查看内容的滚动条。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 由浏览器决定如何显示。如果需要,则显示滚动条。


  • overflow-x:hidden;
     裁剪元素中内容的左/右边缘 - 如果溢出元素的内容区域的话。语法见下
    JavaScript 语法:  object.style.overflowX="scroll"
    overflow-x: visible|hidden|scroll|auto|no-display|no-content;
值 描述 visible 不裁剪内容,可能会显示在内容框之外。 hidden 裁剪内容 - 不提供滚动机制。 scroll 裁剪内容 - 提供滚动机制。 auto 如果溢出框,则应该提供滚动机制。 no-display 如果内容不适合内容框,则删除整个框。 no-content 如果内容不适合内容框,则隐藏整个内容。


  • 《css3初始化属性,WebKit的CSS扩展(WebKit是私有属性) 》
-webkit-touch-callout  |  -webkit-line-clamp  |  -webkit-tap-highlight-color  |  -webkit-appearance
  • letter-spacing:-3px;
     letter-spacing 属性增加或减少字符间的空白(字符间距)

  • text-indent:50px;
     text-indent 属性规定文本块中首行文本的缩进。

  可能的值

值 描述 length 定义固定的缩进。默认值:0。 % 定义基于父元素宽度的百分比的缩进。 inherit 规定应该从父元素继承 text-indent 属性的值。


  • text-align:center;
    text-align 属性规定元素中的文本的水平对齐方式。
    JavaScript 语法:  object.style.textAlign="right"

  可能的值

值 描述 left 把文本排列到左边。默认值:由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。


  • background:transparent; 默认。背景颜色为透明
      尽管在大多数情况下,没有必要使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent 值还是有必要的。
  • display:inline-block;
     《display:inline、block、inline-block的区别》
  • vertical-align:text-top;
     vertical-align 属性设置元素的垂直对齐方式。
      可能的值
值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。


  • box-sizing:border-box;
div{    box-sizing:border-box;    -moz-box-sizing:border-box; /* Firefox */    -webkit-box-sizing:border-box; /* Safari */    width:50%;    float:left;}

  box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
  例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

    语法 box-sizing: content-box|border-box|inherit;
值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。
就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 inherit 规定应从父元素继承 box-sizing 属性的值。


  • font-family: microsoft yahei, arial, helvetica, sans-serif;
     中文是雅黑,英文是就Arial,如果用户电脑里没有雅黑,自适应默认的就是宋体。
原创粉丝点击