CSS常用属性

 一个盒子实际所占有的宽度或高度是由"内容+内边距+边框+外边距"组成。

    1.边框border

边框的主要属性有三个,分别是:

border-width:边框宽度、 border-style:边框样式、border-color:边框颜色。

以上属性可以单个写,也可以写成:

border:[border-width][border-style][border-color]|inherit

border-color:上、右、下、左  /* 同时设置四个边框的一个属性 */

border-left:1px red solid   /* 单独设置某一边框三个属性 */

border-left-color:red      /* 单独设置某一边框的某一属性 */

2.内边距padding

padding:[上单元][右单元][下单元][左单元],也可以单独设置padding-top,padding-right,padding-bottom,padding-left。

3.外边距margin

margin:[上单元][右单元][下单元][左单元],也可以单独设置margin-top,margin-right,margin-bottom,margin-left。

注意外边距合并的概念:就是有垂直上下两个元素时,上面元素的margin-bottom与下面元素的margin-top会合并为一个,并取两者中的大者为垂直margin

4.背景 background

     background-attachment   设置背景图像是否固定或者随着页面的其余部分滚动。

     fixed:固定,不随屏幕的滚动而滚动。

     scroll:随屏幕的滚动而滚动。

     inherit:从父元素中继承。

background-color:[颜色]   设置背景图片的颜色

background-image:ulr("图像的地址");  背景图片地址

background-position: 背景的位置  可以跟两个百分比或两个数字  

      50px 50px

      50% 50%

top left

background-repeat:背景图片重复

     no-repeat:不重复

     repeat:延水平,垂直两个方向平铺

     repeat-x:  延水平方向平铺

     repeat-y:延垂直方向平铺

background  一次过设置以上5个属性

     background:[background-color][background-image][background-repeat][background-attachment][background-position]

 5.文本text

color:设置文本颜色。

direction:设置文本方向。

line-height:行高。   行高设置与元素同样高以实现垂直居中对齐是常用技巧之一。

letter-spacing:字符间距。    中文之间的字间隔用它来实现,可以用像素,也可以用em等等。letter-spacing添加字母之间的空白,而word-spacing添加每个单词之间的空白。请大家注意,word-spacing对中文无效。

text-align:对齐元素中的文本。

text-decoration:文本添加样式(上划线,下划线,删除线等等)。

text-indent:文本首行缩进。

text-shadow:文本阴影。     text-shadow: -10px -10px #666,10px 10px #fff;

text-transform:控制元素中的字母。 属性:lowercase:全部转为小写,uppercase:全部转换为大写,capitalize将单词首字母转为大写,none不处理。

unicode-bidi:设置文本方向。

white-space:设置元素中空白的处理方式。normal:默认属性,空白符被忽略。pre:保留空白,不换行。pre-wrap:保留空白,但是正常换行。nowrap:不换行,忽略空白,直到遇到<br/>。pre-line:忽略空白,保留换行。

word-spacing:设置字属性。

      6.字体font

            font-family:宋体;   设置字体系列。

            font-size:2em。    设置字体大小。2em 2xm 2px等等。

            font-weight:700;  设置字体促销。 100-900  bold:粗体 bolder:更粗。lighter:更小。

            font-style:italic;    设置字体样式  normal:正常,italic:斜体 oblique:倾斜

            font-variant:small-caps;   以小型大写字体或者正常字体显示文本。只对英文文本有效。

            font  一次过设置多个属性。

       7.列表

            list-style-type:circle             设置列表项标志的类型。(li前面显示得字符。)

list-style-image:url("k.jpg")  设置列表项标志的图片。(li前面显示得字符。)

list-sutle-position:inside        inside:列表项标志放置在文本以内,且环绕文本根据标记对齐。outside:  默认值 保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。

list-style:[list-style-type][list-style-image][list-style-position] 一次过设置以上3个属性。

     8.表格table

    border-collapse   设置表格的边框是否合并为单一的边框。  属性: separate:不合并。  collapse:合并为单线边框。

           border-spacing   设置表格边框线之间的距离,如果边框已经collapse合并,则无效果。

    caption-side       设置表格标题的位置,默认是top。属性有:top 标题在表格顶部。bottom 标题在表格底部。

    empty-cells        设置表格空单元周围是否绘制边框,注意要border-collapse不合并separate,在能看得到效果。属性 hide不绘制边框,show绘制边框。

    table-layout       设置表格单元格宽度的计算方法。fixed:列表由表格宽度设定。auto:列表由单元格内容设定。注意表格width由百分比设置有效,设置为50px时,无效。

      9.轮廓

    outline-color  轮廓颜色

    outline-style  轮廓线条样式

    outline-width  轮廓线条宽度

    outline    将以上一次性设置以上3个属性。

  10.定位

    position:static  静态定位、relative 相对定位、absolute 绝对定位、fixed 类似绝对定位,不过定位标准是窗口。

    静态定位即标准流位置。相对定位可以设置相对原标准流中位置的偏移量,但仍占用标准流位置。绝对定位以最近的已定位父元素为定位基准(已定位含义:有position且不为static)。fixed以浏览器窗口为定位基准。

  11.浮动

    float:  left左浮动,right 右浮动,none,不浮动。注意浮动只对块级元素有效。

块级元素(block)会占一行,不管内容满不满一行。如:<ul li> <div>

行内元素(inline)占用的元素仅仅为内容的长度,当多个元素的内容都不满一行时,会自动显示在同一行。如:<span><a>

12.清除浮动

  clear     left: 清除左浮动 right:清除右浮动    both:清除左浮动和右浮动。none:默认值,不清除浮动。

13.尺寸

  width:定义元素宽度

  height:定义元素高度

  max-width:定义元素最大宽度

  max-width:定义元素最大高度

  min-widht:定义元素最小宽度

  min-height:定义元素最小高度

  line-height:设置行高;    百分比:100%是默认的行高。 纯数字:1是默认行高。像素:不知道。

  content:   为所选中元素添加内容。通常配合:before或:after一起使用。

:before 在元素之前添加内容。

:after 在元素之后添加内容。

 

14、overflow 超出父元素边界的处理方法  

   overflow  属性:visible 默认属性。内容不会被修剪,会呈现在元素框之外。

             hidden:超出部分内容会被隐藏,其余不可见。

           scroll:内容会被修剪,但是浏览器会显示滚动条其余的内容。

           auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。

<div style="width:200px;height:200px; border:1px solid #999; overflow:scroll" id="div1">
  <div id="div2" style="width:400px;height:400px; margin:20px 0px 0px 20px;">
    
  </div>
</div>

   15、white-space

   

pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

   pre空白符被浏览器保留是什么意思呢?

    <p style="white-space:pre">你好         吗?         </p>
    <p>你好         吗?         </p>

  结果

  

  第一行,所有的空格都保留。第二行,中间保留一个,右边一个都没。

  pre-line中的保留换行符是什么意思呢?就是代码中的换行保留下来,同时也正常地换行。

<body style="width:250px; border:1px solid #000;">
    <p style="white-space:pre-line">你好       
    吗?         I AM A SUPER MAN HA HA HA HA HA HA HA HA HA A</p>
</body>

  结果如下:

  

  吗之前是代码中的换行,它保留下来了。而HA HA HA是自动换行。

CSS常用属性,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。