前端学习-css的一些常用属性

css常用属性与解释

文本的属性：
font-family：字体									line-height  行高  行间距
font-size：字号										color：字体颜色
font-weight：字体加粗								text-align：文本对齐方式
font-style: 字体样式 								text-decoration：划线设置
font：文本的复合属性  								text-indent：首行缩进
盒子的属性：			
height：高											border-width:边框的粗细
width：宽											border-style:边框的样式
background-color：背景颜色			                border-color:边框的颜色
background-image: url();背景图片		                border：边框的复合属性
background-repeat: 背景图平铺方式		                padding:内边距的复合元素
background-position:背景图位置						margin:外边距
background：背景复合属性
浮动：
			/* 左浮动 */						/* 右浮动 */
			float: left;					 float: right;

边框和内外边距都有上下左右的属性，大致格式为复合元素+上下左右：；
例：border-top:3px solid red;
且，若想使某方向边框或内边距为无，如下设置即可：
border-top:none;  设置上边框为无	        
left:左  	top:上				                right:右  	bottom:下				      
伪类：
a:link{}：未访问状态						a:visited{}：访问后状态
a:hover{}：鼠标移入状态					a:active{}：鼠标摁下状态
出于隐私，访问后状态只支持颜色的改变
访问的4种状态，当这些状态同时存在时，要按照l,v,h,a顺序设置
一般使用link和hover属性，且link属性可由正常的选择器设置代替

浮动造成的影响：
当元素设置浮动后，如果没有给父盒子设置高度，父盒子会认为盒子内没有内容。父盒子的高度不会被撑开，
此时父盒子的高度就是0,后面的块元素就会跑到浮动元素的下面了

清除浮动造成的影响：
1.给父盒子设置固定高度
2.给父盒子设置overflow:hidden;属性
3.额外标签法：在浮动元素后面添加块元素，并设置clear:both;属性。表示结束之前浮动所造成的影响。
4.给父元素调用clearfix类名称

/* 强制换行 */
word-break: break-all;
/* 强制不换行 */
white-space: nowrap;
/* 字间距 */
letter-spacing: 1em;	

css常用属性

单属性: 一个属性名对应一个属性值

1.font-family：字体

示例：font-family: "微软雅黑";

Chrome的默认字体为微软雅黑

2.font-size：字号

示例：font-size: 16px;

字号单位是px，Chrome默认字号16px

3.font-weight：字体加粗

示例：font-weight:400;

400 normal 正常 默认值
700 bold 加粗

4.font-style: 字体样式

示例：font-style:intalic;

正常：normal
倾斜：intalic

5.line-height 行高 行间距

行高：

示例：line-height:400px;

调整文本在元素中垂直方向的位置
当元素未设置固定高度：在设置行高时会同时为元素设置相同的高度。
文本为单独一行时：
当元素设置固定高度：高度不会随着行高而变化。且：
当行高等于所属元素高度时，文本垂直居中
当行高大于所属元素高度时，文本基于居中位置往下
当行高小于所属元素高度时，文本基于居中位置往上
行高也是关于文本的属性，可以被继承

行间距：

示例：line-height:400px;

行与行之间的间距，设置基线到基线的距离
盒子可看作4条线，上下边线，中线和基线。基线为字体下方的边缘线，可参考英文字母的基线
文本为多行时：
line-height: 500px;
也可以使用其他单位：
line-height: 2em; 两行之间间隔2个字符大小
line-height: 3; 两行之间间隔3倍字符大小

6.font：文本的复合属性 （字号和字体必填）

复合属性:一个属性名对应多个属性值

示例：font:italic  700  30px/300px  "微软雅黑"; 

一般格式为：
font：是否倾斜(默认不倾斜) 是否粗体（默认粗体） 字号/行高（必填） 字体（必填）；
当复合属性和单属性同时存在时,要先写复合属性,再写单属性。否则单属性的值会被复合属性的值层叠
font:italic 700 30px/300px “微软雅黑”;

7.color：字体颜色

示例：color: yellow;
示例：background: red;

设置文本的颜色 ：color: yellow;
设置背景颜色 ：background: red;
颜色样式一般为以下3种:
第一种:用英文单词
: yellow;
第二种:用十进制方式 rgb()
三基色: 红绿蓝,每个颜色的取值范围是0-255之间
: rgb(23,222,12);
第三种:用十六进制方式
:#ffffff;

8.text-align：文本对齐方式

示例：text-align：center;

left(默认)：左对齐
center：居中对齐
right：右对齐
能让元素中的文本、行内元素和行内块元素居中，但是不能让块元素居中
注：块元素虽然没有居中，但块元素中的内容会相对块元素居中，即父元素的属性会被子元素继承

9.text-decoration：划线设置

示例：text-decoration:none;

underline 下划线
overline 上划线
line-throught 删除线
none 无

10.text-indent：首行缩进

示例：text-indent:2em;

px单位：像素单位
em单位：1em=当前标签一个字体的大小

块元素的属性

1.height：高

示例：height:400px;

元素的高度，未在css里设置时高度时，元素的高度为该元素内子元素撑开的高度

2.width：宽

示例：width:400px;	

元素的宽度，未在css里设置时高度时，元素的宽度等于该元素父元素的宽度

3.background-color：背景颜色

示例：background-color:red;	

为盒子设置背景色

4.background-image: url();背景图片

示例：background-image:url(image/case.jpg);	

为盒子设置背景图片

5.background-repeat: 背景图平铺方式

示例：background-repeat:no-repeat;

repeat（默认值）水平垂直铺满
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺

6.background-position:背景图位置

示例：background-position:0px 0px;

也可为：background-position:left bottom;
水平 left/center/right 正值向左，负值向右
垂直 top/center/bottom 正值向下，负值向上

7.background：背景复合属性

示例：background:green url(image/mm.jpg) no-repeat 0px 0px;

background:背景色 背景图 平铺方式 水平位置 垂直位置;
只有水平和垂直的位置顺序不能改变，其他的属性都可以变换位置，且所有属性值都可以不写，不写时默认为无背景色，无背景图片，不平铺，图片位置在左上方

8.border-width:边框的粗细

示例：border-width: 5px;

设置块元素边框的粗细

9.border-style:边框的样式

示例：border-style: solid; 实线边框

solid 实线
dashed虚线
dotted点状线

10.border-color:边框的颜色

示例：border-color: red;

设置块元素边框的颜色

11.border:边框的复合属性

示例：border: 5px solid red ;边框的粗细(默认值3px) 边框样式  边框颜色(默认值黑色)

若想使某方向边框为无，如下设置即可：

border-top:none;  设置上边框为无	        

12.padding:内边距的复合元素

示例：padding: 10px 10px 10px 10px;

当元素设置内边距后,盒子在网页中的尺寸会被撑大,如果保持元素的尺寸不变,要相应的从宽高减去内边距撑开的大小

元素在网页中的尺寸=自身设置的宽高+内边距+边框

内边距写法：
一个值：代表上下左右；
两个值：代表上下，左右；
四个值：代表上，右，下，左；
顺序不能乱

注：当元素是块元素时，在不设置宽度的情况下，宽度和父元素的宽度一样，此时给该元素设置左右的padding后不需要减要撑出的宽度，总宽度不变。会自动减小该元素的宽高以适应多出来的内边距，

13.margin:外边距

示例：
margin: 10px 10px 10px 10px;
margin-top: 20px; 上外边框

外边距合并:

垂直排列的两个块元素,给上面的盒子设置向下的外边距,同时给下面的盒子设置向上的外边距,会造成外边距合并,
当两个值相同时,合并后的外边距值就是该值,
当两个值不同时,是较大的那个值

外边距塌陷:
嵌套的两个块元素,当给子元素(第一个子元素)设置向上的外边距时,父元素会跟着掉下来,此时形成了外边距塌陷.

外边距塌陷解决方案:
1.给父元素设置上边框
2.给父元素设置overflow属性
3.给父元素设置浮动
4.给子元素设置浮动
5.给父元素设置向上的padding

块元素的水平居中
若想设置块元素水平居中，则设置自身水平方向的外边距为auto即可
即：

边框和内外边距都有上下左右的属性，大致格式为复合元素+上下左右：；

例：
上边框：border-top:3px solid red;
上内边距：padding-top: 10px;
上外边距：margin-top: 20px; 
left:左  	top:上				             
right:右  	bottom:下

14.伪类

a:link{}：未访问状态					a:visited{}：访问后状态
a:hover{}：鼠标移入状态				a:active{}：鼠标摁下状态

伪类：访问的4种状态，当这些状态同时存在时，要按照l,v,h,a顺序设置
一般使用link和hover属性，且link属性可由正常的选择器设置代替
伪类的权重和类一样
出于隐私，访问后状态只支持颜色的改变

15.浮动

/* 左浮动 */
float: left;
/* 右浮动 */
float: right;

一般的块和行内元素称之为标准流
浮动是一个半脱离标准流的状态
元素设置浮动后不具备之前的显示模式，称之为浮动流
如今浮动是用来做网页的横向布局,当元素设置浮动后,设置宽高起作用

浮动的内外边距:
只对自己起作用,对周围的元素没有影响

浮动的横向布局：
由于浮动元素会对后面的块元素造成影响，所以需要给浮动元素套一个父元素占位，使后面的元素不会重叠到浮动元素下

浮动造成的影响：
当元素设置浮动后，如果没有给父盒子设置高度，父盒子会认为盒子内没有内容。父盒子的高度不会被撑开，此时父盒子的高度就是0,后面的块元素就会跑到浮动元素的下面了

解决方案：
1.给父盒子设置固定高度
2.给父盒子设置overflow:hidden;属性
3.额外标签法：在浮动元素后面添加块元素，并设置clear:both;属性。表示结束之前浮动所造成的影响。
4.给父元素调用clearfix类名称

浮动的文本环绕
浮动最初是用来实现文本环绕的
即：使文本环绕着浮动的元素，且文本不会被浮动元素所覆盖