我的CSS基础学习

1.CSS字体
font-family:字体类型,如黑体
font-style字体样式normal默认值, italic斜体,oblique倾斜
font-size:字体大小length
font-weight:字体粗细normal默认值,bold 粗体,bolder特粗,lighter细体,可以是数字
font-size-adjust:是否强制对文本使用同一尺寸
font-stretch:是否横向拉伸变形字体
font-variant:字体大小写normal默认值,small-caps小型的大写字母字体
2.CSS文本
CSS文本功能主要分为三大类:字体,颜色,和文本,主要功能是设置文本的字体,字号,字号,颜色,样式,粗细,间距,阴影,换行,溢出等.
2.1 CSS文本类型
word-spacing词与词之间的间距,设置对象中的单词之间的最小，最大和最佳间隙。

该属性将指定的间隔添加到每个单词(词内不发生)之后,判断是否为单词的依据是单词间是否有空格。

normal 默认值length词之间的距离值,可以是负数
letter-spacing字与字之间的间距normal ,length
line-height文本行高normal默认值,长度值,百分比值,数字
text-indent:文本首行缩进length(用长度值指定文本的缩进),百分比
text-transform文本大小写none默认值,uppercase大写,lowercase小写,capitalize首字大写text-align文本水平对齐方式left 左对齐,center水平居中,right右对齐,justify两端对齐vertical-align文本垂直对齐方式baseline 默认值,sub上标对齐,super下标对齐,bottom行框底端对齐,text-bottom行内文本底端对齐,top顶端对齐,middle 居中对齐, 百分比,长度
white-space设置对象内空格的处理方式。

normal默认值,nowrap空白符合并,换行符忽略,pre 空白符,换行符保留,pre-wrap空白符,换行符保留,pre-line空白符合并,换行符保留
2.2 文本溢出部分处理方式
text-overflow
当块容器<' overflow '> 为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
要使得<' text-overflow '> 属性生效，块容器必须显式定义<' overflow '> 为非visible值，同时显式或者隐式的定义<' width '> 为非auto值，<' white-space '> 为nowrap值。

white-space:nowrap给文本容器设置强制不换行,让元素文本一行内显示
overflow:hidden设置文本溢出时隐藏,可以用width给截取的文本容器设置宽度值
可选值
clip不显示省略标记(...)只是简单的裁切,
ellipsis文本溢出时显示省略标记(...)省略标记插入的位置是最后一个字符
clip：当内联内容溢出块容器时，将溢出部分裁切掉。

2.3文本换行
word-break
设置对象内文本的字内换行行为,
normal 默认值,根据语言规则确定换行方式,中文到边界上的汉字换行,英文从整个单词换行
break-all强行截断英文单词,达到词内换行的效果
keep-all 不应许字断开,如果是中文,把前后标点符号内的一个汉字短语整个换行,英文单词整个换行,如果出现某个英文单词字符长度超过容器边界,后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示
word-wrap(overflow-wrap)
设置或检索当内容超过指定容器的边界时是否断行。

normal：允许内容顶开或溢出指定的容器边界。

break-word：内容将在边界内换行。

如果需要，单词内部允许断行。

CSS3中将<' word-wrap '> 改名为<' overflow-wrap '>；
由于历史原因，当你使用<' overflow-wrap '> 时，最好同时使用<' word-wrap '> 作为备选，作向前兼容。

资料
在CSS里，主要有强制换行和禁止换行。

一、强制换行
1 word-break: break-all; 只对英文起作用，以字母作为换行依据。

2 word-wrap: break-word; 只对英文起作用，以单词作为换行依据。

3 white-space: pre-wrap; 只对中文起作用，强制换行。

word-break:break-all 和word-wrap:break-word 都是能使其容器如DIV的内容自动换行，它们的区别在于：
1、word-break:break-all
假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。

2、word-wrap:break-word
例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。

二、禁止换行
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; 是禁止换行。

overflow:hidden; 是让多出的内容隐藏起来，否则多出的内容会撑破容器。

text-overflow:ellipsis; 让多出的内容以省略号...来表达。

但是这个属性主要用于IE等浏览器，Opera浏览器用-o-text-overflow:ellipsis; 而Firefox浏览器没有这个功能，多出的内容只能隐藏起来。

2.4文本装饰
Text-decoration文本的修饰线none默认值,underline下划线,overline上划线,line-through删除线,blink闪烁线
text-shadow: 0.1em 0.1em 0.3em #333;文本阴影
第一个属性代表水平位移,第二个值表示垂直位移,正值代表偏右或偏下,负值为偏左或者偏上,第三个值表示模糊半径,第四个值表示阴影的颜色,可选,对应盒子模型的阴影box-shadow text-underline-position
设置对象中的下划线的位置。

3.CSS背景
背景主要包含五个属性
background-color:背景颜色
background-images背景图片url背景图片的地址
background-repeat背景图片展示方式repeat 以XY轴同时平铺repeat-x,repeat-y,no-repeat background-attachment背景图片是固定还是滚动scroll随着浏览器滚动而滚动,fixed固定background-position背景图片位置值可以是百分比,数值,或者关键字left等
其他属性
background-origin指定对象的背景图像显示的原点。

background-size指定对象的背景图像位置。

Auto,百分比,数值,cover图片放大铺满容器,contain 保持背景图原比例图片缩放适应整个背景容器
background-clip指定对象的背景图像向外裁剪的区域。

Padding-box背景延伸到padding的外边缘,但不会出超出边框范围,border-box默认值,背景图片在边框下,content-box背景仅在内容区域绘制,不会超出padding和边框的范围
4.CSS边框
主要包括三个类型值
border-width边框的粗细
border-color 边框颜色
border-style边框类型
可以合并在一起
border border -width border-style border-color
边框类型比如solid实线边框,dashed虚线边框
其他属性
border-imagine图片边框
属性细分
border-imagine-source引入背景图片
border-imagine-slice切割引入背景图片
border-imagine-width边框图片宽度
border-image-outset 设置或检索对象的边框背景图的扩展。

border-imagine-repeat背景图片排列方式stretch拉伸(默认值) ,repeat重复,round平铺border-radius圆角边框数值
box-shadow盒子阴影
有关表格的两个属性
border-collapse：separate 边框独立
| collapse相邻边被合并
border-spacing：<length>{1,2}用长度值来定义行和单元格的边框在横向和纵向上的间距。

不允许负值
5.内外补白
检索或设置对象四边的内(padding)外(margin)部边距。

margin/padding：[ <length> | <percentage> | auto ]{1,4}
相关属性：[ margin-top ] || [ margin-right ] || [ margin-bottom ] || [ margin-left ]
相关属性：[ padding-top ] || [ padding-right ] || [ padding-bottom ] || [ padding-left ]
6.尺寸
width
检索或设置对象的宽度。

width：<length> | <percentage> | auto
默认值：auto
适用于：除非置换内联元素，table-row, table-row-group之外的所有元素
取值：
auto：
无特定宽度值，取决于其它属性值
<length>：
用长度值来定义宽度。

不允许负值
<percentage>：
用百分比来定义宽度。

百分比参照包含块宽度。

不允许负值
扩展：min-width，max-width
height
检索或设置对象的高度
height：<length> | <percentage> | auto
默认值：auto
适用于：除非置换内联元素，table-column, table-column-group之外的所有元素
取值：
auto：
无特定高度值，取决于其它属性值
<length>：
用长度值来定义高度。

不允许负值
<percentage>：
用百分比来定义高度。

不允许负值
扩展：min-height,max-height
7.定位
position
检索对象的定位方式。

position：static | relative | absolute | fixed | center | page | sticky
默认值：static
适用于：除display属性定义为table-column-group | table-column之外的所有元素
取值：
static：对象遵循常规流。

此时4个定位偏移属性不会被应用。

relative：对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。

absolute：对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。

盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

fixed：与absolute一致，但偏移定位是以窗口为参考。

当出现滚动条时，对象不会随着滚动。

center：与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。

盒子在其包含容器垂直水平居中。

（CSS3）
page：与absolute一致。

元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。

（CSS3）
sticky：对象在常态时遵循常规流。

它就像是relative和fixed的合体，当在屏幕中时按
常规流排版，当卷动到屏幕外时则表现如fixed。

该属性的表现是现实中你见到的吸附效果。

（CSS3）
当position的值为非static时，其层叠级别通过z-index属性定义。

z-index
检索或设置对象的层叠顺序。

z-index: auto | <integer>
默认值：auto
适用于：定位元素。

即定义了position为非static的元素
取值：
auto：元素在当前层叠上下文中的层叠级别是0。

元素不会创建新的局部层叠上下文，除非它是根元素。

<integer>：用整数值来定义堆叠级别。

可以为负值。

top
检索或设置对象参照相对物顶边界向下偏移位置。

top: auto | <length> | <percentage>
默认值：auto
适用于：定位元素。

即定义了position为非static的元素
Right
检索或设置对象参照相对物右边界向左偏移位置。

right：auto | <length> | <percentage>
默认值：auto
适用于：定位元素。

即定义了<' position '> 为「非static」的元素
Bottom
检索或设置对象参照相对物底边界向上偏移位置。

bottom: auto | <length> | <percentage>
默认值：auto
适用于：定位元素。

即定义了<' position '> 为「非static」的元素
Left
检索或设置对象参照相对物左边界向右偏移位置。

left: auto | <length> | <percentage>
默认值：auto
适用于：定位元素。

即定义了<' position '> 为「非static」的元素
clip
检索或设置对象的可视区域。

区域外的部分是透明的。

clip：auto | <shape>
<shape>：rect(<number>|auto <number>|auto <number>|auto <number>|auto) 默认值：auto
适用于：绝对定位元素
8.布局
float(关键属性)
该属性的值指出了对象是否及如何浮动
float：none | left | right
默认值：none
适用于：所有元素
取值：
none：设置对象不浮动
left：设置对象浮在左边
right：设置对象浮在右边
float在绝对定位和display为none时不生效。

clear
该属性的值指出了不允许有浮动对象的边。

clear：none | left | right | both
默认值：none
适用于：块级元素
取值：
none：允许两边都可以有浮动对象
both：不允许有浮动对象
left：不允许左边有浮动对象
right：不允许右边有浮动对象
9.
display
设置或检索对象是否及如何显示。

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline
适用于：所有元素
取值：
none：隐藏对象。

与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。

block：指定对象为块元素。

list-item：指定对象为列表项目。

inline-block：指定对象为内联块元素。

（CSS2）
table：指定对象作为块元素级的表格。

类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。

类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。

类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。

类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。

类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。

类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。

类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。

类同于html标签<colgroup>（CSS2）table-header-group：指定对象作为表格标题组。

类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。

类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。

（CSS3）
box：将对象作为弹性伸缩盒显示。

（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。

（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。

（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。

（伸缩盒过渡版本）（CSS3）flex：将对象作为弹性伸缩盒显示。

（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。

（伸缩盒最新版本）（CSS3）
如果display设置为none，float及position属性定义将不生效；
visibility
设置或检索是否显示对象。

与display属性不同，此属性为隐藏的对象保留其占据的物理空间
visibility：visible | hidden | collapse
默认值：visible
适用于：所有元素
取值：
visible：
设置对象可视
hidden：
设置对象隐藏
collapse：
主要用来隐藏表格的行或列。

隐藏的行或列能够被其他内容使用。

对于表格外的其他对象，其作用等同于hidden。

overflow
复合属性。

检索或设置对象处理溢出内容的方式。

参阅overflow-x、overflow-y属性overflow的效果等同于overflow-x + overflow-y。

overflow：<overflow-style>
取值：
visible：
对溢出内容不做处理，内容可能会超出容器。

hidden：
隐藏溢出容器的内容且不出现滚动条。

scroll：
隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。

auto：
当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。

此为body对象和textarea的默认值。

.....
overflow-x和overflow-y分别定义水平和垂直方向内容溢出的剪切，属性与overflow相同9.列表（List）
属性版本取值描述
list-style CSS1 复合属性复合属性。

设置列表项目相关内容
list-style-image CSS1 none | <url>设置或检索作为对象的列表项标记的图像
list-style-position CSS1 outside|inside 设置或检索作为对象的列表项标记如何根据文本排列
list-style-type CSS1/2 disc：
实心圆(CSS1)
circle：
空心圆(CSS1)
square：
实心方块(CSS1)
decimal：
阿拉伯数字
设置或检索对象的列表项所使用的预设标记
属性版本取值描述
(CSS1)…
紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性
10.表格（Table）
属性版本取值描述
table-layout CSS2auto | fixed设置或检索表格的布局算法
border-collapse CSS2separate：
边框独立
collapse：
相邻边被合并
设置或检索表格的行和单元格的边是合并在一起还
是按照标准的HTML样式分开
border-spacing CSS2<LENGTH>{1,2} 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距
caption-side CSS2top | bottom设置或检索表格的caption对象是在表格的那一边
empty-cells CSS2hide| show 设置或检索当表格的单元格无内容时，是否显示该单元格的边框
紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性
11.用户界面
用户界面User Interface
属性取值取值描述
appearance CSS3none | button | button-bevel ...设置或检索外观按照本地默认样式
text-overflow CSS3clip | ellipsis 当块容器overflow为非visible时，定义内联内容溢出其块容器是否截断或者添加(...)及自定义字符
outline CSS2复合属性复合属性。

设置或检索对象外的线条轮廓
outline-width CSS2<length> | thin | medium | thick 设置或检索对象外的线条轮廓的宽度
outline-style CSS2none | dotted | dashed | solid | double |
groove | ridge | inset | outset
设置或检索对象外的线
条轮廓的样式
outline-color CSS2<color> | invert 设置或检索对象外的线条轮廓的颜色
outline-offset CSS3<length>设置或检索对象外的线条轮廓偏移位置的数值
nav-index CSS3auto | <number>设置或检索对象的导航顺序。

nav-up CSS3auto | <id> [ current | root |
<target-name> ]?
设置或检索对象的导航
方向。

nav-right CSS3auto | <id> [ current | root |
<target-name> ]?
设置或检索对象的导航
方向。

nav-down CSS3auto | <id> [ current | root |
<target-name> ]?
设置或检索对象的导航
方向。

nav-left CSS3auto | <id> [ current | root |
<target-name> ]?
设置或检索对象的导航
方向。

cursor CSS2auto | default | none |….设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

zoom CSS3normal | <number> | <percentage>设置或检索对象的缩放比例。

box-sizing CSS3content-box | border-box 设置或检索对象的盒模型组成模式。

resize CSS3none | both | horizontal | vertical设置或检索对象的区域
是否允许用户缩放，调节元素尺寸大小。

ime-mode CSS3auto | normal | active | inactive |
disabled
设置或检索是否允许用
户激活输入中文，韩文，
日文等的输入法（IME）
状态。

user-select CSS3none | text | all | element 设置或检索是否允许用户选中文本。

pointer-events CSS3auto | none | visiblepainted | visiblefill |
visiblestroke | visible | painted | fill |
stroke | all
设置或检索在何时成为
属性事件的target。

紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性
12.常用的选择符
12.1 元素选择器
12.1.1类型选择器(E)
h1 {
font-size: 20px;
}
12.1.2 ID选择器(E#id)
<style>
#subtitle {
font-size: 20px;
}
p#content {
font-size: 13px;
}
</style>
</head>
<body>
<h1 id="subtitle">标题</h1>
<p id="content">正文内容</p>
</body>
12.1.3类选择器(E.class)
<style>
.title {
font-size: 20px;
}
p.content {
font-size: 13px;
}
.content.note {
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="title">标题</h1>
<p class="content">正文内容</p>
<p class="content note">多类选择符的使用</p> </body>
扩展:元素选择符还包括通配选择器(*) 12.2关系选择器
12.2.1 包含选择符(E F)
<style>
/* 包含选择符(E F) */
.demo div { border:1px solid #f00; }
/* 子选择符(E>F) */
.demo > div { border:1px solid #f00; }
</style>
<div class="demo">
<div>0
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</div>
此例，如果是包含选择符，那么0, 1, 2, 3 都有边框；如果是子选择符，那么只有0 有边框，即只有子元素会被命中；
与子选择符(E>F)不同的是，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子...
12.2.2 子选择符(E>F)
.demo > div {
position: relative;
}
<div class="demo">
<div class="a">
<div class="b">子选择符</div>
</div>
</div>
此例只有.a 会被命中，因为它是.demo 的子元素；
与包含选择符(E F)不同的是，子选择符只能命中子元素，而不能命中孙辈。

扩展:关系选择符还还包括相邻选择符(E+F)及CSS3才有的兄弟选择符(E~F)
12.3伪类选择符
选择符版本描述
E:link CSS1设置超链接a在未被访问前的样式。

E:visited CSS1设置超链接a在其链接地址已被访问过时的样式。

E:hover CSS1/2设置元素在其鼠标悬停时的样式。

E:active CSS1/2设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。

E:focus CSS1/2设置元素在成为输入焦点（该元素的onfocus 事件发生）时的样式。

E:lang(fr)CSS2匹配使用特殊语言的E元素。

E:not(s)CSS3匹配不含有s选择符的元素E。

E:root CSS3匹配E元素在文档的根元素。

E:first-child CSS2匹配父元素的第一个子元素E。

E:last-child CSS3匹配父元素的最后一个子元素E。

E:only-child CSS3匹配父元素仅有的一个子元素E。

E:nth-child(n)CSS3匹配父元素的第n个子元素E。

E:nth-last-child(n)CSS3匹配父元素的倒数第n个子元素E。

E:first-of-type CSS3匹配同类型中的第一个同级兄弟元素E。

E:last-of-type CSS3匹配同类型中的最后一个同级兄弟元素E。

E:only-of-type CSS3匹配同类型中的唯一的一个同级兄弟元素E。

E:nth-of-type(n)CSS3匹配同类型中的第n个同级兄弟元素E。

E:nth-last-of-type(n)CSS3匹配同类型中的倒数第n个同级兄弟元素E。

E:empty CSS3匹配没有任何子元素（包括text节点）的元素E。

E:checked CSS3匹配用户界面上处于选中状态的元素E。

(用于input type为radio与checkbox时)
E:enabled CSS3匹配用户界面上处于可用状态的元素E。

E:disabled CSS3匹配用户界面上处于禁用状态的元素E。

E:target CSS3匹配相关URL指向的E元素。

@page:first CSS2设置页面容器第一页使用的样式。

仅用于@page规则
@page:left CSS2设置页面容器位于装订线左边的所有页面使用的样式。

仅用于@page规则
@page:right CSS2设置页面容器位于装订线右边的所有页面使用的样式。

仅用于@page规则
紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性,其他色为原有属性
扩展:选择符还包括Css3新增的伪对象选择器,及不做介绍的属性选择器
13.语法与规则
Rules and Syntax
名称版本描述
!important CSS1提升指定样式条目的应用优先权。

/*comment*/CSS1CSS中的注释/* 这里是注释内容*/
@import CSS1/3指定导入的外部样式表及目标媒体。

该规则必须在样式表头部最先声明
@charset CSS2在外部样式表文件内使用。

指定该样式表使用的字符编码。

@media CSS2/3指定样式表规则用于指定的媒体类型和条件。

@font-face CSS3设置嵌入HTML文档的OpenType字体。

@page CSS2设置页面容器的版式，方向，边空等。

@keyframes CSS3指定动画名称和动画效果。

@supports CSS3检测是否支持某特性。

紫色链接表示该属性在CSS3有修改或者增加了新的属性值；橙色链接表示该属性是CSS3新增属性
14.CSS盒模型
box-sizingbox-sizing：content-box W3C标准盒模型| border-boxIE传统盒模型
浏览器把每一个元素看做一个盒模型，每一个盒模型是由以下几个属性组合所决定的，display,position,float,width,height,margin,padding,border等,不同的盒模型会产生不同的布局顺序问题
比如padding样式合并的顺序上右下左
网址:/
15设置DIV半透明CSS代码
div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}
说明：
1、filter：对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认
2、-moz-opacity：对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50%
3、opacity：对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明。