outline-style: none;
outline-width: 1px;
outline-color: aqua;
| 轮廓线样式（宽度，颜色） |
outline: none;
| 轮廓线缩写形式 |
/*float: left;*/
float: right;
| 浮动之文字环绕（左浮动，右浮动） |
.box1{
float: left;
width: 300px;
height: 100px;
background-color: aquamarine;
}
.box2{
float: right;
width: 300px;
height: 100px;
background-color:brown;
}
.box3{
float: left;
width: 300px;
height: 100px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!--
一个元素浮动起来，会不在占有原来的位置（脱离文档流）,同时发生浮动的盒子会在同一行排列，如果说多个元素同时左浮动，元素就会从左到右同一行排列
-->
| 浮动 |
.banner{
width: 1200px;
background-color: aqua;
/* */
/*height: 300px;*/
}
.left{
float: right;
width: 500px;
height: 300px;
background-color: antiquewhite;
}
.right{
float: left;
width: 500px;
height: 300px;
background-color: blue;
}
p{
/*clear: right;*/
clear: both;
}
| 浮动造成的后果（高度塌陷） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one{
float: left;
background-color: grey;
}
.two{
float: right;
background-color: green;
}
.three{
float: left;
background-color: grey;
}
.four{
float: right;
background-color: green;
}
p{
clear: both;
}
</style>
</head>
<body>
<p class="one">老板有货吗？</p>
<p class="two">有!!!!</p>
<P class="three">这么凶，态度不够诚恳</P>
<p class="four">我爱你</p>
</body>
</html>
| 微信对话练习（浮动版） |
div{
width: 300px;
height: 100px;
background-color: azure;
border: 4px solid orange;
padding: 100px;
margin: 100px;
}
/*border+padding+content*/
| 盒子模型 |
div{
width: 300px;
height: 300px;
}
.box1{
background-color: aqua;
}
.box2{
/*margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;*/
/*上下左右外边距全是20px*/
margin: 20px;
/*上下外边距是20px，左右外边距是30px*/
margin: 20px 30px;
/*上外边距10px，左右20px，下外边距30px*/
margin: 10px 20px 30px;
/*上10，下20，左30，右40*/
margin: 10px 20px 30px 40px;
background-color:blue;
}
.box3{
background-color: burlywood;
}
| 外边距 |
div{
width: 200px;
height: 50px;
background-color: aqua;
margin: 0px auto;
}
| auto使用例子 |
div{
width: 300px;
height: 300px;
background-color: aqua;
overflow: auto;
/*padding-top: 20px;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 20px;*/
/*避免影响盒子大小*/
padding: 20px 40px;
padding: 10px 30px 40px;
box-sizing: border-box;
}
| 内边距 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 800px;
background-color: antiquewhite;
/*border: 1px solid black;*/
/*padding: 10px;*/
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
}
.son1{
background-color: aqua;
margin-top: 200px;
}
.son2{
background-color: blueviolet;
margin-bottom: 20px;
margin-top: 20px;
}
.son3{
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1 son"></div>
<div class="son2 son"></div>
<div class="son3 son"></div>
</div>
</body>
</html>
| 外边距塌陷 |
*{
padding: 0;
margin: 0;
}
| 元素默认的内外边距 |
*{
padding: 0;
margin: 0;
}
ul{
display: flex;
/*更改主轴方向*/
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
/*flex-direction: column-reverse;*/
/*主轴排列方式*/
/*justify-content: center;*/
/*两边贴边，中间剩余空间*/
/*justify-content: space-between;*/
/*justify-content: flex-end;*/
/*平分剩下的空间*/
/*justify-content: space-around*/
/*交叉轴的对齐方式*/
align-items: center;
flex-wrap: wrap;
width: 1200px;
height: 800px;
background-color: blue;
flex-wrap: wrap;
}
li{
list-style: none;
width: 200px;
height: 400px;
opacity: 0.3;
background-color: aqua;
border-radius: 20px;
}
.four{
/*order的值越小，排列越靠前*/
order: -2;
flex-shrink: 0;
align-self: flex-end;
}
</style>
</head>
<body>
<div class="banner">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="four">4</li>
</ul>
</div>
</body>
| 弹性盒子 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.one{
display: flex;
width: 1226px;
height: 628px;
background-color: grey;
}
.two{
width: 234px;
height: 628px;
flex-direction: row;
background-color: aliceblue;
}
.three ul{
display: flex;
width: 992px;
height: 628px;
flex-wrap: wrap;
background-color: aqua;
justify-content: space-between;
align-content: space-between;
list-style: none;
padding-left: 20px;
}
.four{
list-style: none;
width: 234px;
height: 300px;
background-color: blue;
flex-wrap: wrap;
align-items: flex-end;
}
</style>
</head>
<body>
<div class="one">
<ul>
<div class="two"></div>
</ul>
<ul>
<div class="three">
<ul>
<li><div class="four" ></div></li>
<li><div class="four"></div></li>
<li><div class="four"></div></li>
<li><div class="four"></div></li>
<li><div class="four"></div></li>
<li><div class="four"></div></li>
<li><div class="four"></div></li>
<li><div class="four"></div></li>
</ul>
</div>
</ul>
</div>
</body>
</html>
| 简易框架构建 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.banner{
display: grid;
grid-template-columns: 100px 200px 200px 1fr;/*repeat(4,100px)*/
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
grid-template-rows: 200px;
row-gap: 20px;
column-gap: 20px;
width: 800px;
height: 400px;
background-color: blue;
}
.box{
/*grid-row-start: 2;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 3;*/
grid-row: 2/4;
grid-column: 1/3;
}
</style>
</head>
<body>
<div class="banner">
<div class="item" style="background-color: aqua;"></div>
<div class="item" style="background-color: red;"></div>
<div class="item" style="background-color: yellow;"></div>
<div class="item" style="background-color: chocolate;"></div>
</div>
</body>
</html>
| grid布局 |
扫一扫
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
