CSS 其他小点

作者: 欢欣的膜笛 | 来源:发表于2021-03-23 23:46 被阅读0次

CSS 其他小点
css小点
jq轮播图，一组数据轮播，自动生成小点点
css小点心
css小点心
CSS其他属性
day24-京东登录
京东登录页面
es6 缩写
2018-08-16 day04 京东登录

对BFC规范的理解？

BFC，块级格式化上下文，一个创建了新的 BFC 的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。

CSS 盒子模型(Box Model)

CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

标准 w3c 盒子模型
范围包括 margin、border、padding、content，width=content
ie 盒子模型
范围包括 margin、border、padding、content，width=content+padding+border
解决 IE8 及更早版本不兼容问题可以在 HTML 页面声明 <!DOCTYPE html> 即可

流式布局和响应式布局

静态布局即传统 Web 设计
对于 PC 设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；对于移动设备，单独设计一个布局，使用不同的域名如 wap. 或 m.。
自适应布局
分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
流式布局
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。]
响应式布局
页面元素宽度随着窗口调整而自动适配。每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。
左侧固定，右侧自适应

<style type="text/css">  
    .left{float:left;width:100px;height:50px;}  
    .right{margin-left:100px;width:auto;height:100px;}  

    .left{float: left;width:200px;}
    .right{overflow: hidden;}

    .left{position:absolute;left:0;top:0;width:100px;height:50px;} 
    .right{margin-left:100px;height:100px;}

    .content{display: table;}
    .left{display:table-cell;width:200px;}
    .right{display:table-cell;}
</style>

左侧、右侧固定，中间自适应

<style type="text/css">  
    .main{margin:0 200px; overflow: hidden;}
    .left{position:absolute; top:0; left: 0;width:200px;}
    .right{position:absolute;top:0; right:0; width:200px;}

    .main{position:absolute; top:0; left:200px; right:200px;}
    .left{float:left;width:200px;}
    .right{float:right;width:200px;}
</style>
<body>
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</body>

less，sass

less 语法：

注释：//
变量：@bgc: #daa520;
混入

    .header {
      padding: 20px;
      .nav;
      .box;
    }

函数

    .br(@w, @c) {
      border: @w solid @c;
      color: @c;
      background-color: @c;
    }

计算、嵌套
引入外部文件：@import "var";

less，sass 区别：
1. 编译环境不同，less 需要引入 less.js 处理 less 代码输出 css 到浏览器，sass 的安装需要 ruby 环境，在服务端处理
2. 变量符不同，less 是 @，sass 是 $
3. 引入外部 css 文件不同，都是 @import，sass 文件名应以 _ 打头
4. sass 支持条件语句，可以使用 if、for 循环
5. 工具库不同，sass 有工具库 Compass，less有 UI 组件库 bootstrap