zoukankan      html  css  js  c++  java
  • css 基础

    css 基础 - 2

    一.文本样式:

       文字竖着书写:

     

      语法:writing-mode : lr-tb、tb-rl
      参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左

     

      1.text-align:(水平对齐方式)

            left(居左)  center(居中)   right(居右

     

     

     

      2.text-indent:(缩进

        单位:em(字符)  px(像素

     

     

      3.line-height:(行高

     

      

       4.cursor:(光标

          pointer(手型指针       wait(等待

          help (帮助            text(文本光标

    二.边框样式: border

      1.top ()  bottom() left() right(

         2.width (线宽

           3.style:solid(实线)  dashed (滑线)   dotted(点线

        4.color (颜色

     

      注意:合成样式中方位属性(top,bottom等)直接跟在border后面 !

      圆角:border-radius : 10px    

    三.元素与块元素

    •  块元素:

        1.独占一行

        2.设置宽高有用

     

     

    • 行元素:

        1.行元素是紧挨着上一个元素显示,不会独占一行

        2.设置宽高没有用

     

     

    • 行&块元素 可以相互转换

        display:  block  转成块元素

     

        display: inline   转成行元素

        display: inline-block   转成行块元素,变成行元素,但是具有块元素的特点(可以设置宽高)

     

    四.精灵技术( css spirit )

      1.background-image

      2.background-color

      3.background-position(位置

        left    center    right

        top    center    bottom

      4.background-repeat:(平铺方式

            no-repeat(不平铺) repeat-x(水平平铺) repeat-y(竖直平铺

      5.background-attachment:(固定

      6.background合成样式

        background : url(“./img/1.jpg”) no-repeat center top fixed;

     

      7.把容器的宽高 设置成 目标图片 的大小(宽&高 )

      8.调节background-position坐标值

     透明度:
      谷歌: opacity : 0.5;

      IE : filter: alpha (opacity: 50);

    五.盒模型

      1.padding:   盒子里面的内容 距离 盒子四周的距离, 可以简单的理解为"div"

        padding:20px;                      (内容到四周边框的距离为20px

        padding-top:10px;              (内容到上边框的距离为10px)

        padding-right:20px;           (内容到右边框的距离为20px)

        padding-bottom:30px;      (内容到下边框的距离为30px)

        padding-left:40px;              (内容到左边框的距离为40px)

        padding:10px 20px;             (内容到上、下边框的距离均为10px,到左、右边框的距离均为20px)

        padding:10px 20px 30px;  (内容到上边框的距离为10px,到左、右边框的距离均为20px,到下边框的距离为30px)

     

     

     

      2.margin:  盒子&盒子之间的距离

         方位属性与padding一样,不设(top等)方位属性时默认为四边

     

     

     

     

  • 相关阅读:
    vue自定义指令
    ZOJ Problem Set–2104 Let the Balloon Rise
    ZOJ Problem Set 3202 Secondprice Auction
    ZOJ Problem Set–1879 Jolly Jumpers
    ZOJ Problem Set–2405 Specialized FourDigit Numbers
    ZOJ Problem Set–1874 Primary Arithmetic
    ZOJ Problem Set–1970 All in All
    ZOJ Problem Set–1828 Fibonacci Numbers
    要怎么样调整状态呢
    ZOJ Problem Set–1951 Goldbach's Conjecture
  • 原文地址:https://www.cnblogs.com/wangyihong/p/6104478.html
Copyright © 2011-2022 走看看