盒子模式、浮点、定位
1.元素显示模式
<style>
/* 块状元素,独占一行,可以设置宽高等属性,
宽度不设置默认是父盒子的百分百,高度是内容撑开 */
div{
width: 100px;
height: 100px;
background-color: red;
}
/* 行内元素和其他行内元素一行显示,并且宽高不能设置,以内容撑开 */
span{
width: 100px;
height: 100px;
background-color: red;
}
/* 行内块元素,和其他行内元素在一行显示,并且宽高可以设置,默认以内容撑开 */
input{
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div>块状元素1</div>
<div>块状元素2</div>
<span>行内元素1</span>
<span>行内元素2</span>
<input type="text" name="" id="">
<input type="text" name="" id="">
</body>
1.1显示模式转换
<style>
div{
width: 100px;
height: 100px;
background-color: pink;
/* 设置为块元素 */
/* display: block; */
/* 设置为行内块 */
/* display: inline-block; */
/* 设置为行内元素 */
/* display: inline; */
/* 取消显示模式,就会隐藏 */
display: none;
}
</style>
<body>
<div>div1</div>
<div>div2</div>
</body>
2.盒子模式
<style>
div{
/* border: 1px solid red; */
border-top: 5px solid red;
border-right: 5px solid pink;
border-left: 5px solid purple;
border-bottom: 5px solid green;
width: 100px;
height: 100px;
}
</style>
<body>
<div>内容1</div>
<div>内容2</div>
</body>
2.1表格细边框
<style>
/* 每个单元格的边框会发生重叠,等于是2px */
table,td{
border: 1px solid red;
/* 合并相邻的边框 */
border-collapse: collapse;
}
/* 可以通过单独设置table的上左,再设置每个单元格的右下边框即可 */
/* table{
border-top: 1px solid red;
border-left: 1px solid red;
}
td{
border-right: 1px solid red;
border-bottom: 1px solid red;
} */
</style>
<body>
<table border="1" cellspacing=0 width=500 align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
2.2内边距
<style>
a{
border: 1px solid red;
display: inline-block;
/* width: 100px;
height: 20px;
text-align: center; */
/* padding-left: 20px;
padding-right: 20px; */
/* 上 右 下 左 */
/* padding: 10px 20px 10px 20px; */
/* 上下 左右 */
padding: 10px 20px;
text-decoration: none;
color: #666;
}
a:hover{
background-color: #ddd;
color: orange;
}
</style>
<body>
<a href="">首页</a>
<a href="">个人信息</a>
</body>
2.3盒子居中
<style>
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 0 auto;
}
</style>
2.4外边距
<style>
div{
width: 100px;
height: 100px;
}
#a{
background-color: orange;
/* 盒子之间的距离是最大的那个,不会叠加30px */
margin-bottom: 20px;
}
#b{
background-color: pink;
margin-top: 10px;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
2.5盒子阴影
<style>
div{
width: 100px;
height: 100px;
border: 1px solid;
/* box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1); */
}
div:hover{
box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
</style>
3.优先级
<style>
div{
width: 100px;
height: 100px;
background-color: red !important;
color: green !important;
}
#a{
background-color: green;
}
.b{
background-color: yellow;
}
*{
color: pink;
}
/* 继承性优先级最低<*<标签<class<id<行内<!important */
</style>
3.1权重性计算
<style>
/* 0 0 0 1 */
div{
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
}
/* 0 0 1 1 */
div.b{
background-color: green;
}
/* 0 0 1 0 */
.b{
background-color: hotpink;
}
/* * 和继承 为 0 0 0 0
标签 为 0 0 0 1
class 为 0 0 1 0
ID 为 0 1 0 0
行内 为 1 0 0 0 */
</style>
4.浮动
<style>
div{
width: 200px;
height: 200px;
}
#a{
background-color: red;
}
/* 如果width太宽一行盛不下就挤到下一行,贴着上一行中height最小的开始 */
#b{
background-color: green;
float: right;
}
#c{
background-color: blue;
}
/* d被挡住了 还在文档流,abc在浮动流*/
#d{
background-color: blueviolet;
height: 220px;
}
</style>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</body>
4.1父子盒子浮动
<style>
#sup{
width: 600px;
border: 1px solid;
margin: 0 auto;
/* height: 300px; */
}
/* 浮动也是在父盒子当中 */
#sub1{
width: 350px;
height: 300px;
border: 1px solid green;
float: left;
}
#sub2{
width: 150px;
height: 300px;
border: 1px solid blue;
float: right;
}
</style>
<body>
<div id="sup">
<div id="sub1"></div>
<div id="sub2"></div>
</div>
</body>
4.2清除浮动
<style>
#sup{
width: 600px;
border: 1px solid;
margin: 0 auto;
/* 给父盒子添加高度 */
height: 300px;
}
/* 浮动也是在父盒子当中 */
#sub1{
width: 350px;
height: 300px;
border: 1px solid green;
float: left;
}
#sub2{
width: 150px;
height: 300px;
border: 1px solid blue;
float: right;
}
p{
background-color: red;
}
</style>
5.圆、圆边框
<style>
div{
width: 100px;
height: 100px;
/* background-color: red; */
border: 1px solid red;
border-radius: 50%;
}
</style>
6.定位
6.1相对定位
<style>
div{
width: 100px;
height: 100px;
border: 1px solid;
/* 设置相对定位 */
position: relative;
float: left;
}
div:hover{
top: 10px;
}
a{
text-decoration: none;
position: relative;
color: red;
}
a:hover{
top: 2px;
left: 2px;
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<a href="">百度</a>
</body>
6.2绝对定位
<style>
div{
width: 100px;
height: 100px;
border: 1px solid;
/* 设置绝对定位 */
/* 如果上级标签没有使用定位的情况下,则默认以浏览器左上角为精准 */
position: absolute;
}
p{
width: 100px;
height: 100px;
border: 1px solid;
/* 设置绝对定位 */
position: absolute;
top: 0px;
margin: 0px;
padding: 0px;
}
</style>
<body>
<div>1</div>
<p>2</p>
</body>
6.3固定定位
用于滚动时固定在某处的栏
<style>
div{
width: 50px;
height: 50px;
background-color: pink;
position: fixed;
bottom: 100px;
right: 50px;
}
</style>