目录
文本样式
text-transform
可以用来设置文本的大小写
可选值：
none，默认值，不做任何处理
capitalize，单词首字母大写，通过空格来识别单词
uppercase，所有字母都大写
lowercase，所有字母都小写
text-decoration
可以用来设置文本的修饰
可选值：
none，默认值，不做任何修饰
underline，为文本添加下划线
overline，为文本添加上划线
line-through，为文本添加删除线
letter-spacing
可以指定字符间距
word-spacing
可以设置单词之间的距离（实际上就是设置词与词之间空格的大小）
text-align
用于设置文本的对齐方式（通过调整文本之间的空格大小，来达到一个对齐的效果）
可选值：
left，默认值，文本靠左对齐
right，文本靠右对齐
center，文本居中
justify，两端对齐
text-indent
用来设置首行缩进
p{
text-indent:2em;/*缩进两个字*/
}当它指定一个正值时，会自动向右侧缩进指定的像素。
如果为它指定一个负值，则会向左缩进指定的像素。通过这种方式可以将一些不想显示的文字隐藏起来。
盒子模型
CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里。我们只需要将相应的盒子摆放到网页中相应的位置即可完成网页布局。
一个盒子分成四个部分：
内容区（content）
内边框（padding）
边框（border）
外边框（margin）
边框
要为元素设置边框必须指定三个样式（三个样式缺一不可）
border-width:边框的宽度
（使用border-width可以分别指定四个边框的宽度）
div{
border-width:10px 20px 30px 40px;
}如果在border-width指定了四个值，则四个值分别设置给上 右 左 下，按顺时针方向设置。
如果指定三个值，则三个值分别设置给上 左右 下。
如果指定两个值，则两个值分别设置给上下 左右。
除了border-width，CSS还提供了四个border-xxx-width（xxx可以是top、right、bottom、left）专门用来设置指定宽度。
border-color:边框的颜色（规则与width一样）
border-style:边框的样式（规则与width一样）
边框样式可选值：
none，默认值，没有边框
solid，实线
dotted，点状
dashed，虚线
double，双线
边框简写属性
大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值是none。
border----边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色。而且没有任何顺序要求。（border一指定就是同时指定四个边，不能分别指定）
border-xxx可以单独设置四个边的样式，规则和border一样，只不过只对一个边生效。
内边距
内边距指的是盒子内容区与盒子边框之间的距离。
一共有四个方向的内边距，可以通过：
padding-top
padding-right
padding-bottom
padding-left
来设置四个方向的内边距
内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。
盒子的大小由内容区、内边距和边框共同决定。
盒子可见框的宽度=border-left-width + padding-left + width + padding-right + border-right-width
可见框的高度=border-top-width + padding-top + height + padding-bottom + border-bottom-width
使用padding可以同时设置四个边框的样式，规则和border-width一致。
外边距
外边距指的是盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置。
盒子有四个方向的外边距：
margin-top
margin-right
margin-bottom
margin-left
由于页面中的元素都是靠左摆放的，所以注意当我门设置上和左外边距时，会导致盒子自身位置发生该变，而如果是设置右和下外边距会改变其他盒子的位置。
外边距也可以指定为一个负值，如果设置负值，则元素会向反方向移动。
margin可以设置为auto，auto一般只设置给水平方向的margin。如果只指定左外边距或右外边距的margin为auto，则会将外边距设置为最大值。垂直方向设置auto，则为默认为0。
如果将left和right同时设置auto，则会将两侧的外边距设置为相同的值，即使元素自动在父元素中居中。
外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距。（规则和padding一样）
垂直外边距的重叠
在网页中垂直相邻外边距会发生外边距的重叠。所谓的外边距重叠指的是兄弟元素之间的相邻垂直的外边距会取最大值而不是和。
如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素。
要解决外边距重叠问题，方法有：
一、只给父元素设置border-top:1px snow none或padding-top:1px，使之不相邻。
二、删除子元素的margin-top，给父元素添加padding-top。（但会影响父元素的可见框）
浏览器默认样式
浏览器为在页面中没有样式时，也可以有一个比较好的显示效果。所以很多的元素都设置了一些默认的margin和padding。
若要删去，可以进行如下操作：
*{
margin:0px；
padding:0px
}内联元素的盒模型
内联元素无法设置width和height
内联元素可以设置内边距，但是垂直方向的内边距不会影响页面的布局
内联元素可以设置边框，但是垂直方向的边框不会影响到页面的布局
内联元素可以设置水平方向的外边距，但水平方向的外边距不会重叠，而是求和
内联元素不支持垂直方向的外边距
display和visibility
通过display样式可以修改元素的类型
可选值：
inline，可以将一个元素作为内联元素显示
block，可以将一个元素作为块元素显示
inline-block，将一个元素转换为一个行内块元素（即使元素具有内联元素和块元素的特点）
none，不显示元素，并且元素不会在页面中继续占有位置
通过visibility样式可以设置元素的隐藏和显示的状态
可选值：
visible，默认值，元素默认在页面显示
hidden，元素会隐藏不显示，但是会继续占有位置
overflow
子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于内容区的大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示。
超出父元素的内容，称为溢出的内容。
父元素默认是将溢出内容在父元素以外显示。
通过overflow可以设置父元素如何处理溢出的内容
可选值：
visible，默认值，不会对溢出内容做任何处理
hidden，溢出的内容会被修剪，不会显示
scroll，会为父元素添加滚动条，通过拖动滚动条查看完整内容（无论是否有溢出内容）
auto，会根据需求自动添加滚动条（需要则添加，不需要则不添加）
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置。我们所创建的元素默认都在文档流中。
元素在文档流中的特点
块元素
1、块元素在文档流中会独占一行，块元素会自上而下排列
2、块元素在文档流中默认宽度是父元素的100%
3、块元素在文档流的高度默认被内容撑开
内联元素
1、内联元素在文档流中只占自身的大小，默认从左向右排列。如果一行中不足以容纳所有的内联元素，则换下一行，继续自左向右
2、在文档流中，内联元素的宽度和高度默认都被内容撑开
浮动
使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面左侧浮动
right，元素会立即脱离文档流，向页面右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），元素会立即脱离文档流。元素脱离文档流以后，它下边的元素会立即向上移动。
元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
浮动的元素不会超过它的兄弟元素，最多一边齐 。
如：
.box1{
width:600px;
height:200px;
background-color:red;
}
.box2{
width:600px;
height:200px;
background-color:yellow;
}
.box3{
width:200px;
height:200px;
background-color:green;
}
若修改HTML中box2与box3的位置，即使box2与box3不为兄弟元素，则：
浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。所以我们可以通过浮动来设置文字环绕图片的效果。
块元素脱离文档流以后，高度和宽度被内容撑开
内联元素脱离文档流以后会变成块元素
高度塌陷问题
在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流。此时，将会导致子元素无法撑起父元素的高度，导致父元素高度塌陷。由于父元素的高度塌陷，父元素以下的所有元素都会向上移动，这样导致页面布局混乱。所以在开发中一定要避免出现高度塌陷问题。
方案一
我们可以将父元素的高度写死，以避免塌陷的问题出现。但是一旦高度写死，父元素的高度将不能适应子元素的高度，所以这种方案不推荐。
方案二
根据W3C标准，在页面中元素都有一个隐含的属性叫Block Formatting Context（BFC）。该属性可以设置打开或者关闭，默认为关闭。
当开启元素的BFC以后，元素将会具有如下特性：
1、父元素的垂直外边距不会与子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的父元素可以包含浮动的子元素
如何开启元素的BFC：
1、设置元素浮动
-使用这种方式开启虽然可以撑开父元素，但是会导致父元素的宽度丢失。而且使用这种方式也会导致下边的元素上移，不能解决问题。
2、设置元素绝对定位
3、设置元素为inline-block
-可以解决下边元素上移的问题，但是也会导致宽度丢失，不推荐使用。
4、将元素的overflow设置为一个非visible的值
-推荐方式：将overflow设置为hidden或auto是副作用最小的开启BFC的方式
但是在IE6以下的浏览器中并不支持BFC，所以这种方式不能兼容IE6。在IE6中虽然没有BFC，但是有另一个隐含的属性叫hasLayout，该属性和BFC类似，所以在IE6浏览器可以通过开启该属性来解决问题。
最好的方法是：直接将元素的zoom设置为1，即zoom:1
zoom表示放大的意思，后边的数值写多少就放大多少倍
最终方案
clear
要清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来实现。
clear可以用来清楚其他浮动元素对当前元素的影响
可选值：
none，默认值，不清楚浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
-清除对它影响最大的那个元素的浮动
清除浮动以后，元素会回到其他元素浮动之前的位置
一
可以直接在高度塌陷的父元素的最后，添加一个空白的div。由于这个div并没有浮动，所以它是可以撑开父元素的高度的。然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用。
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。
二
通过after伪类向元素的最后添加一个空白的块元素，然后对齐清除浮动。这样做和添加一个div的原理一样，可以达到一个相同的效果。而且不会添加多余的div，这是最推荐的方式。
.clearfix:after{
content:"";
display:block;
clear:both;
}但在IE6以下中不支持此方法。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
