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;属性之后,这些行内元素会具有块状元素属性。`
  • 相关阅读:
    Educational Codeforces Round 83 --- F. AND Segments
    Educational Codeforces Round 83 --- G. Autocompletion
    SEERC 2019 A.Max or Min
    2019-2020 ICPC Southwestern European Regional Programming Contest(Gym 102501)
    Educational Codeforces Round 78 --- F. Cards
    今天我学习了一门全新的语言
    codeforces 1323D 题解(数学)
    Educational Codeforces Round 80 (Div. 2) 题解 1288A 1288B 1288C 1288D 1288E
    Educational Codeforces Round 81 (Div. 2) 题解 1295A 1295B 1295C 1295D 1295E 1295F
    Codeforces Round #617 (Div. 3) 题解 1296C 1296D 1296E 1296F
  • 原文地址:https://www.cnblogs.com/yan--li/p/7247634.html
Copyright © 2011-2022 走看看