半年前端,巩固css知识,有遗忘的同学可以进来看看啦

187 阅读6分钟
  1. 背景属性(包括颜色,图片,图片是否重复(默认重复),图片是否固定不滚动,图片起始位置),简写属性也是按这个顺序

  2. 文本属性(基本可继承)

    • 文本颜色:三种写法(十六进制、RGB、颜色单词)【可继承】
    • 两种字间距:letter-spacing和word-spacing,都对英文单词间距有影响,都允许负值,但是word-spacing对中文没影响,注意的是letter-spacing是对单词内的每个字母产生间距,而word-spacing是单词之间产生间距【可继承】
    • 两种对齐方式:text-align和vertical-align。text-align是控制水平方向的对齐方式(left左对齐,right右对齐,center居中对齐,justify两端对齐)【可继承】。vertical-align是控制垂直方向的对齐方式(主要是top、text-top、bottom、text-bottom、middle以及百分比,注意的是text-是对齐文本最低端,一般是需要对齐英文字母最低端)【不可继承】
    • line-height:行高的标准定义是两行文字基线之间的距离,也就是小时候英文本子四条线中第三条线的位置。行高也可以简单理解为一行的高度,(设置文字居中的时候可以不用设置height的值,直接设置行高,就可以自动撑开距离,形成居中的样式),行高的值可以是数字,百分比,px【可继承】
    • text-decoration:控制是否加下划线,以及下划线的位置【不可继承】
    • text-indent:控制文字段落缩进,缩进两格是20px【可继承】
    • text-transform:控制文字全部小写、大写或者首字母大写【可继承】
    • text-shadow:设置文字阴影(水平阴影位置、垂直阴影位置、模糊距离、阴影颜色),只有前两个值是必须的,后面可选【可继承】
    • text-overflow:控制文字溢出时的样式(clip修剪,ellipsis显示省略号,使用给定字符串代替被裁剪的文本)
    • fong-size使用px不能根据窗口大小改变字体大小,目前的解决办法是设置body font-size:100%,元素字体使用em,em是由W3C建议的1em的默认大小是16px
  3. 列表

    • 有序列表ol,无序列表ul

    • 列表样式list-type属性简写(list-type:list-style-type list-style-position list-style-image)

    • 如果是要使用list-style-image,考虑到浏览器兼容的问题,不能使用传统的列表样式写法,需要自己模拟,代码段如下:

      ul
      {
          list-style-type: none;
          padding: 0px;
          margin: 0px;
      }
      ul li
      {
          background-image: url(sqpurple.gif);
          background-repeat: no-repeat;
          background-position: 0px 5px; 
          padding-left: 14px; 
      }
      
  4. 表格

    • 原生态表格值得注意的几个点就是: (1).在table标签里面添加border="1"表格就会显示边框,但是td之间有间距 (2).因为td之间有间距,所以需要设置border-collapse:collapse将表格的边框折叠成一个单一的边框
  5. 盒子模型

    • 包括内外边距,内容和边框
    • 在W3C中元素的宽度:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
    • 元素的高度是总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
    • 注意:IE5和6计算的方式不是这样,是内容、内边距和边框的总和
  6. display(设置显示成块元素还是内联元素,显示与否)

    • 隐藏元素(display:none,visibility:hidden)差别在于隐藏之后是否还占空间,display:none不占空间
    • 块元素和内联元素:块级元素可以通过display:inline显示为内联元素,内联元素可以通过display:block显示为块级元素,但是里面不能嵌套块级元素
    • 内联元素只需要必要的宽度,因此设置固定的宽度没什么用
    • 当设置元素 visibility: collapse 后,一般的元素的表现与 visibility: hidden 一样,也即其会占用空间。但如果该元素是与 table 相关的元素,例如 table row、table column、table column group、table column group 等,其表现却跟 display: none 一样,也即其占用的空间会释放。(火狐谷歌均有用,IE10有用,其他版本未测试)
  7. 定位(五种定位)

    • static:默认定位,即没有定位,元素处在文档流中
    • relative:相对其原本的位置进行定位,使用到top、bottom、left、right
    • absolute:绝对定位,通常相对其最近使用定位的父元素(relative的父元素???),同样使用到top、bottom、left、right
    • fixed:相对浏览器窗口定位,滚动条滚动,他的位置也不会变,同样使用到这四个属性
    • sticky:粘性定位,处在相对定位和fixed定位之间,当内容过多,出现滚动条时,未将该元素滚出窗口时时是相对定位,而一旦滚出变成fixe定位
    • z-index:z-index需要结合定位使用,z-index的值越大排在越前面,默认值是0
  8. 鼠标改变光标

    • 常用的几种是pointer、crosshair、move、help
  9. 浮动

    • 使用float定位后,周围的元素会改变布局,围绕在该元素周围
    • 清除浮动(clear:both):清除浮动后,该元素两侧不能出现浮动元素
  10. 对齐方式

    • 给元素设置宽度之后,可以使用margin:auto是元素居中

    • 如果子元素的高度比父元素高,同时子元素设置了浮动,这时子元素将会溢出父元素,会影响布局,这时需要设置父元素overflow:auto,将子元素包含在父元素内

    • 元素居中,如果确定是单行文字,则不给元素设置高度,直接设置合适的padding;或者直接设置合适的line-height;同样也是不设置高度

    • 值得注意的一点是使用line-height,不设置高度,那么元素的高度会随着几行的文字之间的line-height撑大height,会影响布局,所以适当使用line-height

    • 如果真的要使用line-height设置居中,同时元素内会有多行文字,那么需要加上这段代码

      .center p {
          line-height: 1.5;
          display: inline-block;
          vertical-align: middle;
          /*center是div的类选择器*/
      }
      
    • 还有一种使用绝对定位的方式居中,比较少用到,同时考虑到多行溢出问题

  11. css组合选择符【重点】

    • 后代选择器(以空格分隔),选择的是后代全部的该元素
    • 子元素选择器(以大于号分隔),选择的是直接子元素
    • 相邻兄弟选择器(以加号分隔),选择的是相邻的第一个该元素
    • 普通兄弟选择器(以破折号分隔),
  12. 伪类(以例子为主)

    • first-child伪类:p:first-child指的是所有父元素的第一个p元素
    • p > i:first-child:匹配所有

      元素中的第一个 元素

    • p:first-child i:匹配所有作为第一个子元素的

      元素中的所有 元素

    • 其他伪类可参见:www.runoob.com/css/css-pse…
  13. 伪元素

  14. 导航栏

    • 使用ul、li,将前面的点去掉,设置padding、margin为0
  15. 下拉菜单

  16. 提示工具

  17. 图像透明

    • css3中使用opacity(值是0.0到1.0)
    • ie8及更早版本使用filter:alpha(opacity=某值,该值是0到100)
  18. 图像拼合技术

    • 为了减少图像的申请次数,可以将一些小型图标拼接成总的图片,后面根据定位获取里面的某个需要的图片。