移动开发day2_css预处理器_flex布局
css预处理器
一种技术，可以提高编写css代码的技术而已。
有3种预处理器常见
less使用流程
编写符合less语法的less文件
/medias/1554169324594.png?lastModify=1554252518)
使用工具 将less编译成 css
/medias/1554169449332.png?lastModify=1554252518)
在网页当中 引用 编译好的 css文件
<link rel="stylesheet" href="./css/01.css">
注意
浏览器根本就不认识 什么less sass。。
浏览器 只认识 熟悉 css文件
less的语法
less语法是完全兼容css语法的
在less文件中，直接写入css代码是正确的语法。
less所有的语法 不止这一些 但是 上课讲解的足够使用
变量语法
电商的网站 很多页面
主题颜色 天猫 京东 都是红色 美团 绿色 苏宁 黄色 唯品会 粉红色
让 把天猫的主题颜色红色 改成 蓝色！！！
要改的标签很多
出错
技术含量
领导骂你
@color: green;
header {
background-color:@color;
}
main {
background-color: @color;
}
footer {
background-color: @color;
}
less语法
嵌套
div{
background-color: red;
>p{
color: yellow;
}
a{
background-color: pink;
}
.redCls{
background-color: red;
}
/* 伪元素的冒号前面 加一个符号 & */
&:before{
content: "南京路";
}
}
less嵌套
运算
body {
width: 777px;
/* 宽度 = 宽度的一半 */
/* height: 388.5px; */
/* 除法 */
height: 777px/2;
/* 乘法 */
font-size: 10px * 2;
/* 加法 */
/*
运算符前面不能加空格
margin-left: 50px +7;
*/
margin-left: 50px+7;
/* 减法 */
margin-right: 50px-8;
}
运算
flex布局
flex布局 = flex盒子 = 伸缩布局 = 伸缩盒子 = 弹性布局 = 弹性盒子
就是一种新一点的布局技术
传统布局 和 flex布局的比较
传统布局 大量的使用 定位 浮动 左右的margin 。。。
传统布局有哪些特点
兼容性好
使用比较繁琐
flex布局的特点
兼容性差一点，主要用在移动端上
使用简单方便
父项的属性
5个属性
设置主轴的方向
在flex布局中，一直是存在两个轴
主轴
默认情况下 主轴的方向 = x轴 从左到右
侧轴
默认情况下 侧轴的方向 = y 轴 从上到下
设置主轴的方向
flex-directionrow 左 到 右
column 上到下
。。。。
设置 主轴 子项的对齐方式
justify-contentflex-start
flex-end
center
space-between
space-around
设置 侧轴 子项的对齐方式 -单行
align-itemsflex-start
flex-end
center
设置 侧轴 子项的对齐方式 -多行
align-contentflex-start
flex-end
center
space-between
space-around
换行 属性
flex-wrapwrap;
子项的属性
设置子项 自己 在侧轴上的对齐方式 align-self
flex-start
flex-end
center
设置子项 自己 在主轴上的排列顺序 order
默认值 都是 0
值越小越靠前
设置子项 占父项的宽度的比例 flex
按照比例来添加对应的值
补充
结构伪类选择器中选择前几个的公式
a:nth-child(-n+3){
border-bottom: 1px solid #fff;
background-color: red;
}
结构伪类选择器中选择后几个的公式
a:nth-last-child(-n+3){
border-bottom: 1px solid #fff;
background-color: red;
}
字体颜色继承
color: inherit;
当前的颜色currentColor
边框颜色等于字体的颜色
border: 1px solid currentColor
注意
flex布局是可以和传统布局一起使用
当代码量一样的情况下 优先使用flex
某个效果，那个代码容易实现，就使用那个代码就可以了
某个布局效果 用什么样的技术实现得比较快 就使用哪个技术
最新文章
- 异常:System.Data.EvaluateException: 未找到列[District].
- js onclick="return test()"事件返回值，对有些事件，会影响默认动作的执行。如：onclick和onsubmit
- node的实践（项目三）
- preseed.cfg分区设定案例
- dom 表格操作
- JDK小技巧
- 大脑皮层是如何工作的 《人工智能的未来》（<On intelligence>）读书笔记
- AJAX做增删改查详细！
- 解决iframe在移动端(主要iPhone)上的问题
- NoSQL是什么？
- [C#]一个简易的、轻量级的方法并行执行线程辅助类
- nginx set变量后lua无法改值
- java 栈 最大深度
- ThinkPHP 3.2公共类库、应用类库ThinkPHP/Library讲解
- Telnet远程登录
- INSTALL_FAILED_CONFLICTING_PROVIDER
- 简单的面向过程的Redis存储加入购物车
- linux-git服务搭建
- BZOJ 1003 物流运输 (dp + dijkstra)
- Objective-C之成魔之路【13-预处理程序】