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

    CSS
    一、文本处理

    (1)font- 文字样式

                font-size 文字大小

                font-family 字体

                font-weight 加粗  bold/normal/value

                font-style  斜体  normal/italic

                font-variant 小型大写字母  small-caps

     

    (2)text-  文本格式

                color 文字颜色

                text-align  水平对齐 内容的水平对齐方式

                text-indent  首行缩进

                text-decoration  文字修饰  none/underline

     (3)line-height 行高 

             多行文本:行高可以设置行间距

             单行文本:当行高等于容器高时,文字垂直居中

    (4)text-shadow 文本阴影

    text-shadow:h-shadow v-shadow blur color

     

    (5)white-space文本溢出:

                white-space  nowrap/normal

     (6)text-overflow 

              当文字水平方向有溢出,且overflow为hidden时

              clip:隐藏溢出内容;

              ellipsis:在句子末尾加...

     

    (7)word-wrap长单词换行:

                word-wrap: normal/break-word

                word-break:break-all/keep-all/normal

     

     

    二、表格样式:

      (1)通用样式: width  height  border padding ……

                    vertical-align  垂直对齐

     

      (2)专用样式:

                      border-collapse 边框合并 collapse/separate

                      border-spacing 单元格边框间距

                      table-layout  fixed表示固定布局,宽度不再变化

                      caption-side  表头位置  top/bottom

     

    三.框模型(一切皆为框)

      width、height(内联元素没有宽高)

      border

      padding 内边距   会撑开框

        0、正值 

      margin  外边距  框与框之间的距离

                    0、正值、负值、auto

        左右margin为auto,框居中对齐

        当上下margin相遇时,取较大值

     

    四、背景属性:

    background-color 背景色 

       可取值范围为所有合法的颜色值。可为transparent

     

    background-image 背景图

       定义背景图像的路径。可以为none

     

    background-repeat  背景图重复

       repeat(默认)、no-repeat、repeat-x、repeat-y

     

    background-attachment  背景固定

       fixed  背景图不随着内容一起滚动

     

    background-position  背景偏移

       background-position:x-position y-position;

       x可取值:left、right、center、正值、负值

          正值背景图向右移动,负值背景图向左移动

     

       y可取值:top、bottom、center、正值、负值

          正值背景图向下移动,负值背景图向上移动

     

       CSS sprites CSS精灵

     

    *   background-size  背景图尺寸

    *   background-clip  背景颜色的绘制区域

         可取值:border-box padding-box content-box

    *   background-origin 背景图绘制区域

         可取值:border-box padding-box content-box

     

    背景属性可简写:

    background:url(images/welcome.png) no-repeat

    fixed -40px -15px #ff0;

    background:image repeat attachment position color;

     

    五、渐变:颜色发生平滑的过渡效果

    线性、径向、重复

    background-image:linear-gradient(90deg,red 10%,black 15%,green 40%)

                     radial-gradient(size at position,color1,color2,...)

                             200px at left top

               repeating-linear-gradient(90deg,red 0%,black 5%,green 10%)

               repeating-radial-gradient

    六、浮动

           元素默认情况下是普通流定位:

        块元素独占一行,从上到下排列

        行内元素在同一行里从左到右排列。

      (1)float:left/right 

    元素会在父容器的范围内浮动,left已浮动元素会从左到右依次排列;right已浮动元素会从右向左依次排列

      (2)clear:清除浮动影响。定义元素的哪一侧没有浮动元素

                  clear:left/right/both

      (3)overflow:hidden 

                  父元素内的子元素如果浮动,父元素会没有高度。

                  加了overflow:hidden之后,父元素就可以自适应高度了。

     

      七、display  显示方式

             none  不显示

             block  显示为块元素

             inline  显示为行内元素

             inline-block  行内块

             可以让块元素与行内元素互相转换。

     

     八、 visibility  可见性

     hidden/visible

     

     九、 opacity  半透明

     取值范围:0-1

     

      十、列表

             list-style- ……

             type  列表编号样式

             image  用图片代替列表编号

             position 列表编号位置

              list-style: image position   简写。

               常用:list-style:none;

        

    十一、vertical-align

           1、middle  元素垂直居中

           2、top和bottom可能与想象中不同,以实际效果为准

    行内块设置margin-top会影响到整行

     

    十二、定位:

        (1)static  默认普通流定位

        (2)relative  相对定位。

                 只定义relative,元素不会发生改变

                 用left/right/top/bottom可以让元素相对于原来的位置偏移

       (3)absolute  绝对定位

                 绝对定位的元素会跳出普通流,内容会与其它元素重叠。

    定义偏移时,绝对定位的元素是相对已定位的父元素发生偏移。如果父元素未定位,会向上找上一级父元素。如果没有已定位的父元素,相对于body偏移。

      (4)fixed  固定定位

                 元素相对于浏览器框进行定位,页面滚动时,框的位置固定不变

     

     (5) z-index  元素上下层叠顺序

                 z-index可以为负值,也可以为正值。

                 只有已定位的元素才能使用z-index调整层叠顺序

                 z-index越大,元素越靠上。

  • 相关阅读:
    消息队列RocketMQ版最佳实践订阅关系一致
    Java8 stream、List forEach 遍历对象 List 对某一字段重新赋值
    SQL的嵌套查询与连接查询
    Xshell7 个人可以申请免费使用正版
    @NotEmpty、@NotBlank、@NotNull 区别和使用
    List集合日常总结
    Time Zone(时区)
    Arrays.asList() 和Collections.singletonList()的区别
    GitBash生成SSH密钥
    Mysql中用SQL增加、删除、修改(包括字段长度/注释/字段名)总结
  • 原文地址:https://www.cnblogs.com/baiyanfeng/p/5034808.html
Copyright © 2011-2022 走看看