css-盒子等样式学习

盒子居中，继承外层盒子的宽高

兼容性（border-box）将边框收到盒子内部

初始化div     不用管box-setting 

content-box 还原

创建为一个类 ，让所有需要还原的类 进行继承

padding 用法表示margin上下左右边距

body  外边距（IE8 默认上下16px,左右8px） (IE7  上下11px 。。。。)各个浏览器不同

常规项目设计定位方式

relative 数据非定位元素  position 数据定位元素 

position  创建新图层  ，box2  还在原来的图层所以 橘色再黑色下面 

z轴处理图层问题

页面自适应2栏布局

overflow-y  让其失去滚动条

左边自适应,html,body要同时继承以上属性，不然就没有效果

 float能将图片浮动在文字中

 清除浮动方法一（将span变为p）span { clear:both}

float  以后就变成内联块元素

必须两边都加上浮动

 

 ：伪类用法 

:：伪元素content  必须有    inline-block 可以变成块级元素

清楚浮动的方法

将边框收进元素中

动态获取数据

   向里扩散

 将阴影遮挡去掉，可以将header 网上移动  用relative + z-index

浏览器兼容性

纯园   50%   半圆角  height/2 +px      圆角直接用px

 保持图片缩放(位置)不变

图片自适应

contian同样达到如此效果

背景图片设置不滚动

复合使用

log 配置，如果没有网速则显示字符    实际是将logo-hd 变为块级  然后图片设置logo  同样的高度和宽度 利用overflow  hidden 达到效果

border='1'   有单元格  与  style 没有单元格的区别

 

 保持宽度一致

解决浮动撑开的问题   BFC特性

可解决该问题。

父级元素出发BFC也能解决margin塌陷

css 样式基本顺序

命名规范

学习链接  fontawesome、矢量图标、雪碧图、腾讯课堂案例_哔哩哔哩_bilibili