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

相关推荐

  1. CSS样式

    2024-01-18 09:12:06       46 阅读
  2. <span style='color:red;'>css</span><span style='color:red;'>样式</span>

    css样式

    2024-01-18 09:12:06      24 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-18 09:12:06       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-18 09:12:06       106 阅读
  3. 在Django里面运行非项目文件

    2024-01-18 09:12:06       87 阅读
  4. Python语言-面向对象

    2024-01-18 09:12:06       96 阅读

热门阅读

  1. 【低危】OpenSSL 拒绝服务漏洞

    2024-01-18 09:12:06       52 阅读
  2. 科技的成就(五十五)

    2024-01-18 09:12:06       55 阅读
  3. springmvc常用的组件

    2024-01-18 09:12:06       50 阅读
  4. position有哪些值?分别是根据什么定位的?

    2024-01-18 09:12:06       45 阅读