CSS笔记整理3 -- CSS样式属性 与 盒子模型

CSS属性值中的 单位

绝对单位

• 英寸in：1in=2.54cm
• 厘米cm
• 毫米mm
• 磅（点）pt：12pt=1/6in、1pt=1/72in
• pica（皮卡）pc：1pc=12pt

相对单位

1. em：表示元素的字体高度。根据font-size属性值大小来确定单位的大小，例如font-size=12px;line-height=2em;即line-height为24px。
2. ex：表示元素使用的字体中小写字母的x的高度作为参考。
3. px：表示根据屏幕像素点来确定。
4. 百分比%：通过另一个值来进行计算；一般参考父元素中相同属性的值。

<br/ >

CSS光标样式——光标属性cursor

：规定要显示的光标的类型(形状)。
取值：
1. pointer：手指
2.progress：预加载

CSS字体样式——字体属性font

font是复合属性，一次完成多个字体属性的设置，包括字体粗细、风格、字体变体、大小/行高及字体名称。

格式：font:font-style font-weight font-varisnt font-size/line-height font-family;

• 规则注意：前三个属性可以不分先后顺序，默认为normal。大小size和字体family必须显式指定，先设置大小，再设置字体。

子属性如下：

1. font-style：设置字体的风格
   取值：
   (1)normal不使用斜体（默认）
   (2)italic使用斜体显示文字
   (3)oblique使用倾斜字体显示。

2. font-weight：设置文本字体的粗细
   取值：
   (1)normal正常（默认）
   (2)bold标准的粗体
   (3)bolder特粗体
   (4)lighter细体
   (5)整数100、200、…、900 ：表示粗细程度；100为最细，400相当于normal，700相当于bold…

3. font-varisnt：设置字体变体，主要用于设置英文字体，实际上时设置文本字体是否为小型的大写字母。
   取值：
   (1)normal正常字体（默认）
   (2)small-caps使用小型的大写字母字体

4. font-size：设置字体大小
   取值：
   (1)绝对大小
   (2)相对大小
   (3)xx-small
   (4)x-small
   (5)small
   (6)medium
   (7)large
   (8)x-large
   (9)xx-large

5. font-family：设置字体
   说明：属性值为多个字体名称时，是可以使用逗号,分隔。浏览器一次查找字体，只要存在就使用该字体，不存在就会继续找下去，直到最后字体，仍不存在则使用默认宋体。
   注意 ：如果字体名中出现空格，必须使用双引号将字体括起来。
   取值：宋体、黑体、隶书 …
   
   

CSS文本样式

字符间距 letter-spacing 属性

：设置字符与字符之间的距离。对中文、英文字符均起作用，主要针对英文单词。

取值：
(1)normal默认间距
(2)长度单位（一般正数，负数取决于浏览器是否支持）

行距 line-height 属性

：设置行与行之间的距离。

取值：
(1)normal默认行高
(2)长度单位–绝对单位、相对单位（浮点数，允许负数）、百分比单位（基于字体高度）

首行缩进 text-indent 属性

：设置首行缩进量。

取值：长度单位–绝对单位、相对单位、百分比单位。

• 一般用em，即2em相当于4个 。

字符装饰 text-decoration 属性

：用来完成文字加上划线、下划线、删除线等效果。

取值：
(1)none文字无装饰
(2)underline文字加下划线
(3)overline文字加上划线
(4)line-through文字加删除线

英文大小写转换 text-transform 属性

：利用该属性以转换英文大小写。

取值：
(1)none不转换
(2)uppercase转换成大写
(3)lowercase转换成小写
(4)capitalize将每个单词的第一个字母转换成大写，其余不转换。

水平对齐 text-aline 属性

：规定元素的水平对齐方式。

取值：
(1)left左对齐（默认）
(2)right右对齐
(3)center居中
(4)justify两端对齐

垂直对齐 vertical-aline 属性

：设置元素的垂直对齐方式。

取值：
(1)top把此元素顶端与行中最高元素的顶端对齐
(2)middle把此元素放在父元素的中部
(3)bottom把此元素顶端与行中最低元素的顶端对齐
(4)text-top把此元素顶端与父元素字体的顶端对齐
(5)text-bottom把此元素底端与父元素字体的底端对齐

CSS颜色属性 color

：设置元素字体的色彩。

取值方式：
(1)颜色名称：black、white、red、yellow、lime、Aqua、blue、fuchsia、gray、silver、Maroon、olive、green、teal
(2)rgb函数（整数 | 百分数）：rgb(r,g,b) | rgb(r%,g%,b%)
(3)十六进制数：#rbg、#rrggbb，例子如下：
#FF0000 红色
#00FF00 绿色 #001100 绿色 #002200 绿色
#000000 黑色
#FFFFFF 白色
#555555 灰色 #121212 灰色 #5c5c5c 灰色
#A503F5 由A5的红，03的绿，F5的蓝组成的颜色

关于颜色百分比
rgba(红色值,绿色值,蓝色值,透明度百分比 其最大值为1即不透明)

光的颜色有很多，所有的光线都是由三种基本的光线组成，分别是红（Red）绿（Green）蓝（Blue），网站的图片都是RGB模式，也就是说网页图片中任何一个颜色都由这三种颜色构成。

• 每个颜色的色值范围是0-255；
  
  

背景属性 background

：设置指定元素（标记）的背景色彩、背景图案等。

background是复合属性，可以一次完成背景颜色、图像、重复、位置和附件的设置。

子属性如下：

1. background-color：设置背景颜色；
   取值：颜色
2. background-image:url("背景图的路径") 设置元素的背景图案；
   取值：
   (1)路径
   (2) none 不用图像作为背景
3. background-repeat：设置背景图的重叠覆盖方式；
   取值：
   (1) no-repeat完全填充元素大小 不重复
   (2)repeat-x在水平方向左至右重复填充元素
   (3)repeat-y在垂直方向上至下重复填充元素
   (4)no-repeat不使用背景图重复填充
4. background-attachment：设置背景图像是否随着滚动条一起滚动；
   取值：
   (1)scroll 在文字页面滚动时，背景附件一起滚动。
   (2)fixed 在文字页面滚动时，背景附件固定不滚动。
5. background-position：设置背景图具体的起始位置；
   规则：需要设置两个参数，且用空格分隔。
   参数1：表示水平位置；参数2：表示垂直位置；
   只设置一个参数，另一个参数自动为50%或居中位置、。

取值：
(1) left | center | right :表示水平方向居左、居中、居右位置。
(2) top | center | bottom :表示垂直方向顶部、中部、底部位置。

(3)x% y%

(4)xpos ypos

最后可以将这些属性合并为background这一个属性。例子如下：

边框阴影box-shadow

• 设置box-shadow
• 例子：box-shadow:5px 5px 5px rgba(22, 50, 80, 0.3);

CSS列表样式属性 list-style

：改变列表符号的样式。

list-style是复合属性。

子属性如下：

1. list-style-type：设置列表类型；
   取值：
   (1)disc 实心圆
   (2)circle 空心圆
   (3)square 实心方块
   (4)decimal 阿拉伯数字
   (5)lower-roman 小写罗马数字
   (6)upper-roman 大写罗马数字
   (7)lower-alpha 小写英文字母
   (8)upper-alpha 大写英文字母
   (9)none 不使用项目符号
2. list-style-image:url(“图像的路径”)：设置列表代替图像；
   取值：
   (1)路径
   (2)none 表示不使用图像样式的列表符号
3. list-style-position：设置图像位置；
   取值：
   (1)outside 将标志放在文本之处，任何换行文本在标志下均不对齐（默认）
   (2)inside 将标志放在文本之内，任何换行文本在标志下均对齐

CSS盒模型(BOX)

在网页设计中，每个元素都是长方形的盒子，便产生了特定的盒子模型。

概念

盒子：能存放内容的标记。

• 最大的盒子是html标记。

MBPC模型

：即边界（Margin）、边框（Border）、填充（Padding）、内容（Content）。

边界属性 magin

：即外边界，表示盒子边框与页面边界或其他盒子之间的距离；包含top上、bottom下、left左、right右。

• magin-top
• magin-bottom
• magin-left
• magin-right

取值：长度单位 | 百分比单位 | auto采用默认值
效果：围绕元素边框的空白。

参数规则：
margin:10px;表示上下左右全是10px；
margin:10px,50px;表示第一个参数是上下，第二个参数是左右；
margin:10px,auto,50px;表示第一个参数是上，第二个参数是左右，第三个参数是下；
margin:10px,20px,30px,40px;表示第一个参数是上，第二个参数是右，第三个参数是下，第三个参数是左，即顺时针顺序；

• padding属性的参数规则同理

边框属性 border

：盒子本身有边框，边框有四个，分为top上、bottom下、left左、right右。

• border-top
• border-bottom
• border-left
• border-right

border是复合属性，可以一次设置边框的粗细、样式和颜色。

1. border-style：即边框样式，取值如下…

属性值	说明
none	定义无边框
hidden	与none相同；应用于表时例外，用于解决边框冲突
dotted	定义点状边框
dashed	定义虚线
solid	定义实线
double	定义双线；双线宽度=border-width
groove	定义3D凹槽边框；效果取决于border-color
ridge	定义山脊状边框；效果取决于border-color
inset	定义使页面沉入感边框；效果取决于border-color
outset	定义使页面浮出感边框；效果取决于border-color

• 可以设置上、下、左、右边框的样式，即
  border-top-style
border-bottom-style
border-left-style
border-right-style

2. border-width：即边框宽度；取值长度值、细边框thin、默认宽度medium（默认）、大于默认宽度thick。

• 可以设置上、下、左、右边框宽度，即
  border-top-width
border-bottom-width
border-left-width
border-right-width

3. border-color：即边框颜色，取值颜色。

• 可以设置上、下、左、右边框颜色，即
  border-top-color
border-bottom-color
border-left-color
border-right-color

填充属性 padding

：即内边界，表示元素内容与边框之间的距离；包含top上、bottom下、left左、right右。

• padding-top
• padding-bottom
• padding-left
• padding-right

取值：长度单位 | 百分比单位 | auto采用默认值
效果：包含在元素边框里面并围绕着元素内容的“元素背景”（内空白）。

参数规则：参考margin规则

定位属性position

position有四种，分别是绝对定位absolute，相对定位relative，固定定位fixed，静态定位static。

• 默认是静态定位，按标准流的额方式排列。

设置定位-取值：

• 距离上top
• 距离左left
• 距离右right
• 距离下bottom

绝对定位absolute

特点：

1. 以页面的左上角为原点
2. 不保留原来的位置
3. z-index属性用来调整图层顺序，取值数值

• 实现一个子级元素以父级元素的的左上角为原点。
  方法：父级相对，子级绝对（即在子级绝对的情况下，将父级调成相对）。

相对定位relative

特征：

1. 以原来自身的左上角为原点
2. 保留原来的位置
3. z-index属性用来调整图层顺序

固定定位fixed

将盒子固定在指定位置。
一般应用在广告的显示。

静态定位static

定位的默认是静态定位，按标准流的额方式排列。

浮动属性float

改变块元素（block element）对象的默认显示方式。

• 浮动元素会脱离排队标准流，但是不会脱离文件流。
• 例子：
  

清除属性clear

作用：清除浮动设置的影响。

• 例子：
  

• 但是在清除浮动的同时清除了当前盒子边界的属性，所以使用了clear属性的盒子无法使用margin属性。

clear的实际应用：
clear取值有left，right，both。

• 通常将clear单独写进一个类标记中，设置clear为both，用来清除所有浮动的影响。
  具体使用如下：
  

溢出属性overflow

作用：
1.内容超出指定宽高范围时的处理。
处理：
（1）隐藏hidden：将超出的部分隐藏。
（2）自动auto：如果超出，则自动出现垂直滚动条。

• 当父元素无法确定子元素的高度，盒子里面的内容浮动起来，那么他就脱离标准流了，所以这时候父元素盒子就不能精确地检测到它内部的内容有多高，父元素中就相当于没有元素（父元素成为一条线）完全没有被撑开。
  
  2.解决粘连问题，此时设置overflow:hidden;用于触发盒子的是否是布局属性haslayout，就可以精确检测内部的高度，盒子就会被撑开。
  
• 注意：overflow可以触发除了IE6以外的haslayout属性。为了兼容IE6，在overflow下增加一句zoom:1;可触发IE6 的haslayout属性。

CSS3

动画——过渡属性transition

例1：

div{
		width:200px;
		height:200px;
		background-color: red;
		
		transition:width 2s;/*过渡*/
	}
	div:hover{
		width: 300px;
	}

例2：

<style type="text/css">
	#d1:hover{
	/*-webkit-：浏览器前缀，兼容旧版本浏览器的
		transtion:过度
		Scale(1.5,1.5)缩放
		rotate(45deg)旋转
		translateX(50px)
		translateY(100px)移动 translate(50px,100px)
	*/
		-webkit-transition:3s -webkit-transform;
		-webkit-transform:Scale(1.5,1.5);
	}
	#d2:hover{
		-webkit-transition:3s -webkit-transform;
		-webkit-transform:rotate(45deg);
	}
	#d3:hover{
		-webkit-transition:3s -webkit-transform;
		-webkit-transform:translate(50px,100px)
	}
</style>

例3：多种过渡+效果

div{
		width:100px;
		height:100px;
		background-color: red;
		
		transition:width 2s,height 2s,transform 2s;/*通过逗号实现多种效果*/
	}
	div:hover{
		width:200px;
		height:200px;
		transform:rotate(360deg);/*3D-旋转360度*/
	}

例4：过渡+多种效果

div{
		width:200px;
		height:200px;
		background-color: red;
		
		transition:2s;
	}
	div:hover{
		background-color: green;
		transform:translate(500px,500px) scale(0.5,0.5) rotate(45deg);
	}

例5：动画–当在@keyframes创建动画，把它绑定到一个选择器，否则动画不会有任何效果，指定至少两个CSS3的动画属性绑定一个选择器

<style type="text/css">
	div{
		width:100px;
		height:100px;
		position:relative;/*不脱离文档流的相对定位*/
		background-color: red;
		animation:myfirst 5s infinite;/*绑定选择器*/
		/*动画仅限一次，，，添加infinite表示无限次*/
	}
	@keyframes myfirst{
	/*里面的属性至少有两个*/
		0% {
			background:red;
			left:0px;
			top:0px;
		}
		25% {
			background:blue;
			left:200px;
			top:0px;
		}
		50% {
			background:green;
			left:200px; 
			top:200px;
		}
		75% {
			background:yellow; 
			left:0px; 
			top:200px;
		}
		100%{
			background:red; 
			left:0px; 
			top:0px;
		}
	}
</style>

边框圆角border-radius

边框图片border-image:url()

HTML5新增样式

伪对象选择器

:before在盒子的前面插入（内部的前面）
:after在盒子的后面插入（内部的后面）
content用于插入内容（如果没有内容，content也必须要写content:'';即为空）

• 具体使用如下：
  

注意： input不支持伪元素
参考链接：input不支持伪元素after、before

特殊情况使用

：hover操纵自己包含的子元素以外的元素

• 通过>与+来控制下个元素，子集元素，下个元素的子集元素的CSS

例子如下：

<html>
<body>
<style>
    #a {color : #FFFF00;}
    #a:hover > #b{color : #FF0000;}    
    #a:hover + #c{color : #00FF00;}
    #a:hover + #c > #b{color : #0000FF;}
</style>
<div id='a'>元素1
  <div id='b'>元素2</div>
</div>
<div id='c'>元素3
  <div id='b'>元素2</div>
</div>
</body>
</html>

display设置内容垂直对齐

用display实现内容垂直对齐。

具体使用如下：

• inline-block间距问题
  参考链接:【CSS】inline和inline-block的间距