CSS前期了解

CSS 全称指 Cascading Style Sheet 层叠样式表

常用属性及属性值

• padding：0  15px； 让导航栏各导航之间的间距相等。
• line-height： px；px值为该容器所设置的高度。目的是让该内容在该容器里垂直居中。如导航栏在div里垂直居中。text-height本意为定义行高，范围为上边距+字体大小+下边距，默认为上边距=下边距。行高无默认值，随内容变化。 
• text-align: center;     让内部元素（或行内元素的文字）居中  如让div里的p标签文字在div里居中，则<p text-align: center; >。本意指文本对齐方式，值有left( 内容左对齐，当参杂中英文时，效果会更明显)、right、justify（内容平铺容器，间距自动调节）
• margin:auto;    让元素本身（或块级元素）水平居中    如让div在页面中居中  则<div margin:auto;>

CSS的复合样式

复合的写法是通过空格的方式实现的

• background：背景色(可省)  背景图片 背景图平铺方式 位置；      如：background： green  url(xxx/.xx.png)  no-repeat
• border: 宽度  样式  颜色(可省) ；  如  border：5px  solid  black；
• font：样式 粗细 大小/行高 字体类型 ；   如  font： italic bold 20px/35px ”微软雅黑“，sans-serif；   大小和字体种类不能省略
• margin：上  右  下  左；    如属性值为3个则代表上   左右    下。2个时则为上下   左右
• padding：上  右  下  左；  格式完全与margin相同

浏览器默认情况

• 默认情况下body标签在距离页面的两侧会有一定的空隙，所以会经常使用margin：0px；
• 浏览器默认字体大小为16px，  行高line-height为21px

CSS优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

但是当样式发生冲突的时候，谁的权重值高，谁就生效！ 权重值对应表：

1. 通用选择器：                                            权重值0
2. 标签（元素）选择器 div、p....                  权重值1
3. 类选择器   .nav   .bar.....                            权重值10                           
4. ID选择器   #btn、#box                              权重值100
5. 行内样式                                                    权重值1000

可理解为：选择器选择的范围越小越精确，优先级就越高

CSS文本属性

颜色、字体、行高、大小、加粗、倾斜、首行缩进、水平对齐、文字修饰

• 颜色     color： red；                                           文字颜色
• 字体    font-family：华文中宋；                         字体类型（逗号和引号使用）
• 大小    font-size：26px；                                     字体大小
• 加粗    font-weight：bold；                                  文字加粗
• 倾斜   font-style：italic；                                      文字倾斜
• 首行缩进  text-indent：60px；                             首行缩进
• 水平对齐  text-align：center；                             水平对齐方式（可理解为水平居中）
• 行高    line-height：   20px；                                行高（行高值等于高度即可实现垂直居中）

CSS图片

gif格式：   支持动画，但是只有全透明和不透明两种模式；  只有256种颜色

jpg格式：  采用了有损压缩算法，体积较小，不支持透明，不支持动画

png格式： 采用无损压缩算法，体积也相对较小，支持背景透明，不支持动画

svg格式：不会失真，记录了图片的形状和颜色，一般用于保存形状和颜色相对简单的图像。

CSS背景图

常用属性：background-repeat：no-repeat；平铺方式                          background-position：-5px 100px； 背景位置

background-attachment：scroll(相对当前元素偏移)；   背景图随滚动条移动的方式，值为fixed(相对浏览器进行偏移 )时，背景图不随滚动条变动

浮动布局

• 浮动元素会脱离网页文档，与其他元素发生重叠，但是，不会与文字内容发生重叠（即不会遮盖住文字内容，文字会环绕在浮动盒子的周围，可联想到文字环绕效果）
• 浮动元素float最大的特点是脱离文档流，与其他元素会产生重叠的现象。

用div作浮动布局的时候，浮动div外应该被一个标准流的div包裹，为了后继元素或容器的正常布局。那么此时，父标准流div是必须设置高度的，即使其子浮动元素已经设置了大小，但是在浮动布局里父标准流div并不像普通div那样被子元素撑开，注意此时的父标准流div高度为0，因此需要设置高度。

方法二为：为父标准流div设置   overflow：auto；      overflow表示溢出的意思，即对超出边界的元素（注意浮动子元素的顶部会超过标准流父元素的默认高度0），因此父元素可做高度的自由调整，调整大小结果为随浮动子元素的高度变化

方法三为： 清除浮动 clear：left/right/both     指当前元素不受前面浮动元素的影响，值为left时指不受左浮动的影响，一般都取值为both

• 浮动元素在排列时，只参考前一个元素位置即可。可理解为，只参照前一个元素的位置大小高度，紧跟在前一个元素的底部排列
• 浮动元素的重叠问题：1.浮动元素不会覆盖文字内容，即前面的文字环绕效果。         2.浮动元素不会覆盖图片内容。（因为图片本身也属于文本，可以把图片看做是一个特殊的文字）   3.浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、下拉选项等）

盒子模型

网页上的所有元素，哪怕是文字也是有大小的，除了元素本身的大小，还可以设置它的边框等。还可以给它设置边距，一旦给它设置边距，那么它周围的元素则无法靠近它，从而产生了距离，导航栏各导航间的相等距离就是采用了padding。若是图片间的相等间距采用的是margin。在盒子里包含本身的内容部分、填充部分、边框、边距。

padding：内边距    也可认为是填充，即设置了内边距后，元素会被撑开，即元素的实际大小会变大，内容距离边框的padding距离

margin：即盒子与盒子之间的距离。

注意:1.背景色填充到magin以内的区域（不包括margin区域，包括border）2.padding不能为负数，而margin可以为负数3.文字始终在content内

元素的三大类型

块元素： 可以设置宽高大小，默认宽度为100%，并且独占一行。该元素有  <p>、<ul>、<li>、<h1-h6>、<div>、<form>、<table>

块元素要相对容器居中使用得是margin：auto；

设置了浮动得元素是属于块元素

内联（行内）元素： 无法设置宽高，元素大小随内容变化，所有元素默认排在一行。该元素有<i>、<b>、<span>、<a>。内联元素表现得是文字得特性，所以要文字相对容器居中使用得是text-align：center；

内联块元素： 既能设置宽高大小、又能排在一行显示。该元素有<img>、<input>。内联块元素居中使用得也是text-align

• 改变/转化元素类型用css的display属性。属性值有display: block(块元素)、inline(内联or行内元素)、inline-block(内联块元素)

定位

position：absolute/relative      

要实现定位得话，首先要给定位元素left/top坐标，然后是position：absolute；(注意，不设置position：absolute；的话，坐标设置是无效的)；  然后找到参考元素即该定位元素是相对于谁来进行定位得，最后将参考元素设为position：relative；

position：fixed； 为固定值定位，一般相对html网页。同样需要设置left和top坐标，一旦设置为固定值定位，则该元素将固定在那里，无论如何滑动页面。

若某元素设置了absolute定位，其参考系是根据上层何元素设置了position属性，一旦设置了该position属性，无论其属性值为哪个，都相对的该属性的元素来定位。若其父元素皆无设置position属性，则默认相对html网页来进行定位。

CSS继承

文字相关的样式可以被继承，如颜色

布局相关的样式不能被继承，如边框大小（默认是不能继承的，但是可以设置继承属性，用属性值inherit），如border：inherit；