css常用属性

这是自己日常中所常用的属性 现在把他记下来 方便后面记忆 转载时请注明地址谢谢

长度单位
* 像素 px
* - 像素是我们在网页中使用的最多的一个单位，
* 一个像素就相当于我们屏幕中的一个小点，
* 我们的屏幕实际上就是由这些像素点构成的
* 但是这些像素点，是不能直接看见。
* - 不同显示器一个像素的大小也不相同，
* 显示效果越好越清晰，像素就越小，反之像素越大。
* 
* 百分比 %
* - 也可以将单位设置为一个百分比的形式，
* 这样浏览器将会根据其父元素的样式来计算该值
* - 使用百分比的好处是，当父元素的属性值发生变化时，
* 子元素也会按照比例发生改变
* - 在我们创建一个自适应的页面时，经常使用百分比作为单位
* 
* em
* - em和百分比类似，它是相对于当前元素的字体大小来计算的
* - 1em = 1font-size
* - 使用em时，当字体大小发生改变时，em也会随之改变
* - 当设置字体相关的样式时，经常会使用em
*

颜色单位：
* 在CSS可以直接使用颜色的单词来表示不同的颜色
* 红色：red
* 蓝色：blue
* 绿色：green
*   也可以使用RGB值来表示不同的颜色
* - 所谓的RGB值指的是通过Red Green Blue三元色，
* 通过这三种颜色的不同的浓度，来表示出不同的颜色
* - 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
* - 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
* - 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
* 使用百分数最终也会转换为0-255之间的数
* 0%表示0
* 100%表示255
*   也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
* 只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
* 每组表示一个颜色,第一组表示红色的浓度，范围00-ff
* 第二组表示绿色的浓度，范围是00-ff
* 第三组表示蓝色的浓度，范围00-ff
* 语法：#红色绿色蓝色
* 十六进制：
* 0 1 2 3 4 5 6 7 8 9 a b c d e f
* 00 - ff
* 00表示没有，相当于rgb中的0
* ff表示最大，相当于rgb中255
* 红色：
* #ff0000
* 像这种两位两位重复的颜色，可以简写
* 比如：#ff0000 可以写成 #f00
* #abc  #aabbcc
*
*/
/*background-color: rgb(161,187,215);*/

/*background-color: rgb(100%,50%,50%);*/

/*background-color: #00f;*/

/*background-color: #abc;*/ /*#aabbcc*/

字体样式

color: red;设置字体颜色,使用color来设置文字的颜色

font-size：设置文字的大小,浏览器中一般默认的文字大小都是16px，设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的

font-family: "curlz mt";通过font-family可以指定文字的字体

 font-family: serif;在网页中将字体分成5大类：
serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体

line-height：设置行间距的方式

可以接收的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数

/*
* 在font中也可以指定行高
* 在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
*/
font: 30px "微软雅黑";
line-height: 50px;

text-transform可以用来设置文本的大小写
* 可选值：
* none 默认值，该怎么显示就怎么显示，不做任何处理
* capitalize 单词的首字母大写，通过空格来识别单词
* uppercase 所有的字母都大写
* lowercase 所有的字母都小写

text-decoration可以用来设置文本的修饰
* 可选值：
* none：默认值，不添加任何修饰，正常显示
* underline 为文本添加下划线
* overline 为文本添加上划线
* line-through 为文本添加删除线

letter-spacing可以指定字符间距

ord-spacing可以设置单词之间的距离

text-align用于设置文本的对齐方式

* 可选值：
* left 默认值，文本靠左对齐
* right ， 文本靠右对齐
* center ， 文本居中对齐
* justify ， 两端对齐
* - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的

text-indent用来设置首行缩进
* 当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
*  这个值一般都会使用em作为单位

盒子模型：

使用width来设置盒子内容区的宽度
* 使用height来设置盒子内容区的高度
* 
* width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
* 盒子可见框的大小由内容区，内边距和边框共同决定

为元素设置边框
* 要为一个元素设置边框必须指定三个样式
* border-width:边框的宽度
* border-color:边框颜色
* border-style:边框的样式

使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的

如果指定三个值，
则三个值会分别设置给上  左右 下

如果指定两个值，
则两个值会分别设置给 上下 左右

如果指定一个值，则四边全都是该值

除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度

设置边框的样式
* 可选值：
* none，默认值，没有边框
* solid 实线
* dotted 点状边框
* dashed 虚线
* double 双线
* 
* style也可以分别指定四个边的边框样式，规则和width一致，
* 同时它也提供border-xxx-style四个样式，来分别设置四个边

/*
* 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
* 一共有四个方向的内边距，可以通过：
* 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-top: 100px;*/
/*设置右内边距*/
/*padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;*/

/*
* 外边距指的是当前盒子与其他盒子之间的距离，
* 他不会影响可见框的大小，而是会影响到盒子的位置。
* 盒子有四个方向的外边距：
* margin-top
* margin-right
* margin-bottom
* margin-left
* 
* 由于页面中的元素都是靠左靠上摆放的，
* 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
* 而如果是设置右和下外边距会改变其他盒子的位置
*/ 如果外边距设置的是负值，则元素会向反方向移动

margin还可以设置为auto，auto一般只设置给水平方向的margin
* 如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
* 垂直方向外边距如果设置为auto，则外边距默认就是0
* 
* 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
* 就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
* 以使子元素在父元素中水平居中

垂直外边距的重叠
* - 在网页中相邻的垂直方向的外边距会发生外边距的重叠
* 所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
* 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

将一个内联元素变成块元素，
* 通过display样式可以修改元素的类型
* 可选值：
* inline：可以将一个元素作为内联元素显示
* block: 可以将一个元素设置块元素显示
* inline-block：将一个元素转换为行内块元素
* - 可以使一个元素既有行内元素的特点又有块元素的特点
* 既可以设置宽高，又不会独占一行
* none: 不显示元素，并且元素不会在页面中继续占有位置
*/

/*
* display: none;
* 使用该方式隐藏的元素，不会在页面中显示，并且不再占据页面的位置
*/
/*display: none;*/

/*
* visibility
* - 可以用来设置元素的隐藏和显示的状态
* - 可选值：
* visible 默认值，元素默认会在页面显示
* hidden 元素会隐藏不显示
* 
* 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，
* 但是它的位置会依然保持
*/

float: left;

/*

* 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
* 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
* 使用float来使元素浮动，从而脱离文档流
* 可选值：
* none，默认值，元素默认在文档流中排列
* left，元素会立即脱离文档流，向页面的左侧浮动
* right，元素会立即脱离文档流，向页面的右侧浮动
* 
* 当为一个元素设置浮动以后（float属性是一个非none的值），
* 元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
* 元素浮动以后，会尽量向页面的左上或这是右上漂浮，
* 直到遇到父元素的边框或者其他的浮动元素
* 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
* 浮动的元素不会超过他上边的兄弟元素，最多最多一边齐
*/

position: relative;

/*
* 定位：
* - 定位指的就是将指定的元素摆放到页面的任意位置
* 通过定位可以任意的摆放元素
* - 通过position属性来设置元素的定位
* -可选值：
* static：默认值，元素没有开启定位
* relative：开启元素的相对定位
* absolute：开启元素的绝对定位
* fixed：开启元素的固定定位（也是绝对定位的一种）
*/

/*
* 当元素的position属性设置为relative时，则开启了元素的相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
*  2.相对定位是相对于元素在文档流中原来的位置进行定位
* 3.相对定位的元素不会脱离文档流
* 4.相对定位会使元素提升一个层级
* 5.相对定位不会改变元素的性质，块还是块，内联还是内联
*/

/*
* 当开启了元素的定位（position属性值是一个非static的值）时，
* 可以通过left right top bottom四个属性来设置元素的偏移量
* left：元素相对于其定位位置的左侧偏移量
* right：元素相对于其定位位置的右侧偏移量
* top：元素相对于其定位位置的上边的偏移量
* bottom：元素相对于其定位位置下边的偏移量
* 
* 通常偏移量只需要使用两个就可以对一个元素进行定位，
* 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
*/

position: absolute;

/*
* 当position属性值设置为absolute时，则开启了元素的绝对定位
* 
* 绝对定位：
* 1.开启绝对定位，会使元素脱离文档流
* 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
* 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
* 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
* 4.绝对定位会使元素提升一个层级
* 5.绝对定位会改变元素的性质，
* 内联元素变成块元素，
* 块元素的宽度和高度默认都被内容撑开
*/

position: fixed;

/*
* 当元素的position属性设置fixed时，则开启了元素的固定定位
* 固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
* 不同的是：
* 固定定位永远都会相对于浏览器窗口进行定位
* 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
* 
* IE6不支持固定定位
*/