一、Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<p>段落标签</p>
<img src="" alt="">图片标签,src地址,alt文本替代
<a href=""target="_blank"></a>href为跳转地址 target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
text-decoration: none;没有下划线
<i></i> <em></em>倾斜标签
<div></div> <span></span>区域,盒子标签
<strong></strong><b></b> 强调加粗标签
<br>换行标签
<table>表格
cellspacing:设置单元格的距离
cellpadding:设置内容到单元格距离
colspan:在行里合并列
rowspan:在列里合并行,之后删除多余行列
<thead>表头
<tr>表行
<th></th>表行头
</tr>
</thead>
<tbody>表身
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<ul>无序列表
<li></li>
去掉li前面的项目符号(小圆点)
list-style: none;
</ul>
<ol>有序列表
<li></li>
</ol>
<dl>自定义列表
<dt></dt>列表头
<dd></dd>
</dl>
<form action=""> target:_blank(另起一页)、_self(本页面)、规定在何处打开 action URL。
<input type="text">单行文本字段 value 指定输入字段的初始值
<input type="button">按钮
<input type="checkbox">多选框 checked:checked 指定该属性的复选框,默认显示为勾选状态
<input type="password">密码栏
<input type="radio">单选按钮 name要一致
<input type="reset">重置按钮
<input type="submit">提交按钮
<input type="textarea">多行文本字段
<input type="file">选择文件
<label for="nan">男</label>for input单选按钮里id=nan 指定 label 将绑定另一个表单元素的 ID 属性值
<select name="" id=""><option value=""></option><option value=""></option><option value=""></option></select>下拉列表
</form>
表单元素属于行内块,两者之间默认有缝隙,只需将其浮动起来就可以
二、Css
<font-family></font-family>字体类型
<font-size></font-size>字体大小px
<font-weight></font-weight>字体粗细700=bold normal=400;
<font-style></font-style>字体风格
font-style: italic倾斜 normal正常,多数让i,em标签不倾斜
复合属性,简写方式 其他可以省略,font-size和font-family不可省
font: font-style font-weight font-size/font-height font-family
font: italic 700 16px 微软雅黑
对齐文本 左(默认) 右 居中
text-align: left right center;
装饰文本 给文本添加下划线 删除线 上划线
text-decoration: none(默认,没有装饰线) underline overline line-though
文本缩进 首行缩进2em两个文字大小
text-indent: 2em 20px;
行间距 行高
line-height: 26px;
行高等于盒子高度可以使文字居中对齐
外部样式引入
<link rel="stylesheet" href="">
后代选择器 元素1 元素2{样式声明}
div ul li
子选择器 元素1>元素2{样式声明}只选择最近的一级子元素
ul>a
<ul>
<li>
<a href=""></a>只选择这个子元素
</li>
<li>
<a href=""></a>
</li>
</ul>
并集选择器 元素1,元素2{样式声明} 喜欢竖着写
div,
p,
a{} div 和 p 和 a标签
伪类选择器 用:表示,:hover :first-child 链接伪类 结构伪类
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
按顺序写lvha
:focus伪类选择器 用于选取获得焦点的表单元素
焦点就是光标
input:focus{
background-color:yellow;
}
元素显示模式转换
转化为块级元素: display:block
转化为行内元素: display:inline
转化为行内块元素: display:inline-block
背景图片
backgroud-image: url()
背景平铺
background-repeat: repeat no-repeat repeat-x repeat-y
背景图片位置
background-position: x y
background-position: center left (中上位置) 精准位置(20px 50px) 混合位置(center 20px)
背景图片固定
background-attachment: scroll(图像随对象内容滚动) | fixed(图像固定)
背景属性复合写法
background: 背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置
背景颜色半透明
background: rgba(0,0,0,0.3)取值范围在0-1
盒子模型
边框border
bordder-width: 50px 粗细
border-style: solid 实线 dashed 虚线 dotted 点线
border-color: pink 颜色
边框简写 border: 1px solid pink
border-top: 上边框 border-bottom: 下边框 border-left: 左边框 border-right: 右边框
border-collapse: collapse 合并相邻的边框
内边距 padding
padding-left: 左内边距 padding-right: 右内边距 padding-top: 上内边距 padding-bottom: 下内边距
内边距复合写法
padding: 5px 上下左右内边距
padding: 2px 2px 上下 左右内边距
padding: 2px 3px 4px 上 左右 下内边距
padding: 2px 3px 4px 5px 上右下左内边距 顺时针
外边距 margin
margin-left: 左外边距 margin-right: 右外边距 margin-top: 上外边距 margin-bottom: 下外边距
margin 简写方式与 padding 一样
外边距可以让块级盒子水平居中(盒子必须有宽度 只要左右设为auto)
margin: 0 auto
行内 行内块元素水平居中对齐
给其父元素添加 text-align: center
外边距合并-嵌套块元素塌陷解决方法:
(父元素和子元素都有外边距时)
1. 可以给父元素定义上边框
2.可以给父元素定义上内边距
3.可以给父元素添加 overflow: hidden
浮动的盒子不会有外边距合并的问题
清除内外边距
(css第一行代码)
* {
padding: o;
margin: 0;
}
圆角边框
border-radius: 10px ;(数值 或百分比)
正方形盒子,数值改为高度的一半可变为园
矩形,数值改为高度一半可为(__)
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-adius
盒子阴影
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow: 必须,水平阴影的位置,允许负值
v-shadow: 必须,垂直阴影的位置,允许复制
blur: 可选 模糊距离
spread: 可选 阴影的尺寸
color: 阴影的颜色
inset: 将外部阴影改为内部阴影
鼠标经过盒子出现阴影
div:hover {
box-shadow:
}
文字阴影
text-shadow: h-shadow v-shadow blur color
浮动(float)
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
清除浮动
由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,
本质:清除浮动元素造成的影响
选择器 {
clear: 属性值; (left 不允许左侧有浮动元素 right both )
}
清除浮动的策略是: 闭合浮动
清除浮动的方法:
1.额外标签法也称为隔墙法,是w3c推荐的做法
在最后的浮动盒子后面添加一个新标签 (必须是块级元素,不能是行内元素)
2.父级添加overflow属性
overflow: hidden ,auto 或 scroll
但是溢出部分会隐藏
3.父级添加 :after伪元素
选择器(clearfix):after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
选择器 {
IE6 ,7 专有
*zomm: 1;
}
4.父级添加双伪元素
选择器.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
css 属性书写顺序
布局定位属性
自身属性
文本属性
其他属性
导航栏 nav 制作
实际开发中用 li 包含链接 a 的做法
css定位 position
定位=定位模式 (指定一个元素在文档中的定位方式) + 边偏移 (决定该元素的最终位置)
static : 静态定位
选择器 {
position : static;
} 静态定位按照标准流特性摆放位置,没有边偏移
relative : 相对定位
选择器 {
position: relative;
} 1. 相对自己原来的位置来移动;
2.原来在标准的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来的位置)
absolute : 绝对定位 是在元素移动位置的时候,相对于它祖先元素来说的
选择器 {
position: absolute;
} 1.如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位
2.如果祖先元素有定位(相对 绝对 固定定位),则以最近一级有定位祖先元素为参考点移动位置
3.绝对定位不再占用原有的位置
子绝父相
fixed : 固定定位 是元素固定于浏览器可视区域的位置
选择器 {
position: fixed;
} 1.以浏览器的可视窗口为参照点移动元素
跟父元素没有关系
不随滚动条滚动
2.固定定位不在占用原先的位置
固定定位也是脱标的,其实固定定位也可以看作一种特殊的绝对定位
固定定位小技巧: 固定在版心右侧位置
1. 让固定定位的盒子 left: 50%;走到浏览器可视区的一半位置
2.让固定定位的盒子 margin-left: 版心宽度的一半距离
粘性定位 sticky
选择器 {
position: sticky;
} 1.以浏览器的可视窗口为参照点移动元素(固定定位特点)
2.粘性定位占有原先的位置(相对定位特点)
3.必须添加 top left right bottom 其中一个才有效
边偏移 : top bottom left right
定位叠放次序 z-index
选择器 {
z-index: 1;
} 数值默认为 auto ,数值越大,盒子越靠上
如果属性值相同,则按照书写顺序,后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性
绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin: 0 auto 水平居中
left: 50% 让盒子的左侧移动到父级元素的水平中心位置
margin-left: -100px; 让盒子向左移动自身宽度的一半
定位特殊特性
绝对定位固定定位也和浮动类似
1.行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度
2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小
3.脱标的盒子不会触发外边距塌陷
4.绝对定位(固定定位)会完全压住盒子
浮动元素不同,只会压住它下面标准流的盒子,但是不会压住下面标准流盒子里面的文字
但是绝对定位(固定定位)会压住下面标准流所有内容
浮动之所以不会压住文字,因为浮动产生的目的最初是为了做文字环绕效果,文字会围绕浮动元素
一个盒子既有 left 属性又有 right 属性,则默认 left
元素的显示和隐藏
1.display : none;隐藏对象 block : 除了转化为块级元素,还有显示元素的作用
display 隐藏元素后不再占有原来的位置
2.visibility : hidden 元素隐藏 visible 元素可视
visibility 隐藏元素后,继续占有原来的位置
3.overflow : visible : 默认显示
hidden : 溢出的部分隐藏
scroll : 溢出的部分显示滚动条,不溢出也显示滚动条
auto : 在溢出的时候显示滚动条,不溢出不显示滚动条
如果有定位的盒子,慎用 overflow: hidden 因为它会隐藏多余的部分
精灵图 sprites
移动背景图片位置 background-position 一般情况下精灵图都是负值
字体图标 iconfont
icomoon 阿里iconfont字库
@font-face{
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?7kkyc2');
src: url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
三角制作
宽度和高度都为0,只给边框大小,transparent
width: 0;
height: 0;
<!-- 为了照顾兼容性 -->
line-height: 0;
font-size: 0;
border: 5px solid transparent;
border-bottom-color: red;
鼠标样式 cursor
li {cursor: pointer;}
default: 小白 默认 pointer: 小手 move: 移动 text: 文本 not-allowed: 禁止
轮廓线 outline
input {outline: none;} 去掉表单默认的蓝色边框
防止拖曳文本域 resize
textarea {resize: none;}
vertical-align : 用于设置图片或者表单(行内块元素)和文字垂直对齐
vvertical: baseline 默认元素放置在父元素的基线上
top 把元素的顶端与行中最高元素的顶端对齐
middle 把元素放置在父元素的中部
bottom 把元素的顶端与行中最低元素的顶端对齐
解决图片底侧空白缝隙(图片是行内块元素会和文字的基线对齐)
1.给图片添加 vertical-align: middle top bottom 等
2.把图片转化为块级元素 display: block;
单行文字溢出省略号显示
1.先强制一行内显示文本
white-space: nowrap;
2.超出部分隐藏
overflow: hidden;
3.文字用省略号代替超出的部分
text-overflow: ellipsis;
多行文字溢出省略号显示
overflow: hidden;
text-overflow: ellipsis;
弹性伸缩盒子模型显示
display: -webkit-box;
限制在一个块元素显示的文本的行数
-webkit-line-clamp: 2;
设置或检伸缩盒对象的子元素的排列方式
-webkit-box-orient: vertical;
布局技巧
1.margin 负值运用
margin-left: -1px;
让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框
鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),
如果有定位,则加 z-index )
2.文字围绕浮动元素
3.行内块巧妙运用
4.css三角强化
(只保留右边边框)盒子宽度和高度都为0,把上边框宽度调大,颜色透明,左边框和下边框宽度设为0
border-color: transparent red transparent transparent ;
border-style: solid;
border-width: 100px 50px 0 0 ;
三、 HTML5新特性
<header> 头部标签
<nev> 导航栏标签
<article> 内容标签
<section> 定义文档某个区域
<aside> 侧边栏标签
<footer> 尾部标签
<audio> 音频标签 mp3格式
<audio src=""></audio>
autoplay: autoplay 音频自动播放
controls: controls 向用户显示播放控件
loop: loop 循环播放
<video> 视频标签 mp4格式
<video src="文本地址" controls="controls"></video>
autoplay: autoplay 视频自动播放
controls: controls 向用户显示播放控件
width height : 宽度 高度
loop: loop 循环播放
preload: auto(预先加载视频) none(不应加载视频)
poster: lmgurl 加载等待的画面图片
mutted: mutted 静音播放
新增 input 类型
type= search: 搜索框 email: 输入email格式 url: 输入url类型 date: 日期类型 time: 时间类型
month: 月类型 week: 周类型 number: 数字类型 tel: 手机号码 color: 生成一个颜色选择表单
新增表单属性
<input type="text" required="required">
required: required; 内容不能为空
placeholder: 提示文本; 表单的提示信息,默认值将不显示
input::placeholder {color:pink;}
autofocus: autofocus; 自动聚焦属性,页面加载完成自动聚焦到指定表单
autocomplete: off/on; 默认已经打开,需要放在表单内,同时加上name属性,同时成功提交
multiple: multiple; 可以多选文件提交
四、 Css3新特性
新增选择器
一.属性选择器
1.利用属性选择器可以不用借助类或id选择器
input[value] {color:pink;}
2.属性选择器还可以选择属性=值的某些元素
input[type=text] {color:pink;}
3.属性选择器可以选择属性值开头的某些元素
div[class^=icon] {color:pink;}
4.属性选择器可以选择属性值结尾的某些元素
div[class$=data] {color:pink;}
二.结构伪类选择器
选择li里面的第一个孩子
ul li :first-child {background-color: pink;}
选择li里面的最后一个孩子
ul li :last-child {background-color: pink;}
选择第n个孩子 n可以是数字,关键字和公式
n如果是数字,就是选择第n个子元素,里面从1开始
n可以是关键字: even 偶数, odd 奇数
n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略,也就是选择全部
2n : 偶数; 2n+1 :奇数; 5n:5 10 15...; n+5:从第五个开始,包括第五个,到最后; -n+5 : 前5个,包括第五个 )
ul li : nth-child(n) {background-color: pink;}
ul li: nth-of-type {}
nth-child: 会把所有的盒子都排列序号,执行的时候先看 nth-child(1) 之后回去看前面 div 不同则不能执行
nth-of-type: nth-of-type会把指定元素盒子排列序号,执行的时候首先看div指定的元素,之后回去看 nth-of-type(1)
三.伪元素选择器 可以帮助我们利用css创建新标签元素,而不需要HTML标签,从而简化HTML结构
::before 在元素内部的前面插入内容
::after 在元素内部的前面插入内容
before 和 after 创建一个元素,但是属于行内元素
新创建的这个元素在文档是找不到的,所有称为伪元素
语法: element::before {}
before 和 after 必须有 content 属性
before 在父元素内容的前面创建元素,after在父级元素的后面插入元素
伪元素选择器和标签选择器一样,权重为1
巧妙使用:伪元素字体图标 \e91e
伪元素清除浮动
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix::before,.clearfix::after {
content: "";
display: table;}
.clearfix::after{
clear: both;
}
css3盒子模型
1.box-sizing: content-box 盒子大小为width + padding + border (以前默认的)
2.box-sizing: border-box 盒子大小为 width;
如果盒子模型我们为了改为了 box-sizing: border-box ,那padding 和 border 就不会撑开盒子了(前提 padding 和border不会超过width宽度)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
css3其他特性
css3滤镜filter:
filter: 函数();例如 blur(5px);blur模糊处理,小括号数值越大就越模糊
calc()计算
width: calc(100%-80px);
css3过渡 transition
transition: 要过渡的属性 花费的时间 运动曲线 何时开始
1.属性 : 想要变化的css属性,高度宽度 背景颜色 内外边距都可以 如果想要所有属性都变化过渡,写一个all就可以
2.花费时间 : 单位是秒 0.5s;
3.运动曲线: 默认是ease 低速到加速; linear: 匀速; steps(2): 指定时间函数中的间隔数量,步长
4.何时开始: 单位是秒 可以设置延迟触发时间 默认是 0s
谁过渡给谁加
网站TDK三大标签SEO优化
title :网站标题 网站名-网站介绍; kyeword : 关键字; description :网站说明
2D转换 transform 可以实现元素的位移: translate,旋转: rotale,缩放: scale等效果
二维坐标系
transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);
translate:不会影响到其他元素的位置,translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果
盒子垂直居中 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
旋转 rotate
transform: rotale(度数)
rotale里面跟度数,单位是deg rotale(45deg);
角度为正时,顺时针;负时为逆时针;默认旋转的中心点是元素的中心点
2D转换之旋转rotate css3 三角制作 div:hover::after
2D转换中心点 transform-origin: x y; 空格隔开
x y 默认转换的中心点是元素的中心点(50% 50%);还可以给x y 设置像素或者方位名词(top bottom left right center )
缩放scale
transform: scale(1 ,1)长宽,里面写的是数字不跟单位,倍数的意思,等比例缩放scale(2);
不影响其他的盒子,还可以设置缩放的中心点transform-origin: left bottom
转换综合写法: transform: translate() rotate() scale()等 同时有位移和其他属性,需要把位移放在最前面;
css3动画animation 可以实现更多变化,更多控制,自动播放
先定义动画,再使用动画 (可以做多个状态的变化)
@keyframs 动画名称 { from to相当与0%和100% (里面的百分比要是整数)
0% { 开始状态
transform: translate(0,0);
}
25% {
transform: translate(100px,0);
}
50% {
transform: translate(0,100px);
}
75% {
transform: translate(100px,0);
}
100% { 结束状态
transform: translate(0,0);
}
}
调用动画 animation-name: 动画名称;
持续时间 animation-duration: 2s;
动画常用属性: @keyframs: 规定动画
animation: 所有属性的简写,除了 animation-play-state 属性;
animation-name: 规定动画的名称;
animation-duration: 规定动画完成的时间
animation-timing-function: 规定动画的速度曲线,默认是"ease"
animation-delay: 规定动画何时开始,默认为0
animation-iteration-count: 规定动画播放的次数,默认是1,还有infinite 无限循环
animation-direction: 规定动画是否在下一周期逆播放,默认是 normal,altemate逆播放
animation-play-state: 规定动画是否正在运行或暂停,默认是running,还有pause (经常和鼠标经过等其他配合)
animation-fill-mode: 规定动画结束后状态,保持forwards回到起始baskwards
动画简写: animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束状态,
opacity: 阴影度
3D转换 三维坐标系
z轴:垂直屏幕 y轴竖直向下 x轴水平向右 transform: translate3d(x,y,zpx);
透视 perspective: 500px
透视写在观察元素的父盒子上
3D旋转 rotate3d transform: rotate3d(x,y,zdeg);
3D呈现 transform-style: flat(默认子元素不开启3D立体空间); preserve(子元素开启3D立体空间)代码写给父级,但是影响的是子盒子
私有前缀: -moz: 代表firefox; -ms: ie浏览器; -webkit: safari chorm; -o-:opera
五、 移动端
布局视口 layout viewport
视觉视口 visual viewport
理想视口 ideal viewport
meta 视口标签
<meta name="viewport" content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
with: 宽度设置是viewport宽度,可以设置device-width特殊值
initial-scale: 初始缩放比,大于0的数字
maximum-scale: 最大缩放比,大于0的数字
minimum-scale: 最小缩放比,大于0的数字
user-scalable: 用户是否可以缩放, yes或no(1或0)
标准的viewport设置
视口宽度和设备保持一致,视口的默认缩放比例1.0,不允许用户自行缩放,最大允许的缩放比例1.0,最小允许的缩放比例1.0
二倍图
物理像素 & 物理像素比
多倍图
背景缩放 background-size: 图片宽度 图片高度(里面的单位可以是%,相对父盒子);
cover: 完全覆盖div盒子; content: 把高度和宽度等比例拉伸,宽度或者高度到达盒子则不会继续拉伸会有空白部分
css3初始化 normalize.css
css3盒子模型: box-sizing: border-box;
-webkit-box-sizing: border-box;
点击高亮我们需要清除 设置为transparent完成透明
-webkit-tap-highlight-color: transparent;
在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式
-webkit-apperance: none;
禁用长按页面时弹出菜单
img,a {-webkit-touch-callout: none;}
移动端常见布局
单独制作移动端页面
1.流式布局(百分比布局)
通过设置盒子的宽度设置为百分比
max-width: 最大宽度 min-width: 最小宽度
body设置{ width: 100%; min-width: 320px; max-width: 640px;
margin: 0 auto; font-size: 14px; font-famiy: -apple-system, Helvetice, sans-serif ;
line-height: 1.5; color: #666;
}
二倍精灵图做法
在firework里面把精灵图等比缩放为原来的一半,之后根据大小测量坐标,注意代码里面backgrund-size也要写:精灵图原来宽度的一半
焦点图制作
2.flex弹性布局 display: flex;
任何一个容器都可以指定为flex布局
当父盒子设为flex布局后,子元素的float clear 和veritical-align属性将失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
常见父项属性: flex-direction: 设置主轴的方向 x轴 row: 默认值从左到右 row-reverse: 从右到左
column: 从上到下 column-reverse: 从下到上
justify-content: 设置主轴上的子元素排列方式
flex-start: 默认值从头部开始 如果主轴是X轴,则从左到右
flex-end: 从尾部开始排列
center: 在主轴居中对齐(如果主轴是X轴则水平居中)
space-around: 平分剩余空间
space-between: 先两边贴边再平分剩余空间
flex-wrap: 设置子元素是否换行 nowrap不换行 wrap换行
默认子元素不换行,如果装不开,会缩小子元素大小
aligin-content: 设置侧轴上的子元素的排列方式(多行)
子项出现换行的情况
flex-start: 默认值从头部开始 flex-end: 从尾部开始排列 center: 在侧轴中间显示 pace-around: 子项在侧轴平分剩余空间
space-between: 子项在侧轴先两边贴边再平分剩余空间 stretch: 设置子项元素高度平分父元素高度
aligin-items: 设置侧轴上的子元素排列方式(单行)
flex-start: 从上到下 flex-end: 从下到上 center: 垂直居中 stretch: 拉伸,默认值
flex-flow: 复合属性,相当于同时设置了flex-direction和flex-wrap
常见子项属性: flex: 1 ;子项目占的份数 可以是%
aligin-self: flex-end;控制子项自己在侧轴的排列方式
order: -1;默认是0,属性定义子项的排列顺序(前后顺序) 越小越靠前
背景线性渐变 : background: linear-gradient(起始方向,颜色1,颜色2,...)
必须添加浏览器私有前缀 background: -webkit-linear-gradient(left,red,bllue)
background: -webkit-linear-gradient(left,top,red,bllue)
3.less+rem+媒体查询布局
rem单位 相对于html元素 字体大小来说的
rem 可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制
em单位是父元素字体大小
媒体查询 可以针对不同的屏幕尺寸设置不同的样式
@media mediatype and|not|only(media feature){
css3-Code;
} 用@media开头 注意@符号
mediatype 媒体类型 all: 用于所有设备; print: 用于打印机和打印机预览; scree: 用于电脑屏幕 平板电脑 智能手机等;
关键字 and not only
media featurre 媒体特性 必须有小括号包含 width: 定义输出设备中页面可见区域的宽度 min-width max-width
@madia scree and (max-width: 800px) {
body {
background-color: pink;
}
} 在屏幕上 并且 最大宽度是 800px 设置想要的样式
媒体查询可以根据不同屏幕尺寸在改变不同的样式
@madia scree and (min-width: 500px) and (max-width: 900px){
body {
background-color: purple;
}
}
媒体查询+rem 实现元素动态大小变化 媒体查询最好的方法是从小到大
引入资源 根据屏幕不同大小调用不同样式
<link rel="stylesheet" media="mediatype and|not|only (meida feature)" href="mystylesheet.css">
六、less基础
维护css弊端
less使用 新建后缀名.less文件
less变量 @变量名: 值; div{ background-color: @变量名 }
变量名必须有@为前缀,不能包含特殊符号,不能以数字开头,大小写敏感
less编译 将.less文件编译成.css文件 vscode中easyless
less嵌套 子元素的样式直接写在父元素里
如果有伪类,交集选择器,伪类选择器 内层选择器的前面要加 & a{&::after }
less运算 + - * / 运算符左右两侧要空格隔开
两个数参与运算 如果只有一个数有单位则最后的结果就以这个单位为准
两个数参与运算 如果两个数都有单位则以第一个单位为准
rem适配方案 less+ 媒体查询+ rem flexible.js + rem
动态设置html标签字体大小
1.首先选一套标准尺寸 750为准 2.用屏幕尺寸除以我们划分的份数 得到html里面的文字大小
但是我们知道不同屏幕下的文字大小是不一样的 3.页面元素的rem值=页面元素在750像素下的px值 / html里面的文字大小
将设置好的comon.less引入到index.less里面
@import "common";
4.混合布局
