1. CSS知识：
i. CSS基础知识这里不作赘述，有兴趣自查 MDN Web文档。
ii.CSS----- 布局：
1.布局是什么--> 把页面分成一块一块，按左中右、上中下等进行排列
2.布局分类：
a.固定宽度布局 一般宽度为 960 /1000 / 1024 px
b.不固定宽度布局，主要靠文档流的原理来布局
c.响应式布局( PC上固定宽度，手机上不固定宽度，即一种混合布局)
3.布局方向：
a.从大到小----》先定下大布局，然后完善每个部分的小布局
b.从小到大----》先完成小布局，然后组合成大布局
3.布局常用属性：
图示选择.png
- a.
float布局：
i.步骤：
子元素加浮动float:left 和 width&父元素上加浮动清除.clearfix::after{ content: ''; display: block; clear: both; }
ii.布局样式：
a.两栏布局（顶部导航条）
· HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header class="top clearfix ">
<div class="logo">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584185973384&di=699dd1315ff0a4d5dfd6d90957420864&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fa71ea8d3fd1f4134adac45b3201f95cad0c85e67.jpg" alt="" title="">
</div>
<ul class="nav clearfix">
<li>
<a href="javascript:;">首页</a></li>
<li><a href="javascript:;">主题</a></li>
<li><a href="javascript:;">关于</a></li>
</ul>
</header>
</body>
</html>
· CSS代码：
/**--------------------------------------------
CSS默认样式清除
--------------------------------------------**/
*{
margin: 0;padding: 0;box-sizing:border-box;
}
ul,ol{
list-style:none;
}
a{ text-decoration:none;}
img{max-width: 100%;}
/* ------- float样式清除 --------- */
.clearfix::after{
content:'';
display:block;
clear:both;
}
/**--------------------------------------------
顶部样式 *header*
--------------------------------------------***/
header{
border:1px solid #c40;
width:650px;
}
/* 左侧logo */
div.logo{
float:left;
}
div.logo >img{
height: 30px;
vertical-align:top;
margin-top: .5px;
margin-left: 5px;
}
/* 右侧导航条nav */
ul{
float:right;
}
li{
float:left;
background: #95d4b1;
margin-left: 10px;
margin-top: 3px;
margin-bottom: 3px;
padding: 4px .5em;
}
b.三栏布局（内容区）
· HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="Author" content="mengerfei">
<title>float测试</title>
</head>
<body>
<div class="content clearfix">
<aside class="float-left">这是左侧！</aside>
<main class="float-left">这是中间</main>
<div class="ad float-left">这是右边</div>
</div>
</body>
</html>
· CSS代码：
/**--------------------------------------------
CSS默认样式清除
--------------------------------------------***/
*{
margin: 0;padding: 0;box-sizing:border-box;
}
ul,ol{
list-style:none;
}
a{ text-decoration:none;}
img{max-width: 100%;}
/* ------- float样式清除 --------- */
.clearfix::after{
content:'';
display:block;
clear:both;
}
/* ------- float样式 --------- */
.float-right{float: right;}
.float-left{float: left;}
/**--------------------------------------------
内容区样式 *content*
--------------------------------------------***/
.content{
outline: 1px solid #f40;
margin-top: 20px;
}
/* ------- 左部aside样式 --------- */
.content aside{
outline: 1px solid black;
width: 150px;
height: 300px;
}
/* ------- 中部main样式 --------- */
.content main{
outline: 1px solid green;
width: 350px;
height: 300px;
}
/* ------- 右部.ad样式 --------- */
.content .ad{
outline: 1px solid purple;
width: 150px;
height: 300px;
}
c.平均布局（展示区）
· HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>平均布局</title>
</head>
<body>
/* ------- image展示样式 --------- */
<div class="image clearfix">
<div class="xx clearfix">
<div class="image-list">1</div>
<div class="image-list">2</div>
<div class="image-list">3</div>
<div class="image-list">4</div>
<div class="image-list">5</div>
<div class="image-list">6</div>
<div class="image-list">7</div>
<div class="image-list">8</div>
</div>
</div>
</body>
</html>
· CSS代码：
/**--------------------------------------------
CSS默认样式清除
--------------------------------------------***/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ------- float样式清除 --------- */
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* ------- image展示样式 --------- */
div.image {
outline: 1px solid #000;
width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
div.image .xx .image-list {
border: 5px solid #f50;
background: #00ff00;
width: 163px;
height: 163px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
div.image .xx {
margin-right: -20px;
}
- b.
flex布局：
1.使一个元素变成flex容器---->display: flex;
2.container的样式：
改变items流动方向（主轴）: flex-direction: row | row-reverse |
column | culumn-reverse;
改变折行 flex-wrap; nowrap | wrap | wrap-reverse;
改变主轴对齐方式默认主轴是横轴，除非改变了flex-direction方向: .container{ justify-conntent :flex-start | flex-end | center | space-between | space-around | space-evenly }
次轴对齐 align-items :gfgfghfghb flex-start | flex-end | center | stretch | baseline
多行内容 align-content; flex-start | flex-end | center | space-between | space-around | stretch
flex item 属性
item上面加order 加flex-grow(控制自己如何长胖)
flex-shrink控制如何变瘦一般写flex-shrink:0 防止变瘦，默认为1
flex-basis控制基准宽度 默认是auto
flex具体属性及用法这里不做赘述
. 浏览器渲染原理:
渲染原理.png
CSS 动画的两种做法（transition 和 animation）:
第一种：
01.gif
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画--跳动的心01</title>
</head>
<body>
<div class="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
CSS部分：
*{margin: 0;padding: 0;box-sizing:border-box;}
.heart{
display: inline-block;
margin: 100px;
position:relative;
transition:all 1s;
}
.heart:hover{
transform: scale(1.1);
}
.heart>.left{
background: red;
transform:rotate(-45deg) translateY(31px);
width: 50px;
height:50px;
border-radius:50% 50% 0 0 ;
position:absolute;
bottom:50px;
left:-50px;
}
.heart>.right{
background: red;
transform:rotate(-45deg) translateY(26px);
width: 50px;
height:50px;
border-radius: 0 50% 50% 0 ;
position:absolute;
bottom:46px;
right:-9px;
}
.heart>.bottom{
background: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
第二种：
02.gif
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画-跳动的心02</title>
</head>
<body>
<div id="heart">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
CSS部分：
*{box-sizing: border-box;}
#heart{
display: inline-block;
margin: 100px;
position: relative;
animation: .5s heart infinite alternate-reverse;
}
@keyframes heart {
0%{
transform: scale(1);
}
100%{
transform: scale(1.2);
}
}
#heart>.left{
background: red;
width: 50px;
height: 50px;
position: absolute;
transform: rotate(45deg) translateX(31px);
bottom: 50px;
left: -50px;
border-radius: 50% 0 0 50%;
}
#heart>.right{
background: red;
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
transform: rotate(45deg) translateY(31px);
bottom: 50px;
right: -50px;
border-radius: 50% 50% 0 0;
}
#heart>.bottom{
background: red;
width: 50px;
height: 50px;
transform: rotate(45deg);
}
网友评论