css基础
字体属性
- font（所有字体属性）
- font:italic bold 12px/20px arial,sans-serif;
顺序：
font-style
font-weight
font-size/line-height
font-family- swsf,至少要指定font-size和font-family
- 连写会用默认的行高为0，会把前面的层叠掉
- font-family （字体）
- font-famliy: tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;//前面的字体都查找失败后，在系统中找一种sans-serif字体作为默认字体。
- 中文转码，escape()，sans-serif
- font-size（字体尺寸）
- chrome浏览器默认是16px
- h系列标签不继承font-size
- 最小是12px
- font-style（字体样式）
normal 默认值。
italic 斜体，前提是该字体有斜体
oblique 倾斜的字体样式，字体没斜体可用这种方式
inherit 规定应该从父元素继承字体样式。
-
font-weight（字体粗细）
- normal 默认值。定义标准的字符。
bold 粗体。
bolder 更粗。
lighter 更细。 - 100 200 300 400 500 600 700 800 900
- 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
- normal 默认值。定义标准的字符。
-
line-height（行高）
- 设置行高等于height可以让单行文本垂直居中
- 行高=字高+0.5上间距+0.5下间距
- 字体默认大小为16px,行高是16xp,大于16px时，默认的行高会变大，跟字体有关
- 值2em,200%，2表示2倍字体大小的行高
- 如果单位是em或者%，那么将来行高会先计算出来结果以后再继承给子元素
- 如果单位是没有，那么将来行高会先继承给子元素，然后再根据自己的字体大小计算出行高
有继承性
文本属性
- color（文本颜色）
color:red;
color:#00ff00;
color:rgb(0,0,255);
a标签不能继承color
- direction（文本方向）
- letter-spacing（字符间距）
消除inline-block的间隔
- text-align（文本水平的对齐方式）
元素或文本居中（只对行内元素或行内块元素有效）
- text-decoration（文本修饰）
- none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。- 消除a标签的下划线
- a便签不能继承
- text-indent（首行缩进）
- text-indent:2em;
text-indent:-5000px;- 段落首行的缩进
- 通过负值设置logo文本的隐藏
- 只能设置于块级标签
- text-transform（控制文本的大小写）
- white-space（如何处理元素中的空白）
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
- word-spacing（单词间距，只对英文单词有效）
word-spacing:25px;
- word-break（自动换行）
- normal 使用浏览器默认的换行规则，不打断单词显示。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。- word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了
- 打断单词
- word-wrap(允许长单词换行到下一行)
- normal 只在允许的断字点换行（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进行换行。- word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句
- 有继承性
定位模式
- position（元素的定位类型）
static（自动定位，默认值）,没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
absolute（绝对定位）
1、没有父元素，根据body定位
2、有父元素，父元素没定位，根据body定位
3、有父元素，父元素有定位，根据父元素定位变成display:block;但特点和inline-block一样
脱离标准流,包裹性，破坏性，悬浮性
left:50%;margin-left:-width/2;//元素水平居中，垂直居中类似
left:0;top:0;right:0;bottom:0;margin: auto//水平垂直居中
clip（剪裁绝对定位元素）
img { position:absolute; clip:rect(0px,60px,200px,0px); }relative（相对定位）,相对自身，保留原来位置
- 相对于其原文档流的位置进行定位，在文档流中的位置仍然保留
fixed（固定定位）
- 相对于浏览器窗口进行定位，不管浏览器滚动条如何滚动，也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。也脱离标准流
- bottom（底部偏移量）
- top（顶端偏移量），共存是权限比bottom高
- right（右侧偏移量）
- left（左侧偏移量），共存是权限比bottom高
- z-index(可继承)
- 默认是0，可以负值，值高遮挡值低的
- 仅能在定位元素上奏效（非static），元素可拥有负的 z-index 属性值。默认的 z-index 是 0。Z-index -1 拥有更低的优先级。z-index较高的元素会遮挡z-index较低的元素
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
- float（浮动）
- 变成display:block;但特点和inline-block一样
- 包裹性，父容器塌陷（保持原样），后面的非浮动元素上来补位
- 行内元素，行内块元素，文字都会环绕在浮动的元素
- 浮动元素顶部对齐
- 单词太长不能环绕
- margin设置负数可以往上走
- 清除浮动
- 父元素设置高度
- overflow:hidden;
- display:table;
- 额外标签法
- 内部标签：会将这个浮动盒子的父盒子高度重新撑开
- 外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子
- clear:both;
.clearfix:after,.clearfix:before{ /*对类名为father父元素应用after伪对象样式*/
display:block;
clear:both;
content:"";
visibility:hidden;
height:0;
line-height: 0;
}
.clearfix {
zoom: 1;//兼容ie6
}
- clear（清除浮动）
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
img
{
float:left;
clear:both;
}
- display
block（块级）
- 独占一行，可以设置行高
inline（行内）
- 一行可以有多个，不可以设置行高
- 上下margin和padding会被忽略
- 左右margin和padding会起作用
- 默认基线对齐
inline-block（行内块）
- 一行可以有多个，可以设置多个
- 默认底部和基线对齐
table（块级表格,使用最少的空间包裹子元素）
不定宽的块级元素水平居中
.wrap{ background:#ccc; display:table; margin:0 auto; }触发BFC，里面的元素不会影响外面，外面的元素不会影响里面
none（元素隐藏，不保留原位置）
- visibility（元素的可见性，可继承）
visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
- overflow（内容溢出元素框时发生的事情）
- visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容- 除了默认值，其它值都会触发BFC
- 超出浮动盒子的内容，不会影响其他浮动的元素
- overflow:hidden;会切割border上的的子盒子部分，不会切割padding里面的部分
- body默认是overflow:auto;
- vertical-align（元素的垂直对齐方式）
- vertail-align:middle;常用与图片与文字对齐
- baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
- cursor（光标的类型（形状），可继承）
span.crosshair {cursor:crosshair;} span.help {cursor:help;} span.wait {cursor:wait;}
