定位（position）
默认值为static，静态定位
1.相对元素（relative）
定位元素会脱离文档流，但相对定位不会
通常情况其为绝对定位服务，可以通过left、right、top、bottom对其进行设置。
元素仍保持为定位前的位置，并且占有一定的空间。
2.绝对定位（absolute）
该定位的包含块为祖先元素中的第一个定位元素，若祖先元素中没有定位元素，则它的包含块为整个网页，通过top、left、bottom、right进行位置控制。
下面为一个绝对定位元素的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./所有css/二级菜单.css">
</head>
<body>
<header class="header clearfix">
<ul class="topnav">
<li><a href="">Lorem.</a></li>
<li><a href="">Vel?</a></li>
<li><a href="">Voluptates!</a></li>
<li>
<a href="">客户服务</a>
<div class="sumbmune">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio enim quod praesentium pariatur quidem distinctio laborum dignissimos totam hic id, mollitia voluptatem iusto magni quas qui molestiae, sed laudantium animi!
</div>
</li>
<li><a href="">Ea.</a></li>
</ul>
</header>
<p>Lorem,Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error ipsum sapiente enim iusto vero. Sunt atque obcaecati debitis neque commodi esse ipsa numquam dignissimos? Nemo beatae itaque, eaque repellendus voluptas possimus sit atque quasi dolores ab labore tempore reprehenderit repellat hic explicabo magnam laudantium voluptate omnis. Tempore soluta, excepturi quibusdam quod reiciendis, provident corporis non iste cum vitae, aliquid dolores deleniti omnis natus officia. Nisi deleniti perferendis ipsa ex optio reprehenderit tempore perspiciatis enim aliquam mollitia aspernatur nemo, fugiat nam saepe et quo doloremque ratione unde facilis sunt eligendi. Dicta eos architecto ducimus repellat quae! Qui impedit deleniti beatae inventore? ipsum dolor sit amet consectetur adipisicing elit. Expedita repudiandae assumenda eum provident nulla deserunt deleniti dolorem, dolorum voluptas velit illum repellendus quae aperiam, adipisci nihil vero, dolore necessitatibus. Laboriosam quas ipsam voluptate saepe iure voluptatibus optio, repudiandae dolorum dignissimos aspernatur quibusdam odit accusamus fugiat repellendus omnis eaque nostrum incidunt rem voluptates tenetur? Delectus, error blanditiis doloremque magnam atque ea, repellendus accusamus excepturi, dolores dolor iure maxime veritatis consequatur nemo eveniet alias magni totam pariatur? Ea sit earum, assumenda animi libero voluptatum error nam? Culpa sequi dicta dolore id nihil voluptates facere numquam voluptatem architecto itaque, eius fugiat quia commodi aut ab ad ea? Sapiente alias qui ipsum earum quae exercitationem aspernatur quas, expedita sint unde rerum enim obcaecati officia excepturi magnam ea. Quod, temporibus, quaerat dolor ut ex, dolorem neque architecto quidem dolorum similique mollitia fugiat. Suscipit explicabo quaerat fugiat repellat dolorem quidem asperiores repellendus laudantium debitis qui id sapiente aliquid temporibus cum natus animi, enim officia dolorum ea. Odit, voluptate aspernatur sint sapiente itaque officia pariatur ab corrupti earum vitae non doloribus molestias dignissimos unde sit ipsam eum error dolor aliquid soluta enim doloremque. Quam architecto nisi fuga perferendis, quae repellat. Minus fugiat sed saepe voluptas ea vitae?</p>
</body>
</html>
css代码如下：
.clearfix::after{
content:"";
display: block;
clear: both;
}
.header{
background-color: #e3e4e5;
color:#999;
height: 40px;
line-height: 40px;
}
.header .topnav li{
float: left;
list-style:none;
width: 100px;
margin:0 50px;
height: 40px;
text-align: center;
box-sizing: border-box;
position: relative;
}
.header .topnav li:hover{
border: 2px solid black;
border-bottom: none;
background-color:#fff;
line-height: 35px;
}
.header .topnav>li a{
text-decoration: none;
}
.header .topnav li .sumbmune{
line-height: 2;
width: 300px;
text-align: left;
display: none;
border:2px solid black;
position: absolute;
right: -2px;
}
.header .topnav>li:hover .sumbmune{/*找到鼠标移入的Li元素的sumbmune*/
display: block;
background: #fff;
}
.header .topnav>li:hover::after{
content: "";
width: 100%;
height: 5px;
position:absolute;
background-color:#fff;
left:0;
bottom:0;
}
body p {
background:#fff;
color: black;
}
效果如下：
注：绝对定位通常会脱离文档流和其他元素重叠，不占据空间
3.固定定位（fixed）
与绝对定位最大的不同点就是：固定定位的包含块为可视窗口
当margin设为auto时，会自动吸收剩余空间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width", initial-scale=1.0">
<title>Document</title>
<style>
div img {
width:100%;
position: relative;
}
.shikou{
position: fixed;
width:100%;
height:100%;
left: 0;
top: 0;
background:rgba(0,0,0,.7);
}
.chuangkou{
position: absolute;
background-color: #fff;
width: 400px;
height: 300px;
border: 2px solid #fff;
margin:auto;
left:0;
top:0;
right:0;
bottom: 0;
padding: 35px;
box-sizing: border-box;
border-radius: 2%;
}
.guanbi{
background:#fff;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
position: absolute;
right: -25px;
top: -25px;
border: 2px solid #FFF;
}
</style>
</head>
<body>
<div><img src="./Saved Pictures/1536961_20180206164228809050_0.jpg" alt=""></div>
<div class="shikou">
<div class="chuangkou">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem corporis provident nesciunt dolor iste ab officia tempore sequi distinctio natus nostrum temporibus voluptas vel assumenda ipsam laudantium cum repellendus non quidem eaque pariatur vitae possimus, nulla beatae. Possimus odit velit iste, quas ab dicta, dolorum ut, error doloremque impedit eligendi.
<div class="guanbi">
X
</div>
</div>
</div>
</body>
</html>
表示透明度rgba
opacity：它设置的是整个盒子以内所有元素的透明，取值为0~1
4.多个元素重叠时
涉及z-index属性，可正可负，为负时遇到常规流、浮动元素会被覆盖掉
该值越大越靠近用户，只有定位元素设置该值有效
<!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>
div{
position: absolute;
}
.big{
background: aqua;
width: 300px;
height: 200px;
}
.cir{
width: 100px;
height: 150px;
}
.rec{
width: 100px;
height: 150px;
}
.big .rec{
background: #4a5a6a;
z-index: -2;
}
.big .cir{
right: 0;
bottom: 0;
background: #000;
z-index: 1;
}
</style>
</head>
<body>
<div class="big">
<div class="rec"></div>
<div class="cir"></div>
</div>
</body>
</html>
此时
更多伪类选择器
| 伪类选择器 | 含义 |
|---|---|
| first-child | 选中第一个子元素 |
| last-child | 最后一个子元素 |
| nth-of-type | 子元素中第一个指定类型元素 |
| nth-child | 指定第几个元素（even为偶数个；odd为奇数个） |
| first-letter | 元素中第一个字母 |
| first-line | 元素中第一行文字 |
| selection | 表示用户框选的部分 |
| focus | 元素焦距时的样式 |
| checked | 单选或多选框被选中时的样式 |
- 盒子隐藏
display：none不生成盒子
visibility：hidden生成盒子，只是视觉上移除盒子，盒子仍占据空间。 - 背景图
涉及的CSS属性
1.background-image：url（路径）
默认情况下，背景图会在横坐标和纵坐标中重复
又涉及了background-repeat取值有：no-repeat、repeat-x、repeat-y
2.background-size背景的尺寸
3.background-position（center/50% 50%都表示居中）
4、background-attachment
控制被背景图是否固定（fixed是相对于视口） - iframe元素（可替换元素）
通常用于在网页中嵌入另一个页面，为行盒，具有行块盒特点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=43642905&bvid=BV1eb41127Qw&cid=76466932&page=1" scrolling="no" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
</body>
</html>
嵌入了别人网站的视屏：
- 在页面中使用flash
<object data="文件地址" type="文件类型">
<param name="" value="">
</object>
<embed src="路径" type="类型">
- 表单元素
input输入框
password密码框 data日期框 search搜索 color颜色框
number数字输入框 checked多选框 radio单选框`
<input type="输入框类型" value="输入框的值">
select元素
子元素为option，为下拉列表选择框（默认选项为seleced）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你所在的城市：
<select name="city" id="">
<option value="">上海</option>
<option value="">湖南</option>
<option value="">陕西</option>
<option value="">北京</option>
<option value="">台湾</option>
</select>
</body>
</html>
结果如下：
按钮元素
type属性有reset、submit、botton，默认为submit。
form元素
通常会将整个表单元素放置form元素内部，作用是单提交表单时，会将form元素内部的表单内容以合适的方式提交到服务器
action属性表示提交给谁
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
