zoukankan      html  css  js  c++  java
  • css属性+精灵图+块级元素与行内元素 大全

    CSS文本属性

    • letter-spacing 字母间距 默认0px
    • word-spacing 单词间距 默认 0px
    • text-decoration 值: none/underline/overline/line-through
    • text-align 水平对齐方式 left(默认)/right/center
    • vertical-align 垂直对齐(基于文字的基线) baseline/bottom/top/middle/sub/super/text-top/text-bottom/百分比
    • text-indent 首行缩进 长度单位
    • line-height: 行高 长度单位 设置行高=高 使一行文字垂直居中
    • font:[style/variant/weight] size/line-height family

    CSS背景属性

    • background-color 背景颜色
    • background-iamge 背景图片 url()
    • background-repeat 背景图片的平铺方式 repeat(默认)/repeat-x/repeat-y/no-repeat
    • background-postion 背景图片定位 left/center/right/长度单位 top/center/bottom/长度单位
    • background-attachment 背景图片固定或滚动 scroll(默认)/fixed
    • background:color image repeat postion

    CSS边框属性

    • border-width 边框线的宽度 长度单位
    • border-color
    • border-style 边框线的风格 solid(实线)/dotted(点线)/dashed(虚线)/double(双实线)...
    • border border:width style color(border: 边框宽度 边框样式 边框颜色)
    • border-left/right/top/bottom
    • border-left-width(左边边框的的宽度)

    CSS鼠标光标属性

    • cursor 值 default/pointer(小手)/move/crosshair(十字架)/text(文字选择器)/wait

    CSS列表属性

    • list-style-type 列表项的图形 disc/circle/square/decimal/lower-roman/upper-roman ....
    • list-style-postion 列表项图形的位置 outside/inside (列表图形在li的内部)
    • list-style-iamge 自定义列表图形 url
    • 写法list-style-image:url(../images/weixin.gif);
    • 最常见的设置 list-style:none(去掉列表前的图形)

    CSS表格属性

    • table-layout 表格布局方式 auto/fixed(使单元格均匀的分布)
    • border-collapse 合并单元格边框 separate/collapse(合并单元格的)
    • border-spacing 单元格间距 长度单位
    • caption-side 表格标题位置 top/bottom
      caption-side:top;
    • empty-cells 没有内容的单元格是否隐藏 show/hide

    CSS sprites css精灵图

    引入精灵图的原因:

    • 为了减少服务器接收和发送请求的次数,提高页面的加载速度,因此,产生了css精灵技术。

    主要代码

    • .类名{ background:url("图片的位置") no-repeat -25px -64px;}

    行内元素和块状元素

    常见的块状元素

    • div,p br hr...

    常见的行内元素

    • 超链接a,span,img...

    区别

    • 块状元素独占一行, 行内元素可以共用一行
    • 默认宽度: 块状元素默认宽度由父元素决定 行内元素默认宽度右内容决定
    • 块状元素可以设置宽高, 行内元素不可以设置宽高
    • 大部分块状元素内部可以嵌套块状或行内, 大部分行内只能嵌套行内
    • 外边距,块状没问题,行内只能设置左右

    块状元素转为行内元素的方法

    • 当css对行内元素定义display:inline;属性之后,这些块状元素会具有行内元素属性。`

    行内元素转为块状元素的方法

    • 当css对行内元素定义display:block;属性之后,这些行内元素会具有块状元素属性。`
  • 相关阅读:
    网络问题排查
    SpringBoot 自定义注解清除缓存
    MYSQL外键的使用以及优缺点
    Java List
    黑客帝国代码雨
    前端接收字节数据流,显示图片
    何为熔断降级
    spring的线程
    window.open 与 iframe
    js 全部替换
  • 原文地址:https://www.cnblogs.com/yan--li/p/7247634.html
Copyright © 2011-2022 走看看