poison丶momo
poison丶momo

web前端笔记

1.单位

  1. px 像素 1em 1em---1个字符 2em---2个字符（自动适应用户所使用的字体） % 百分比

2.文本

  1. color文本颜色 red #f00 letter-spacing字符间距 2px -3px em line-height行高 14px 1.5em 120% （一般用于垂直居中） text-align对齐 center、left、right 、justify（两端对齐） text-decoration装饰线 none（去掉超链接下划线） overline（装饰线在文本的上方） undeline line-throuhg（装饰线作为删除线贯穿文本之中。（一般用于商品打折）） text-indent首行缩进 2em

3.字体

  1. font-family 字体系列 font-size 字号 14px 120% font-style 斜体 italic font-weight 粗体 bold

  2. font:斜体 粗体 字号/行高 字体 font:italic bold 16px/1.5em '宋体'

4.CSS背景

  1. background-color background-image：url（"logo.jpg"） background-repeat：repeat repeat-x repeat-y no-repeat background：颜色 图片 repeat

5.超链接的四种状态

  1. 1.a:link 普通的，未被访问的链接 2.a:visited 用户已访问的链接 3.a:hover 鼠标指针位于链接的上方悬停 3.a:active 链接被点击的时刻

6.无序列表ul有序列表ol共用样式

  1. list-style 所有用于列表的属性设置于一个声明中 list-style-image：url（"images/bulletl.gif"） 为列表项标志设置图像 list-style-position 标志的位置 list-style-type 标志的类型、

7.CSS表格

  1. table{ width:500px; height:200px; }

  2. border 属性 table,td,th{ border:1px solid #eee;(1个像素宽，实线，灰色) } border-collapse属性{ border-collapse:collapse;(合并默认的表格样式) }

  3. __:nth-child(old | even) 奇偶选择器 tr:nth-child(old){ background-color:#eaf2d3;(表格方便观看，隔行显示不同的颜色) }

8.盒子模型

  1. overflow属性：当内容溢出盒子框时，overflow属性取值 hidden：超出部分不可见 scroll：显示滚动条 auto：如果有超出部分，显示滚动条

  2. border属性 border-width：px、thin（细）、medium（中）、thick（粗） border-style：dashed（一个个横线）、dotted（点）、solid（实线）、double（双实线） border-color：颜色 border：width style color

  3. 水平分割线

    .line{ height: 1px; width: 500px; border-top: 1px solid #ccc }

  4. 对浏览器的默认设置清零 *{ margin:0； padding:0； }

  5. margin:1px; margin:1px 1px 1px 1px;（上右下左） margin:1px 2px ; margin:1px 2px 1px 2px; margin:1px 2px 3px; margin:1px 2px 3px 2px;

  6. margin的合并：垂直方向合并，水平方向不合并；（合并后显示大的）

  7. 图片、文字水平居中：text-align:center;

  8. div水平居中：margin:0 auto;(浏览器自动计算)

9.CSS 定位机制概述

  1. 文档流folw：默认的一种情况，不需要额外设置。从上到下，从左到右依次，像写字一样。只是有的元素单独占一行。

  2. 浮动定位float：水平并排排列，左右排列，大盒子拆分若干列时。

  3. 层定位position：希望当前网页元素像图层一样前后层叠在一起。

10.文档流定位

  1. 元素分类：block、inline、inline-block

    元素类型转换：display属性

    （1）block元素特点：独占一行，元素的height、width、margin、padding都可设置 常见的block元素：

    、

    、

    ...

    、
      、