春
节
快
乐

HTML笔记9

CSS初始化

移动端CSS初始化推荐使用normalize.css

http://necolas.github.io/normalize.css/

CSS3盒子模型box-sizing

  • 传统模式宽度计算：盒子的宽度=CSS中设置的width + border + padding
  • CSS3盒子模型：盒子的宽度=CSS中设置的width里面包含了border和padding
  • CSS3盒子模型中，padding和border不会再撑大盒子
/*CSS3盒子模型*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

使用场景：

  • 移动端可以全部使用CSS3盒子模型
  • PC端如果需要完全兼容就使用传统盒子模型，如果不考虑兼容性就使用CSS3盒子模型

移动端特殊样式

/*CSS3盒子模型*/
box-sizing: boder-box;
-webkit-box-sizing: border-box;
/*清除移动端点击高亮*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance:none;
/*禁用长按页面时的弹出菜单*/
img, a {
	-webkit-touch-callout: none;
}

移动端布局两种方式

image

流式布局（百分比布局）

  • 流式布局，就是百分比布局，也称非固定像素布局
  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充
  • 流式布局方式时移动web开发使用的比价常见的布局方式
  • max-width：最大宽度
  • max-height：最大高度
  • min-width：最小宽度
  • min-height：最小高度

二倍精灵图做法

  1. 把精灵图等比例缩放为原来的一半
  2. 之后根据大小测量坐标
  3. 注意：代码里面background-size也要写精灵图原来宽度的一半

移动端flex布局

传统布局与flex布局

image

使用场景：

  • 如果是需要考虑兼容性的PC布局，使用传统布局方式
  • 如果是移动端或者不需要考虑兼容性的PC布局，使用flex弹性布局

flex布局原理

  • 当父元素设为flex布局后，子元素的float、clear和vertical-align属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
  • 子容器可以横向排列也可以纵向排列

采用flex布局的元素，称为flex容器，简称容器。它的所有子元素自动成为容器成员，称为flex项目，简称项目

原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

flex父项常见属性

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素的排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素的排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

flex-direction设置主轴的方向

  • 默认主轴方向是X轴方向，水平向右
  • 默认侧轴方向是Y轴方向，水平向左

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴，而子元素是跟着主轴来排列的

image

justify-content设置主轴上的子元素排列方式

注意：使用这个属性之前一定要确定好主轴是哪个

image

flex-wrap子元素是否换行

默认情况下，项目都排在一条线上（轴线），flex-wrap属性默认不换行

image

align-items设置侧轴上的子元素排列方式（单行）

该属性是控制子项在侧轴（默认是Y轴）上的排列方式，在子项为单项的时候使用

image

align-content设置侧轴上的子元素的排列方式（多行）

设置子项在侧轴上的排列方式，且只能用于子项出现换行的情况（多行），在单行下是没有效果的

image

align-content 和 align-items 的区别

  • align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
  • align-content 适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值

flex-flow属性是flex-dection 和 flex-wrap 属性的复合属性

语法：

flex-flow: row warp;
  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素的排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了flex-direction 和 flex-wrap

flex布局子项常见属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

语法：

.item {
	flex: <number>;
	/*default 0*/
}

align-self控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

语法：

spanLnth-chile(2) {
	/*设置自己在侧轴上的排列方式*/
	align-self: flex-end;
}

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样

背景线性渐变

语法：

background: linear-gradient(起始方向, 颜色1, 颜色2,······);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-linear-gradient(left top, red, blue);

背景渐变必须添加浏览器私有前缀

起始方向可以是：方位名词或者度数，如果忽略默认是top

rem适配布局

rem（root em）是一个相对单位，类似于em，em是父元素字体大小

不同的是rem的基准是相对于html元素的字体大小

例如：根元素（html）设置font-size=12px;非根元素设置width:2em，换算成px就是24px

媒体查询

媒体查询（Media Query）是CSS3新语法

  • 使用@media查询，可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸不同的样式
  • 当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面

语法：

@media mediatype and|not|only (media feature) {
	CSS-Code;
}
  • 用@media开头，注意@符号
  • mediatype：媒体类型
  • 关键字：and、not、only
  • media feature：媒体特性，必须有小括号包含

mediatype查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

image

关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

  • and：可以将多个媒体特性连接到一起，相当于“且”的意思
  • not：排除某个媒体类型，相当于“非”的意思，可以省略
  • only：指定某个特定的媒体类型，可以省略

媒体类型

image

引入资源

语法：

<link rel="stylesheet" href="#" media="screen and (min-width: 320px)">

Less

Less是一门CSS预处理语言，它扩展了CSS的动态特性

Less中文网址：

http://lesscss.cn

常见的CSS预处理器：Sass、Less、Stylus

Less变量

语法：

@变量名:值;

变量命名规范：

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

Less编译使用Easy LESS插件（vscode）

Less嵌套

语法：

#header {
	.logo {
		width: 300px;
	}
}

如果遇见（交集|伪类|伪元素选择器）

  • 内层选择器的前面没有&符号，则它被解析为父选择器的后代
  • 如果有&符号，它就被解析为父元素自身或父元素的伪类

Less嵌套写法：

a {
	&:hover {
		color: red;
	}
}

Less运算

任何数字、颜色或者变量都可以参与运算，Less提供了加减乘除四则运算

注意：

  • 运算符中间左右有两个空格隔开
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位

rem适配方案技术使用

image

rem适配方案——flexible.js

github地址：

https://github.com/amfe/lib-flexible

转换插件cssrem

轮播图插件——seiper

地址：

https://www.swiper.com.cn

移动web响应式开发

原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

image

响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再该百年里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

响应式尺寸划分：

  • 超小屏幕（手机，小于768px）：设置宽度为100%
  • 小屏幕（平板，大于等于768px）：设置宽度为750px
  • 中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px
  • 大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px

Bootstrap

中文官网

http://www.bootcss.com

官网

http://getbootstrap.com/

中文文档

http://bootstrap.css88.com/css/

Bootstrap使用步骤

  1. 创建文件夹结构

image

  1. 创建html骨架结构

image

  1. 引入相关样式文件

image

  1. 书写内容

vw 和 vh 移动端布局

vw 和 vh 定义

image

vw 和 vh 使用：直接使用新单位即可

查询兼容性网站

http://caniuse.com

px转vw的插件（vscode）

px2vw
posted @ 2022-04-09 18:19  诉说爱意予妁  阅读(34)  评论(0)  编辑  收藏  举报