• 注册
  • 查看作者
    • 站长需要记住的常用css属性介绍

      width: 100px; 宽度
      height: 100px;高度
      font-weight: bold; 粗体

      (1) *block(区块)

      行高 line-height:数值 | inherit | normal;
      字间距 letter-spacing: 数值 | inherit | normal;
      词间距 word-spacing: 数值 | inherit | normal;
      空格 white-space: pre(保留) | nowrap(不换行) | normal;

      /*表格宽度自适应*/
      th {
      white-space: nowrap;
      }

      显示 display:

      none; /*不显示,使用的场景非常多*/
      block; /*把内联标签变成块级标签*/
      inline; /*把块级标签变成内联标签*/
      list-item; /*列表项*/
      run-in; /*追加部分*/
      compact; /*紧凑*/
      marker; /*标记*/
      table;
      inline-table;
      table-raw-group;
      table-header-group;
      table-footer-group;
      table-raw;
      table-column-group;
      table-column;
      table-cell;
      table-caption; /*表格标题*/

      (2) *box(盒子)

      宽度 width: 长度 | 百分比 | auto;
      高度 height: 长度 | 百分比 | auto;
      清除 clear: none | left | right | both;
      边界 margin: 上 右 下 左 ;
      填充 padding: 上 右 下 左 ;
      定位 position: absolute | relative | static;
      透明度 visibility: inherit | visible | hidden;
      溢出 overflow: visible | hidden | scroll auto;
      裁切 clip: rect(12px,auto,12px,auto)
      (3) float(漂浮)

      漂浮 float: left | right | none; 在页面布局的时候用的最多
      常见用法

      <div style='background-color:red;float:left;width: 50%;' >div1</div>
      <div style='background-color:green;float:right;width: 50%;' >div2</div>

      一个问题

      子标签使用了float时候,父标签的样式失效

      <div style='background-color:red;'>
          <div style="float: left">div1</div>
          <div style="float: left">div2</div>
      </div>

      解决方案一:clear: both

      <div style='background-color:red;'>
          <div style="float: left">div1</div>
          <div style="float: left">div2</div>
          <div style="clear: both;"></div> <!--加上clear:both之后就正常了-->
      </div>

      解决方案二:clearfix

      <div style='background-color:red;' class="clearfix">
          <div style="float: left">div1</div>
          <div style="float: left">div2</div>
      </div>

      .clearfix:after{
          content: ".";
          display: block;
          height: 0;
          clear: both;
          visibility: hidden;
      }

      (4) position(定位)
      fixed

      一般用来写网页顶端的固定导航条,或者两侧的菜单。

      <!--对于块级标签来说加上position:fixed之后,该div就不会占一整行,一般需要手动定义宽度,如width:100%-->

      <div style="position:fixed;height:10%;background-color:lightskyblue;color:white;width:100%;top:0px;">我是导航</div>
      <div style="">
          <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;background-color:indianred">我是菜单</div>
          <div style="float: right;width:80%;"><p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
              <p>我是内容</p>
          </div>
      </div>

      absolute与relative

      这两者一般配合使用,用于调整div之间的相对位置

      <div style="position:relative;width: 300px;height: 150px;">
          <div style="position:absolute;float: left;width: 20%;background-color:indianred;bottom: 0px;right: 0px;">我是菜单</div>
      </div>

      (5) 透明度

      .image{
          opacity: 0.5
      }

      <img src="http://www.jotlab.com/wp-content/uploads/2008/08/python.jpg" style="opacity: 0.5; width:50%; height:50%; ">

      (6) font(字体)

      颜色 color: 数值;
      大小 font-size: 数值;
      字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
      样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
      粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
      变体 font-variant: small-caps;(小型大写字母) normal;(正常)
      (4) background(背景)

      背景 background: transparent; /透视背景*/
      颜色 background-color: 数值;
      图片 background-image: url() | none;
      重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;

      background-repeat : repeat; /*重复排列-网页默认*/
      background-repeat : no-repeat; /*不重复排列*/
      background-repeat : repeat-x; /*在x轴重复排列*/
      background-repeat : repeat-y; /*在y轴重复排列*/

      滚动 background-attachment: fixed | scroll;
      位置 background-position:数值 | top | bottom | left | right | center;

      background-position : 90% 90%; /*背景图片x与y轴的位置*/
      background-position : top; /*向上对齐*/
      background-position : buttom; /*向下对齐*/
      background-position : left; /*向左对齐*/
      background-position : right; /*向右对齐*/
      background-position : center; /*居中对齐*/

      简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
      (7) text(文本)

      大小写 text-transform: capitalize | uppercase | lowercase | none;
      修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
      排列 text-align: justify | left | right | center;
      缩进 text-indent: 数值 | inherit;
      阴影 text-shadow:数值;
      (8) border(边框)

      边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
      边框宽度 border-width: ;
      边框颜色 border-color: top值 right值 bottom值 left值;
      简写 border: width style color;

      边  框 {border:border-width border-style color}
      上 边 框 {border-top:border-top-width border-style color}
      右 边 框 {border-right:border-right-width border-style color}
      下 边 框 {border-bottom:border-bottom-width border-style color}
      左 边 框 {border-left:border-left-width border-style color}

      (9) list-style(列表样式)

      类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;

      list-style-type:none; /*不编号*/
      list-style-type:decimal; /*阿拉伯数字*/
      list-style-type:lower-roman; /*小写罗马数字*/
      list-style-type:upper-roman; /*大写罗马数字*/
      list-style-type:lower-alpha; /*小写英文字母*/
      list-style-type:upper-alpha; /*大写英文字母*/
      list-style-type:disc; /*实心圆形符号*/
      list-style-type:circle; /*空心圆形符号*/
      list-style-type:square; /*实心方形符号*/

      位置 list-style-position: outside | inside;
      图像 list-style-image: URL;
      简写 list-style:目录样式类型 | 目录样式位置 | url;
      (10) margin(边界)

      margin-top:10px; (上边界)
      margin-right:10px; (右边界)
      margin-bottom:10px; (下边界值)
      margin-left:10px; (左边界值)
      margin-inside:;
      margin-outside:;
      (11) padding(填充)

      padding-top:10px; /*上边框留空白*/
      padding-right:10px; /*右边框留空白*/
      padding-bottom:10px; /*下边框留空白*/
      padding-left:10px; /*左边框留空白

      (12) vertical(垂直)

      vertical-align:sub; /*下标字*/
      vertical-align:super; /*上标字*/
      vertical-align:top; /*垂直向上对齐*/
      vertical-align:bottom; /*垂直向下对齐*/
      vertical-align:middle; /*垂直居中对齐*/
      vertical-align:text-top; /*文字垂直向上对齐*/
      vertical-align:text-bottom; /*文字垂直向下对齐*/

      (13) a(链接)

      a /*所有超链接*/
      a:link /*超链接文字格式*/
      a:visited /*浏览过的链接文字格式*/
      a:active /*按下链接的格式*/
      a:hover /*鼠标转到链接*/

      (14) cursor(光标)

      光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;

      /*也可以自定义*/
      cursor: hand; /*链接手指*/
      cursor: crosshair /*十字体 */
      cursor: s-resize /*箭头朝下 */
      cursor: move /*十字箭头, 朝右*/
      cursor: help /*加一问号 */
      cursor: w-resize /*箭头朝左 */
      cursor: n-resize /*箭头朝上 */
      cursor: ne-resize /*箭头朝右上 */
      cursor: nw-resize /*箭头朝左上 */
      cursor: text /*文字型*/
      cursor: se-resize /*箭头斜右下 */
      cursor: sw-resize /*箭头斜左下*/
      cursor: wait /*漏斗*/

      能不能NEW一下你

      江苏·常州
    • 4
    • 0
    • 0
    • 49
    • 梦想的初衷清心醉人靠谱暖先生马้้้้้้蒂้้้้้้

      请登录之后再进行评论

      登录

      分享有礼

    • 发表内容
    • 做任务
    • 实时动态