css-盒子等样式学习

css-盒子等样式学习_第1张图片css-盒子等样式学习_第2张图片css-盒子等样式学习_第3张图片

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

css-盒子等样式学习_第4张图片兼容性(border-box)将边框收到盒子内部

初始化div     不用管box-setting 

css-盒子等样式学习_第5张图片content-box 还原

css-盒子等样式学习_第6张图片创建为一个类 ,让所有需要还原的类 进行继承

padding 用法表示css-盒子等样式学习_第7张图片margin上下左右边距

css-盒子等样式学习_第8张图片

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

css-盒子等样式学习_第9张图片常规项目设计定位方式

css-盒子等样式学习_第10张图片

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

css-盒子等样式学习_第11张图片

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

z轴处理图层问题

css-盒子等样式学习_第12张图片页面自适应2栏布局

overflow-y  让其失去滚动条

css-盒子等样式学习_第13张图片左边自适应,html,body要同时继承以上属性,不然就没有效果

css-盒子等样式学习_第14张图片

 float能将图片浮动在文字中

css-盒子等样式学习_第15张图片

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

float  以后就变成内联块元素

css-盒子等样式学习_第16张图片css-盒子等样式学习_第17张图片

必须两边都加上浮动

css-盒子等样式学习_第18张图片

 css-盒子等样式学习_第19张图片

 :伪类用法 

::伪元素css-盒子等样式学习_第20张图片content  必须有    inline-block 可以变成块级元素

css-盒子等样式学习_第21张图片清楚浮动的方法

将边框收进元素中

css-盒子等样式学习_第22张图片动态获取数据

css-盒子等样式学习_第23张图片css-盒子等样式学习_第24张图片

   向里扩散

css-盒子等样式学习_第25张图片

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

css-盒子等样式学习_第26张图片浏览器兼容性

css-盒子等样式学习_第27张图片纯园   50%   半圆角  height/2 +px      圆角直接用px

css-盒子等样式学习_第28张图片

css-盒子等样式学习_第29张图片

 css-盒子等样式学习_第30张图片css-盒子等样式学习_第31张图片css-盒子等样式学习_第32张图片保持图片缩放(位置)不变

css-盒子等样式学习_第33张图片图片自适应

contian同样达到如此效果

css-盒子等样式学习_第34张图片

背景图片设置不滚动

复合使用

css-盒子等样式学习_第35张图片log 配置,如果没有网速则显示字符css-盒子等样式学习_第36张图片    实际是将logo-hd 变为块级  然后图片设置logo  同样的高度和宽度 利用overflow  hidden 达到效果

css-盒子等样式学习_第37张图片

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

 css-盒子等样式学习_第38张图片

 保持宽度一致

css-盒子等样式学习_第39张图片

css-盒子等样式学习_第40张图片解决浮动撑开的问题   BFC特性

可解决该问题。

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

css-盒子等样式学习_第41张图片css 样式基本顺序

css-盒子等样式学习_第42张图片命名规范

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

你可能感兴趣的:(css,学习,前端)