css样式及盒子属性

一、文本与字体属性
1.字体段落相关属性
color:字体颜色
十六进制值-如"# FFO000
一个RGB值_"RGB (255,0.0)"
颜色的名称-如"#red"
font-size: 指定字体大小 -14px
text-align:对齐方式
 left: 把文本排列到左边。默认值: 由浏览器决定
 right: 把文本排列到右边。
 center: 把文本排列到中间
 justify: 实现两端对齐文本效果
· inherit: 规定应该从父元素继承 text-align 属性的值line-height: 文本行高
 normal: 默认。设置合理的行间距
· number: 设置数字，此数字会与当前的字体尺寸相乘来设置行间距.
 length: 设置固定的行间距。
 %: 基于当前字体尺寸的百分比行间距
· inherit: 规定应该从父元素继承 line-height 属性的值.

--- 实现垂直居中 (行高 = 盒子高)
list-style: li样式
 none 取消默认样式

text-indent: 文本缩进
 length: 定义固定的缩进
%:基于父元素宽度的百分比缩进
 inherit: 规定从父元素集成 text-indent 属性的值
text-decoration: 设置或删除文本的装饰
none: 定义标准文本
 underline: 定义文本下的一条线
 overline: 定义文本上的一条线
 line-through: 定义穿过文本下的一条线
 blink: 定义闪烁的文本
 inherit: 规定应该从父元素继承 text-decoration 属性的值 

1 /*关键值*/
2 text-decoration: none; /*没有文本装饰*/
3 text-decoration: underline red; /*红色下划线*/
4 text-decoration: underline wavy red; /*红色波浪形下划线*/
5
6 /*全局值*/
7 text-decoration: inherit;
8 text-decoration: initial;
9 text-decoration: unset;

 text-transform: 文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母
可用于所有字句变成大写或小写字母，或每个单词的首字母大写
 none: 默认。定义带有小写字母和大写字母的标准的文本。
 capitalize: 文本中的每个单词以大写字母开头。
 uppercase: 定义仅有大写字母
· lowercase: 定义无大写字母，仅有小写字母
inherit: 规定应该从父元素继承 text-transform 属性的值。
word-spacing/letter-spacing: 文本间隔
normal: 默认。定义单词间的标准空间。
 length: 定义单间的固定空间。
 inherit: 规定应该从父元素继承 word-spacing 属性的值
区别: word-spacing针对中文字、英文单词生效; letter-spacing针对中文字和英文字母生效.white-space: 指定元素内的空白怎样处理
 normal: 默认。空白会被浏览器忽略
 pre: 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签.
 nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
 pre-wrap: 保留空白符序列，但是正常地进行换行。
 pre-line: 合并空白符序列，但是保留换行符
inherit: 规定应该从父元素继承 white-space 属性的值

 2. bacground：背景

css1属性:
background-color 背景颜色
background-image 背景图片
background-repeat 背景图片水平或垂直平铺或重复background-attachment 背景图像是否固定或者随着页面的其余部分滚动background-position 改变图像在背景中的位置

1 当使用简写属性时，属性值的顺序为：
2 body {background:#ffffff url('img_tree.png') no-repeat right top;}
3 background-color
4 background-image
5 background-repeat
6 background-attachment
7 background-position

 css3 新增属性
background-size 背景图片大小
 background-origin 指定背景图像的定位区域background-clip 指定背景图像的绘画区域

3. 行内元素和块级元素和行内块元素

使用display：block；可以将元素转换为块级元素

使用display：inline；可以将元素转换为行内元素，将元素转换为行内元素的不多见

使用display：inline-block；可以将元素转换为行内块元素

4. 元素的隐藏

使用display：none；可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样

使用visibility：hidden；也可以将元素隐藏，但是元素不放弃自己的位置

二、盒子模型

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型 (Box Model)：

 

 

Margin（外边距） - 清除边框区域。Margin 没有背景颜色，它是完全透明 Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响 Content（内容） - 盒子的内容，显示文本和图像 width：盒子宽度 height：盒子高度

 width属性 width属性表示盒子内容的宽度

width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位

当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

 height属性 height属性表示盒子内容的高度

height属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位

盒子的height属性如果不设置的话，它将自动被内容撑开，如果没有内容，默认是0

border属性

border: 宽度 样式 颜色;

1 .box{
2 width:0;
3 height:0;
4 border:20px solid blue;
5 }

padding属性

padding属性是盒子的内边距，即盒子边框内壁到文字的距离

padding属性可以使用固定数值或百分比进行赋值，但不能使用负值

padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding

padding属性如果用数值以空格隔开进行设置，分别表示 上、左右、下的padding

padding属性如果要用二个数值以空格隔开进行设置，分别表示上下、左右的padding

padding: 10px; /* 上下左右均为10px*/
2 padding: 10px 20px; /*上下10px 左右20px*/
3 padding: 10px 20px 30px; /*上10px 左右20ox 下30px；*/
4 padding: 10px 20px 30px 40px; /*上10px 右20px 下30px 左 40px*/
5
6 /*也可以使用小属性定义*/
7 padding-left、padding-right、paddinng-top、padding-bottom；

 margin属性

margin是盒子的外边距，即盒子与其他盒子的距离

定义规则类似于padding

margin塌陷问题

1 竖直方向的margin有塌陷的现象：小的margin会塌陷到大的margin中，从而margin不叠加，只以大值为准