目录
移动端
移动端特点
1.视口
2.二倍图
图片分辨率, 为了高分辨率下图片不会模糊失真
百分比布局
Flex布局
1.Flex布局模型组成
.box {
/* 父元素添加，变成弹性容器 */
/* 视觉效果：子级一行排列/水平排列 */
/* 水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列 */
display: flex;
height: 200px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
2.主轴对齐方式
.box {
display: flex;
/* 居中 */
justify-content: center;
/* 间距在弹性盒子（子级）之间 */
justify-content: space-between;
/* 所有地方的间距都相等 */
justify-content: space-evenly;
/* 间距加在子级的两侧 */
/* 视觉效果：子级之间的距离是父级两头距离的2倍 */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
} 
3.侧轴对齐方式
.box {
display: flex;
/* 居中 */
/* align-items: center; */
/* 拉伸，默认值（现有状态，测试的时候去掉子级的高度） */
/* align-items: stretch; */
height: 300px;
margin: auto;
border: 1px solid #000;
}
.box div {
/* width: 100px; */
/* height: 100px; */
background-color: pink;
}
/* 单独设置某个弹性盒子的侧轴对齐方式 */
.box div:nth-child(2){
align-self: center;
}4.伸缩比
.box {
display: flex;
height: 300px;
border: 1px solid #000;
}
.box div {
height: 200px;
margin: 0 20px;
background-color: pink;
}
.box div:nth-child(1) {
width: 50px;
}
.box div:nth-child(2){
/* 占用父级剩余尺寸的份数：3份 */
flex: 3;
}
.box div:nth-child(3){
/* 占用父级剩余尺寸的份数：1份 */
flex: 1;
}
5.主轴方向
li {
list-style: none;
}
.box li {
display: flex;
/* 1. 先确定主轴方向; 2. 再选择对应的属性实现主轴或侧轴的对齐方式 */
/* 修改主轴方向: 列 */
flex-direction: column;
/* 视觉效果: 实现盒子水平居中 */
align-items: center;
/* 视觉效果: 垂直居中 */
justify-content: center;
width: 80px;
height: 80px;
border: 1px solid #ccc;
}
.box img {
width: 32px;
height: 32px;
} 
6.弹性盒子换行
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* 默认值, 不换行 */
/* flex-wrap: nowrap; */
/* 弹性盒子换行 */
flex-wrap: wrap;
/* 调节行对齐方式 */
/* align-content: center; */
/* align-content: space-around; */
align-content: space-between;
height: 300px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
7.文本不换行用省略号表示
.dingdan .bottom .goods p{
font-size: 16px;
color: #333333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-bottom: 5px;
}
移动适配
rem
1.基本使用
* {
margin: 0;
padding: 0;
}
/* 1rem=1html标签字号大小 */
html{
font-size: 20px;
}
.box{
width: 5rem;
height: 3rem;
background-color: pink;
}2.媒体查询
/* 使用媒体查询，根据不同的视口宽度，设置不同的跟字号 */
@media (width:375px) {
html{
font-size: 40px;
}
}
@media (width:320px) {
html{
font-size: 30px;
}
}3.rem适配
* {
margin: 0;
padding: 0;
}
/* 1.不同的视口，HTML标签字号不同，字号是视口宽度的1/10 */
@media (width:320px) {
html{
font-size: 32px;
}
}
@media (width:375px){
html{
font-size: 37.5px;
}
}
@media (width:414px){
html{
font-size: 41.4px;
}
}
/* 2.书写盒子尺寸，单位rem */
.box{
width: 5rem;
height: 3rem;
background-color: pink;
}4.flexible.js
dpr：物理像素比
(function flexible (window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize () {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))Less
less语法
1.less计算
.box{
width: 100+10px;
width: 100-20px;
width: 100*2px;
//除法
width:(68/37.5rem) ;
height: 29./37.5rem;
}2.less嵌套
3.less变量
//1.定义 @变量名：值； 2.使用 css属性：@变量名
@color:green;
.box{
color: @color;
}
.father{
background-color: @color;
}
.aa{
color: @color;
}4.less导入其他less文件
5.less导出css文件
//out:./qqq/zihua.css
//out:./abc/
.box {
color: red;
}6.less禁止导出
在less文件第一行加：
//out:falsevw/vh
1.vw和vh单位
2.vw和vh的适配原理
* {
margin: 0;
padding: 0;
}
//vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
//视口宽度为375px，则1px=1/3.75vw
//盒子尺寸为68*29px，宽为（68/3.75vw），高为（29/3.75vw）
.box{
width: (68/3.75vw);
height: (29/3.75vw);
background-color: skyblue;
}
.box2{
//vh
width: (68/6.67vh);
height: (29/6.67vh);
background-color: green;
}
响应式布局
媒体查询
1.视口宽度媒体查询
/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width:768px) {
body {
background-color: pink;
}
}
/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width:1200px) {
body {
background-color: skyblue;
}
}2.媒体查询书写顺序
/*
视口宽度 >= 768px，网页背景色是 粉色
视口宽度 >= 992px，网页背景色是 绿色
视口宽度 >= 1200px，网页背景色是 skyblue
*/
/* css属性都有层叠性 */
@media (min-width:1200px) {
body{
background-color: skyblue;
}
}
@media (min-width:768px) {
body{
background-color: pink;
}
}
@media (min-width:992px) {
body{
background-color: green;
}
}
/* @media (min-width:1200px) {
body{
background-color: skyblue;
}
} */3.媒体查询基本语法
4.媒体查询-媒体特性
5.外链式CSS引入
<!-- 视口宽度 >= 992px，网页背景色为粉色 -->
<link rel="stylesheet" href="./one.css" media="(min-width:992px)">
<!-- 视口宽度 >= 1200px，网页背景色为绿色 -->
<link rel="stylesheet" href="./two.css" media="(min-width:1200px)">6.媒体查询-隐藏
/* 如果检测到视口宽度小于768px，认为是手机端，left隐藏 */
@media (max-width:768px) {
.left{
display: none;
}
}BootStrap框架
栅格系统（浮动实现）
1. 栅格系统
2.栅格系统的相关类名
<!-- 版心样式:自带左右各15px的padding -->
<div class="container">1</div>
<!-- row类作用就是抵消contain类的15px内边距，row有-15px的外边距 -->
<div class="container">
<div class="row">2</div>
</div>
<!-- 宽度100%:自带左右各15px的padding -->
<div class="container-fluid">3</div>全局样式
组件
JavaScript插件
定制
1195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
