HTML5+CSS3学习笔记（四）

浮动

使用浮动可以使一个元素向其父元素的左侧或右侧移动
使用float属性来设置元素的浮动
可选值：
none，默认值，不移动
left，元素向左移动
right，元素向右移动
注意：1.设置浮动以后，水平布局的等式不需要强制成立。
           2.元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置
           3.浮动元素不会盖住其它浮动元素
           4.如果浮动元素上边是没有浮动的块元素，则不会向上浮动
           5.浮动元素无法超过它前一个浮动的兄弟元素
           6.文字会自动环绕浮动的块元素
           7.元素浮动以后，一些特点也会发生变化，例如块元素宽度不再是一行变为最小，行内元素也可以设置宽高，不需要再区分行内元素和块元素

高度塌陷

在浮动布局中，父元素的高度是被子元素撑开的，若子元素浮动脱离文档流，则父元素将没有高度，子元素溢出。
父元素高度塌陷后，下面的元素会向上走
高度塌陷是浮动布局中常见的问题

BFC

BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开始BFC后的元素会变成一个独立的布局区域。
元素开启BFC的特点：
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的父元素与子元素的外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
可以通过一些特殊方式开启元素的BFC：
1.设置元素浮动 float
2.将元素设置为行内块元素 display:inline-block (这两种方式会使宽度丢失）
3.overflow:auto/hidden(只要不是visible) （比较好的方式)
4.使用after

.box1{
	content:'';
	dispaly:block;
	clear:both
}

clear

可以用clear清楚浮动元素对自身的影响
clear:left/right/both
原理：会为元素添加一个上外边距，清除影响

定位

定位是一种更高级的布局手段
通过定位可以将元素放到页面的任意位置
使用position属性选择定位方式
可选值：

1. static，默认值，元素是静止的没有开启定位
2. relative，相对定位
3. absolute，绝对定位
4. fixed，固定定位
5. stiky，粘滞定位

相对定位

使用position:relative开启相对定位

1. 通过设置偏移量，将元素位置变化，偏移量有：top,right,left,bottom
2. 可以提升元素的层级，但不会脱离原文档流
3. 行内还是行内，块还是块，不会改变元素性质

绝对定位

使用position:absolute开启绝对定位

1. 绝对定位会使元素从文档流中脱离，会使元素提升一个层级
2. 绝对定位会使行内元素变为块元素，宽高被内容撑开
3. 绝对定位是相对于其包含块进行定位，包含块是离他最近的开启定位的祖先元素

固定定位

使用position:fixed开启固定定位
相对于视口进行定位

元素的层级

对于开启了定位的元素，可以设置元素层级z-index，元素层级越高，就越优先显示
祖先元素的层级再高也不会高于后代元素

字体

字体相关样式：
color:设置字体颜色
大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD
样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高 {line-height: normal;}(正常) 单位：PX、PD、EM //设置行高可以使字体居中
粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)
大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体{font-family: “Microsoft YaHei”}(微软雅黑),“MicrosoftJhengHei”(华文细黑), “STHeiti”,
“MingLiu”,“Courier New”, “Courier, monospace”, “Times New Roman”, “Times”, “serif”, “Arial”,
“Helvetica”, “sans-serif”," Verdana"

文本的水平和垂直对齐

水平对齐

text-align:
left，默认，左侧对齐
right，右侧对齐
center，居中对齐
justify，两端对齐

垂直对齐

vertical-align:
baseline：默认值，基线对齐
top：顶部对齐
bottom：底部对齐
middle：居中对齐