Java教程

京东m站知识点

本文主要是介绍京东m站知识点，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

我们常用的布局有一下几种：

静态布局（Static Layout）、流式布局、自适应布局、响应式布局、弹性布局（rem/em布局）

静态布局：特点：不管浏览器的尺寸是多少，设定元素的尺寸都是定值，常用于pc端

　　　　：优点：静态布局对设计师及css编写者来说很常简单，没有兼容性的问题

　　　　：缺点：不能根据用户的屏幕尺寸做出不同的表现

流式布局：特点：页面元素的宽度按照屏幕分辨率了吧进行适配调整，但整体布局不变，例如网格系统（页面元素大小会变，但是布局不变）

　　　　：优点：移动端开发常用布局

　　　　：缺点：若屏幕尺寸跨度太大，则屏幕上的元素不能正常显示

自适应布局：特点：屏幕分辨率变化是，页面里元素的位置会变化二大小不会发生变化

响应式布局：特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会发生改变

　　　　：优点：适应pc端和移动端，要是足够耐心的话，则效果会很完美

　　　　：缺点：媒体查询是有限的，只能适应主流的宽高；要匹配足够的的屏幕大小，工作量大，设计也需要多个版本

弹性布局：rem是根据根元素<html>来设置字体大小的

　　　　：em是以父节点font-size大小作为参考点

　　　　：若盒子box的属性中有display：flex；则声明该盒子里的子元素是弹性布局

左固定右自适应布局：

（1）都左浮动，给右边的盒子设定左边盒子宽度的左内边距

（2）一个左浮动且设定宽度，另一个设定宽度为width：clac（100% - ‘左侧盒子的宽度’）calc  --  calculation  --  计算

（3）定义他们的父元素为弹性布局（display：flex）左侧设定宽度，右侧填充（flex-grow:1）

flex：grow（扩张因子，默认值是0，不扩张，设置成1就扩张）

flex：shrink（收缩因子，默认值是1，收缩，设置成0就不收缩）

双飞翼布局  ===  圣杯布局（左右侧固定，中间自适应）

补充前天less：

less是一款比较流行的预处理css

less语法兼容所有的css，需要下载一些依赖

node -- js的运行环境

npm -- 第三方管理工具

less支持变量、混合、函数、嵌套、循环等特点；

在node中安装less：  npm install -g less

npm install依赖名字   -g（全局安装）   -s（save缩写）   -D（dev缩写）

less文件变css文件： 在vscode中的终端里操作  lessc style.less style.css

less文件中//注释编译后自动删除   /**/注释编译后仍存在

定义一个变量@colors：gray；

less中直接color：@colors；

less中可以嵌套：.box{ .

 

color:red;

box1{ 

background-color:blue;

.box2{ 

font-size:66px;

}

}

}

定义一个类：

.Colors（@colors：green）{ color：@colors }

#head{ .Colors }

导入导出

@import

less1导入less2：

在less2中写上：@import URL（‘less1）

这篇关于京东m站知识点的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航