CSS基础-文本样式、盒模型与高度塌陷

文本样式

 text-decoration: underline

text-decoration: overline;

注：两者同时存在执行后一条，text-decoration: underlineoverline;全部执行，没有顺序

 

text-transform:文本的变形，大小写

注：超链接下划线自带，用text-transform：none

 

字符间距

word-spacing

letter-spacing

 

文本对齐方式

text-align：justify两端对齐

 

首行缩进

text-indent:2em 正负值

 

盒子模型

分为：内边距、内容区、边框、外边距

盒子样式练习：

练习：边框左右上为20px，下为30px

练习：左右上有边框，下无边框

 

内边距

padding: 20px

外边距

margin-left: auto;

margin-right: auto;

显示：左右相同

水平设置哪个auto就是最大

垂直为0

 

浏览器默认样式

正常情况下不用。编写之前去除

*{

                                     margin:0;

                                     padding:0;

                            }

 

内联元素的盒模型

注：

1、不可设置宽和高

2、内联元素可以设置水平、垂直方向的内边距，垂直内边距不会产生

3、内联元素可设置边框

4、外边距只支持水平

 

overflow

子元素超过父元素会在以外显示，溢出

Overflow：处理溢出的内容

 浮动

float: right;

注：

1、  不会超过块元素，父元素

2、  浮动元素会环绕周围，不会被覆盖

3、  块元素脱离文档流之后内容都被撑开 

高度塌陷

BFC：默认关闭。

开启后：

1、  父元素垂直外边距不会和子元素重叠

2、  开启后的不会被浮动元素覆盖

3、  父元素可以包含浮动的子元素

如何开启：

1、  设置元素浮动

2、  元素绝对定位

3、  Inline-block

4、  将元素的overflow设置为非visible的值 注：IE6中的has layout和overflow类似，zoom设置为1即可

 

注：最好两种都写

 解决高度塌陷的最终方案（不熟悉）

二、塌陷的父元素后直接加一个空白的div，然后进行清除浮动

注：会有多余的结构

三、通过after伪类向元素的最后添加一个空白的块元素，然后清除。

.box:after{

Display:block;

Clear:both;

}

注：IE6中

clear-fix：{

Zoom：1；

}