Less(初步了解)
1.less是一门css的预处理语言。
2.less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式。
3.在less中添加了许多的新特性,像对变量的支持、对mixin的支持。
4.less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须向将less转换为css,然后再由浏览器执行。
flex (弹性盒,伸缩盒)
1.是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局。
2.flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变。
3.弹性容器:
-要使用弹性容器,必须先将一个元素设置为弹性容器。
-display: flex;(设置块级弹性容器)
-display: inline-flex;(设置为行内的弹性容器)
4.弹性元素:
-弹性容器的子元素(直接子元素)是弹性元素。
-弹性元素可以是弹性容器。
-主轴:
弹性元素的排列方向称为主轴。
-侧轴:
-与主轴垂直方向的称为侧轴。
5.弹性容器的样式
-flex-direction(指定容器中弹性元素的排列方式)
-可选值:
-row 默认值,弹性元素在容器中水平排列(左向右)
-row-reverse 弹性元素在容器中反向水平排列(右向左)
-column 弹性元素纵向排列(自上而下)
-column-reserve 弹性元素反向纵向排列 (自下而上)
-flex-wrap(设置弹性元素是否在弹性容器中自动换行)
-可选值:
-nowrap 默认值,元素不会自动换行
-wrap 元素沿着辅轴方向自动换行
-wrap-reverse 元素沿着主轴反方向换行
-flex-flow(wrap 和 direction 的简写属性)
-可选值:
-flex-flow: row wrap;
-justify-content(如何分配主轴上的空白空间、主轴上的元素如何排列)
-可选值:
-flex-start 元素沿着主轴起边排列(默认值)
-flex-end 元素沿着主轴终边排列
-center 元素居中排列
-space-around 空白分布到元素两侧
-space-evenly 空白分布到元素的单侧(每一边的距离都一样)(兼容性不好,慎用)
-spance-between 空白均匀分布到元素间
-align-items(元素在辅轴上如何对齐)
-可选值:
-stretch 元素被拉伸以填满整个容器(默认值)
-flex-start 元素不会拉伸,沿着辅轴起边对齐
-flex-end 沿着辅轴的终边对齐
-center 居中对齐
-baseline 基线对齐
-align-content(辅轴空白空间的分布)
-可选值:
-center 上下空白元素中间
-flex-start 下面空白
-flex-end 上面空白
-space-around 环绕两边
-space-between 空白在中间
-space-evenly 空白在单侧
6.弹性元素的属性
-flex-grow(指定弹性元素的伸展的系数)
-当元素有剩余空间,会按照比例进行分配。
-flex-shrink(指定弹性元素的收缩系数)
-默认为1,当父元素中的空间不足以收纳所有的子元素时,如何对子元素进行收缩。
-align-self(用来覆盖当前弹性元素上的align-items)
-flex-basis:指定的是元素在主轴上的基础长度
-如果主轴是横向的,则该值指定的就是元素的宽度。
-如果主轴是纵向的,则该值指定的就是元素的高度。
-默认值是auto,表示参考元素自身的高度或宽度。
-如果传递一个具体的数值,则以该值为准。
-flex(可以设置弹性元素所有的三个样式 flex: 增长 缩减 基础长度;)
-可选值:
-initial "flex: 0 1 auto;"
-auto "flex: 1 1 auto;"
-none "flex: 0 0 auto;"(弹性元素没有弹性)
-order(决定元素的排列顺序)
-可选值:
-默认值:0;
-可以设置为正数或负数。
像素
1.在前端开发中像素要分成两种情况讨论:css像素和物理像素。
2.物理像素:屏幕的小点点就属于物理像素。
3.css像素:编写网页时,我们所用像素都是css像素。
4.浏览器在显示网页时,需要将css像素转化为物理像素然后再呈现。
5.一个css像素是最终由几个物理像素显示,由浏览器决定。(默认情况下在pc端,一个css像素=一个物理像素)
视口(viewport)
1.视口就是屏幕中用来显示网页的区域。
2.可以通过查看视口的大小,来观察css像素和物理像素的比值
-默认情况下:
-视口宽度 :1920px(css像素) 1920px (物理像素)
-此时 css像素和物理像素的比值是 1:1
-放大两倍的情况:
-视口宽度 960px(css像素)1920px(物理像素)
-此时 ,css像素和物理像素的比是1:2
3.我们可以通过改变视口的大小,来改变css像素和物理像素。
手机像素
1.在不同的屏幕,单位像素的大小是不同的,像素越小屏幕会越清晰。
2.智能手机屏幕的像素点远远小于计算机屏幕的像素点。
3.默认情况下,移动端的网页都会将视口设置为980像素(css像素),以确保pc端网页可以在移动端正常访问,但是如果网页中的宽度超过了980,移动端的浏览器会自动对网页缩放以完整显示网页。
完美视口
1.移动端的默认视口大小是980px(css像素),默认情况下,移动端的像素比就是 视口大小/移动端宽度。如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比不好, 导致网页的内容小。
2.编写移动端页面时,必须要确保有一个比较合理的像素比:1css 像素 对应 2 个物理像素 、2 css像素 对应 3 个物理像素……
3.可以通过meta标签来设置视口大小: <meta name="viewport" content="width=200px">
4.每一款移动设备设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值既可得到最佳像素比。
5.将像素比设置为最佳像素比的视口我们称其为完美视口: (写移动端一定要写这行代码)
-<meta name="viewport" content="width=device-width, initial-scale=1.0>
学识浅薄,如有错误,恳请斧正,在下不胜感激。