css基础

样式类型

• 行内样式

  <div style="color: red; font-size: 200px">追命</div>
  

  ​

• 内部样式

  <style>
    div {
        color: red ;
    }
  </style>
  

  ​

• 外部样式

  <link rel="stylesheet" href="a.css" />
  

  ​

• 导入样式（@import）

  style type="text/css" >
  @import url(css文件路径);或 @import "css文件路径";
    /* 在此还可以存放其他CSS样式*/
  </style>
  

选择器

• 所有标签选择器 * {}
• 标签选择器 p {} div {}
• ID选择器 #head {}
• 类选择器 .head {}
• 交集选择器 h3.special{} p#one{}
• 并集选择器 div,p{}
• 后代选择器 div a{}
• 子元素选择器 h1 > strong {}
• 属性选择器

1. h1[class]{ color:red;}
   选择所有拥有class属性的h1标签
2. p[id="aside"]{color:red;}
   根据属性名相等选择
3. p[class~="a"]{color:rd;}
   只要包含属性，就被选择。ie6不支持。
4. E[att^="val"] { sRules }
   E[att$="val"] { sRules }
   选择具有att属性且属性值为以val开头（结尾）的字符串的E元素
5. E[att*="val"] { sRules }
   选择具有att属性且属性值为包含val的字符串的E元素

• 伪类选择器

• a:link {color: #FF0000} /* 未访问的链接 /
  a:visited {color: #00FF00} / 已访问的链接 /
  a:hover {color: #FF00FF} / 当有鼠标悬停在链接上 /
  a:active {color: #0000FF} / 被选择的链接 */
  最好的顺序 love hate
• :focus（向拥有键盘输入焦点的元素添加样式）
• :first-child（向元素的第一个子元素添加样式）

• 伪元素选择器

• :first-letter（向文本的第一个字母添加特殊样式）
• :first-line（向文本的首行添加特殊样式）
• :before（在元素内容之前添加内容）
• :after（在元素内容之后添加内容）

尺寸属性

• width（元素的宽度）

1. 不设置width的子块级元素会继承父块级元素的宽度]
2. 子盒子设置宽度为100%,那么这个子盒子的宽与父盒子一样宽

• height（元素的高度）
• max-height（元素的最大高度）
• max-width（元素的最大宽度）
• min-height （元素的最小高度）
• min-width（元素的最小宽度）
• 无继承性

内边距属性

• padding（设置所有内边距）

1. 上右下左（顺时针）
2. 享有背景色

• padding-bottom（下内边距）
• padding-left（左内边距）

设置为负数，那么盒子会向左方向移动

• padding-right（右内边距）

设置为负数，那么盒子会向右移动

• padding-top（上内边距）
• 小盒子的width是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
• 无继承性

边框属性

• border-width（设置四条边框的宽度）

border-width:15px;
可能的值：thin，medium，thick，length，inherit

• border-style（设置四条边框的样式）

• border-style:dotted solid double dashed;
  border-style:solid;
  none：无边框
  hidden：与 "none" 相同
  dotted 定义点状边框。
  dashed 定义虚线。
  solid 定义实线。
  double 定义双线。

• border-color（设置四条边框的颜色）

border-color:red green blue pink;

• border（设置所有的边框属性）

• border:5px solid red;
• 兼容性最好的消除边框方式：border: 0 none;

• border-radius（边框圆角）

大小为内容的宽度或高度的一半时变成圆

• outline（元素的轮廓（类似边框，不占据空间）

outline:#00ff00 dotted thick;

• 无继承性

外边距属性

• margin（设置所有外边距）,上右下左（顺时针）
• margin-bottom（下外边距）
• margin-left（左外边距）

设置为负数，那么将来这个盒子会向左方向移动

• margin-right（右外边距）
• margin-top（上外边距）
• margin：0 auto;（只对块元素居中有效）

• 要给居中的元素一个宽度，否者无效；
• 该元素一定不能浮动，否者无效。

• 如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。左右的margin是相加
• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与块级子元素的上外边距发生合并，合并后的外边距为两者中的较大者
• margin-right:auto;//有宽度块级元素靠左，默认
  margin-left:auto;//有宽度块级元素靠右
• 无继承性

表格属性

• border-collapse（是否合并表格边框）
  • border-collapse:collapse;//合并表格的边框
• border-spacing（相邻单元格边框之间的距离，仅用于分离模式）

列表属性

• list-style（设置所有的列表属性）

• list-style:none;消除列表项的标记

• list-style:square inside url('/i/arrow.gif');

  list-style-type 设置列表项标记的类型。
  list-style-position 设置在何处放置列表项标记。
  list-style-image 使用图像来替换列表项的标记。

• list-style-type（列表项标记的类型）

none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。

• list-style-image（使用图像来替换列表项的标记）

list-style-image:url("/i/arrow.gif");

• list-style-position（在何处放置列表项标记）

list-style-position（在何处放置列表项标记）

• 有继承性

其它

• content（与 :before 以及 :after 伪元素配合使用，来插入生成内容）
• opacity（不透明度）背景文字都透明
• 层叠性
• 继承性
• 优先级
• 行内样式 > 页内样式 > 外部引用样式 > 浏览器默认样式
  !important > 内联 > ID > 伪类|属性选择 >类 > 标签 > 伪对象 > 通配符 > 继承
• 权重计算（！important个数，ID选择器个数，类选择器个数，标签选择器个数）
• 浏览器查找元素顺序：从右往左找
• 盒子的总宽度= width+左右内边距之和+左右边框宽度之和
• 计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况。
• 1)body标签默认带有margin: 8px的属性
  2)p标签默认带有margin: font-size 0;
  3)h标签也默认带有margin-top和margin-bottom
  4)ul默认带有上下的margin以及左边的padding
• 行内块元素不能转化为行内元素
• CSS内容移除某个区域
  • 利用text-index:-2000em;
  • 利用padding 挤开盒子 并且overflow 切割。
  • 利用margin拉动盒子配合overflow切割
• 消除inline-block中的空隙
  • 去除空格，把代码放在一行上
  • 使用margin负值
  • .给父级添加font-size:0；
  • 使用letter-spacing或者 word-spacing
  • 使用float的方式
• 图片默认和文字的基线对齐
• 通栏、版心（980px）

​