0基础学习前段历程2 第一门需要掌握的前端技术HTML5+CSS3 CSS基础知识，常用样式详细解读

#### CSS属性值background背景  -   背景颜色  - background-image:url(  );背景图片  - background-repeat:no-repeat; 设置背景图片是否平铺   - repeat：平铺，默认值   - no-repeat 不平铺
 - background-size:100px 60px;设置图片的大小，值X/Y，可用单位百分比像素  - background-position:100px 60px;设置图片的位置，值X/Y，可用单位百分比像素，英文单词 center  - 综合写法：background：red   url("") no-repeat center center; 图片大小size是无法显示的需要单独写   ### 块级标签与行内标签的相互转化 #### display   #### inline 行内 #### inline-block 行内块 #### block 块级，显示 #### none 隐藏、消失  - 
#### vertical-align 改变行内元素的对齐方式  - top所有同级或平级元素之间，去找高度最高的**顶部**进行对齐  - middle所有同级或平级元素之间，去找高度最高的**中部**进行对齐  - bottom所有同级或平级元素之间，去找高度最高的**底部**进行对齐  - 百分比%/像素px也是可以的
## CSS命名规范 - 不能以数字开头，也不能是数字 - 遵循行业规范，例如:header代表头部，nav代表导航，footer代表尾部 - 可以用驼峰命名法(第一个单词首字母是小写，第二个单词首字母是大写的)  - 例如:列表信息：listInfo、list-info、list_info
## 色值 - 英文单词 red、yellow、green... - **16进制** 例如:#ffffff、#000000、#q1q1q1 ，缩写#fff - rgb  r 红色  g绿色 b蓝色   - rgb(255,24,30); - rgba r 红色 g 绿色 b 蓝色 a 透明度（取值0-1）    - rgba(255,24,30,0)
## CSS盒子模型 html元素看成一个大的仓库，盒子与盒子之间的距离margin（外边距），盒子与商品之间有白色的填充物是padding（内边距），商品本身有宽度和高度（width/height），盒子本身有厚度border（边框）
###CSS盒子模型有5个属性组成的**    - 宽度 width    - 高度 height    - 外边距 margin    - 内边距 padding    - 边框 border

### 外边距margin - 第一种写法 ```    margin: 50px;    /* 一个值四边 */    margin: 10px 20px;    /* 两个值 上下、左右 */    margin: 10px 20px 30px;    /* 三个值 上、左右、下 */    margin: 10px 20px 30px 40px;    /* 四个值 上、右、下、左 */ ``` - 第二种写法 ```     margin-top: 10px;             /* 上 */             margin-right:10px ;             /* 右 */             margin-left:10px ;             左             margin-bottom:10px ;             /* 下 */ ```

#### margin外边距的兼容问题**    - 两个元素同级时，给第一个元素设置margin-bottom，第二个元素设置margin-top时，两个元素之间是取margin的最大值，而不是两个元素的margin值相加    - 两个元素是包含关系时，给子元素设置margin-top值会出现值传递问题（值传递给了父元素）     - 解决办法        - 1、给父元素加一个CSS属性:overflow:hidden，溢出隐藏       - 2、讲子元素的margin-top值去掉，改成给父元素设置padding-top值 **常用**
#### margin外边距可以设置负值

### padding 内边距 - **第一种写法** - 语法同margin相同 ``` padding: 50px; /* 一个值四边 */ padding: 10px 20px; /* 两个值 上下、左右 */ padding: 10px 20px 30px; /* 三个值 上、左右、下 */ padding: 10px 20px 30px 40px; /* 四个值 上、右、下、左 */ ```
- **第二种写法** ``` padding-top: 10px; /* 上 */ padding-right:10px ; /* 右 */ padding-left:10px ; /* 左 */ padding-bottom:10px ;  /* 下 */ ```
### 在什么情况下使用margin外边距/padding内边距？ - **什么情况下使用margin** > 盒子与盒子之间的距离、块级标签与块级标签之间的距离，一般都设置外边距margin值
- **什么情况下使用padding内边距** > 盒子内的边距（间距）、行内标签与行内标签之间的距离，一般都设置内边距padding   

### border边框 - 语法同padding、margin - border：1px solid red: - border-widt:1px;边框的宽度 - border-style:solid;边框的样式 - border-color：边框的颜色
### 盒子模型的计算公式 allwidth=本身内容的宽度+左右padding+左右border
allheight=本身内容的高度+上下padding+上下border

## float 浮动的特点 会将元素改变为行内块，但不会像inline-block有基线对齐问题，没有间隙，margin-top将1不在出现值传递问题
在项目中，float浮动属性常用在块级元素中(div/li)，设置块级元素转成行内块（在一行显示，又可以设置宽高）
display：inline-block；一般用在背景图和文字相结合时（结构一般是:一行内某一个小模块中）
所有的标签都可以设置浮动属性，例如div、li、a、img等等，无论是块级元素还是行内元素 不设置宽高时，宽高是由内容决定的 行内元素与行内块级元素和文字会围绕浮动属性环绕（图文混编）
脱离文档流(父元素找不到子元素，父元素的高度不会被内容撑开)，相当于来到第二层级，不在同一个位面
### 清除浮动带来的影响（清除浮动）面试题 > 影响：当给子元素设置完浮动后，父元素高度会为0（子元素脱离文档流） 四种解决办法： 1、给父元素设置固定高度（不好用也不常用） 2、给父元素设置overflow:hidden;属性（不常用） 3、给所有设置浮动元素的后面加一句话clear:both清除浮动 4、利用伪元素来墙出浮动带来的影响（**常用**）     - 伪元素：用CSS代码给指定元素内添加假的(HTML中不存在的)内容     - 在html页面中，引入reset.css样式表（有清除浮动的CSS样式）     - 当给子元素设置浮动属性后，给父元素加一个class="clear"的类名
#### overflow 文本溢出的处理方式 - overflow:hidden;溢出隐藏，超出元素范围，就会把多余内容隐藏 - overflow:auto;浏览器会判断内容是否超出这个元素的范围，如果超出则出现滚动条 - overflow:scroll:不管内容是否超出元素范围，都会添加滚动条
## 定位 ### 相对定位 - **特点**   - 相对定位的层级要比其他元素层级大（会盖在其他元素上面）   - 当发生位置改变时，原来的位置还被占用着   - 参照物是本身(自己)   - 给绝对定位当参照物来用   - 不脱离文档流   **什么情况下使用相对定位**   1、当自己想要改变位置时，又不影响其他元素，可以使用相对定位   2、给绝对定位当参照物来用
### 绝对定位 - **特点** - 脱离文档流 - 当不知道谁是参照物时，参照物时body - 人为设置参照物时，必须满足两个条件  - 1、这个认为参照物必须是绝对定位元素的父级元素（祖辈）  - 2、这个父级元素必须带有定位属性（相对、绝对、固定） - 当绝对定位元素宽高属性设置为100%时。继承得是参照物得宽高 - 当这个定位元素不设置宽高的时候，宽高由内容决定得 - 当绝对定位这个元素不设置四个方向值时，这个绝对定位元素前面有其他同级和平级得元素时，会默认排在这个平级元素后面 - 定位得权重>浮动得权重>display:inline-block;

### 固定定位 - **特点** - 参照物是浏览器得可视窗口 - 不设置宽高时，宽高由内容决定得 > 固定定位，一般用在网站得侧导航（辅到港），回到顶部得结构上

### 页面兼容问题处理 **以下写法不标准，在IE7下会出问题** ``` <h3>     我的购物车     <span class="fr">0门</span> </h3> ``` **标准写法，在IE7下不会出问题** ``` <h3>     <span class="fl">我的购物车</span>     <span class="fr">0门</span> </h3> ``` **CSS HACK 解决低版本浏览器的兼容处理** > [CSS hack](https://baike.baidu.com/item/css%20hack/7026361?fr=aladdin) - * IE7 - \0 IE8 - ...
- CSS3属性以及动画支持高版本浏览器(IE9以上) - rgba 支持高版本浏览器(IE9以上)