css

表单标签的补充说明
前端基础之CSS
盒子模型
浮动布局（float）
溢出属性（overflow）
定位
z-index之模态框案例
- 层叠顺序
- 模拟z-index模态框
简易博客页面搭建

表单标签的补充说明

1.form表单功能

表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和label标签
form表单：获取用户的数据并发送给后端（服务器）
eg：网站的登录、注册、验证码等...

2.表单使用原理

访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

input输入的标签两大重要的属性工作原理

1.用户获取用户数据的标签至少应该含有name属性
    name属性相当于字典的键
  用户数据的数据会被保存到标签的value属性中
     value属性相当于字典的键
2.如果不需要用户填写的数据  只需要选择  那么我们需要自己填写value
<input type ="radio" name="gender" value= "male" >
ps:没有name属性的标签  form表单会直接忽略  不会发送

编写input解释器会出现黄色阴影问题

直接编写input会出现黄色阴影，是说明这么写不太规范，原因在于input需要结合lable一起使用
label标签：
  解释说明这么标签将来是干什么的，里面的for属性是用来与input里面的id进行绑定的，绑定之后，它其实以后也是input的一部分，
  点击label 标签也相当于点击了lable标签。
  方式1：label包裹input并邦定id
      <label for='input标签id值'> input标签</label>
  方式2：label与input单独出现并绑定id
  <label for="d1">username:</label>
      <input type="text" id="d1">

获取用户输入的标签如果不是让用户自己写而是选择那么标签需要自己写value

<input type="radio" name="gender" value="male">男
<input type="checkbox" name="hobby" value="basketball">篮球
<select name="province" id="">
	<option value="sh">上海</option>
</select>

标签的属性如果和属性值相等那么可以简写

<input type= "file" multiple="multiple">
<input type = "file" multiple>

针对radio和checkbox可以默认选中

	<input type="radio" name="gender" checked="checked">
 	<input type="radio" name="gender" checked>
 	<input type="checkbox" checked="checked">
   	<input type="checkbox" name="gender" checked>

针对option标签也可以默认选中

<option value="" selected="selected">222</option>
    <option value="" selected>222</option>

下拉框与文件上传可以复选

<input type= "file" multiple>
<select name="" id= "" multiple>

完整的注册页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>注册页面</h2>
<form action="">
    <p>  <!--用户名注册-->
        <label for="d1">username:</label>
        <input type="text" id="d1">
    </p>
    <p>  <!--密码注册-->
        <label for="d2">password:</label>
        <input type="password" id="d2" placeholder="密码">
    </p>  <!--type属性 date 日历展示-->
    <p>birthday:<input type="date"></p>
    <p>  <!-- radio:单选   gender:性别 表指定名称   checked="checked":默认选中-->
        <input type="radio" name="gender" checked="checked">male
        <input type="radio" name="gender">female
        <input type="radio" name="gender">others
    </p>
    <p>hobby:  <!-- checkbox:多选 -->
        <input type="checkbox" checked>篮球
        <input type="checkbox" checked>足球
        <input type="checkbox" checked>双色球
    </p>
    <p>email:  <!--邮箱-->
        <input type="email">
    </p>
    <p>province  <!--地区-->
        <select name="" id="">
            <option value="">北京</option>
            <option value="" selected>深圳</option>
            <option value="">上海</option>
        </select>
    </p>
    <p>明星
        <select name="" id="">
            <option value="">李易峰</option>
            <option value="">张云龙</option>
            <option value="">胡一天</option>
        </select>
    </p>
    <p>info:  <!--个人简介-->
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <p>file:  <!--上传文件-->
        <input type="file">
    </p>
    <p>files:  <!--上传文件-->
        <input type="file" multiple>
    </p>
    <p>
        <input type="submit" value="注册">
        <input type="button" value="帮助">
        <input type="reset" value="重置">
    </p>
</form>

</body>
</html>

前端基础之CSS

1.关于CSS的介绍

CSS(Cascding Style Sheet，层叠样式表)定义如何显示HTML元素，也就是给HTML标签修改样式。

当浏览器读取到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）

可能我们还会看到CSS3，后面这个数字指的是它的版本号

css语言开发的文件是以.css为后缀，通过在HTML文件中引入该css文件来控制HTML代码的样式（css语言代码也可以直接写在HTML文件中）

采用的语言是级联样式表(Cascding Style Sheet)，也属于标记语言

补充：
  标签的两大重要属性>>>:区分标签
    1.class属性
       分门别类  主要用于批量查找
   2.id属性
       精确查找  主要用于点对点

2.CSS语法

1.每个css样式由两个部分组成：选择器和声明，声明又包括属性和属性值，每个声明之后要以分号作为结束
2.语法结构
 选择器{
    属性名1：属性值1；
    属性名2：属性值2；
}
3.css注释语法
/*注释内容*/

3.三种编写css的方式

css是来控制页面标签的样式，但是可以根据实际请况书写在不同的位置，放在不同位置有不同的专也叫法，可以分为行内式、内部式和外部式三种。
1.head内style标签内部编写（学习时候使用）
2.head内link标签引入（标准的方式）
3.标签内部通过style属性直接编写（不推荐）

3.1style内部直接编写css代码

嵌入式是将css样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head>
     <meta charset='UTF-8'>
     <title>Title</title>
     <style>
       h1{
           color: red;
       }
     </style>
</head>

3.2link标签引入外部css代码

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用该方式。
<head>
    <meta charset='UFT-8'>
    <title>Title</title>
    <link rel="stylesheet" href="css真正的.css">
</head>

3.3标签内直接书写

<body>
   <h1 style="color: blue">饿死了</h1>
</body>

4.css四个基本选择器(标签选择器、类选择器、id选择器、通用选择器)

因为同一个页面上有很多相似的标签并且这些标签在不同的位置有不同的样式所以为了能够区分我们肯定先学习如何查找指定的标签

/*1.标签选择器：直接编写标签名来查找标签*/
div {  
     color：green  /*查询所有的div标签 并将内部的文本颜色变为绿色*/
}

/*2.类选择器：通过编写class的值来查找标签*/
.c1{
  color：red；/*查找所有class属性中含有c1的标签  并将内部的文本颜色变为红色*/
}

/*3.id选择器：通过编写id的值来精确查找标签*/
#d1{
    color：aquamarine  /*查找id值是d1的标签 并将内部文本颜色改为天青色*/
}

/*4.通用选择器：查找所有的标签*/
*{
 color：blue；/*查找所有的标签  并将内部的文本颜色改为蓝色*/
}

5.css组合器（重点）

为了区分嵌套标签之间的关系，我们发明了一种称呼

<div>div
    <span>div里的span</span>
    <p>div里的p
        <span>div里的p里的span</span>
    </p>
    <span>div里的span</span>
</div>
<span>与div同层的span1</span>
<span>与div同层的span2</span>
<span>与div同层的span3</span>
/*
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
*/

5.1后代选择器（特征为空格）空格的意思就是后代

/*查找div标签内部所有的span(后代)*/
/*1.后代选择器: 两个选择器之间空格隔开 查找前面选择器获取到的标签内部所有符合空格后面选择器要求的标签*/
<style>
	div span{
				color: orchid;
			}
</tyle>

5.2儿子选择器（特征>）

/*查找div标签内部所有的儿子span*/
/*2.儿子选择器 两个选择器之间大于号隔开 查找前面选择器获取到的标签内部第一层级符合大于号后面选择器要求的标签*/
<style>
	div > span {
		color: orange;
	}
</syle>

5.3毗邻选择器（特征为+）

/*查找div标签同级别下面紧挨着的一个span标签(弟弟)*/
/*3.毗邻选择器*/
<style>
   div + span {
            color: aqua;
           }
</style>

5.4.弟弟选择器(特征为~)

/*查找同级别下面所有的span(不需要紧挨着)*/
<style>
   div ~ span {
            color: deeppink;
        }
</style>

6.css属性选择器

所有的标签除了有自己默认的属性之外 还可以拥有自定义的任意属性
    <p id="d1" class="c1" name="jason" pwd="123">123</p>

6.1查找属性名含有name的标签

<style>
   [name] {
     background-color: lightpink;
   }
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>

6.2查找属性名含有name并且值是username的标签

<style>
    [name='username'] {
      background-color: antiquewhite;
    }
</style>
<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>

6.2查找input标签并且属性名含有name值是username的

<style>
    input[name='username'] {
      background-color: cadetblue;
    }
</style>

<body>
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<a href="" name="username" value="321">我是a标签</a>
<div name="username">我是div</div>
</body>

7.css选择器之分组

7.1当多个选择器查找到的标签需要调整相同的样式，那么可以合并

当多个选择器查找到的标签需要调整相同的样式，那么可以合并
<style>
div,span,p {  /*查找div或者span或者p*/
            color: red;
        }
</style>

7.2并且合并的选择器彼此不干扰也没有类型的限制

<style>
div,#d1,.c1 {  /*标签查找div id查找d1 类查找c1*/
            color: red;
        }
</style>

7.3不并列同样可以使用组合选择器

<style>
.c1 p {   /*查找class为c1的后代p标签*/
            color: red;
        }
</style>

7.4还可以在选择器基础之上添加额外的选择使得查找更精确

<style>
    div#d1 {  /*查找id为d1的div标签*/
    color: red;
  }
</style>


<style>
    div.c1 {  /*查找class为c1的div标签*/
    color: red;
  }
</style>

8.css选择器之伪类选择器

a标签默认的颜色有两种 紫色跟蓝色
    紫色:链接地址已经被点击过了
    蓝色:链接地址从来没有点击过

8.1:hover(鼠标悬浮在上面会发送变化)

  <style>
    a:hover{
      color: deeppink;
    }
  </style>
<body>
<a href="" name="a" value="321">我是a标签,鼠标未停留</a><br>
<a href="" name="b" value="321">我是a标签，鼠标停留</a>
</body>

8.2:focus(聚焦状态)

  <style>
    [name]:focus {
      background-color: cadetblue;
    }
  </style>
<body>
<input type="text" name="username">
</body>

8.3:link(未访问状态)

  <style>
    a:link{
      color: lightpink;
    }
  </style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>

8.4:active(选定的链接)

  <style>
    a:active{
      color: darkorange;
    }
  </style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>

8.5:visited(以访问的状态)

    a:visited{
      color: darkorange;
    }
  </style>
<body>
<a href="css基本选择器.html">我是a链接</a>
</body>

9.css选择器之伪元素选择器(first-letter、before、after)

伪元素选择器可以用在解决标签浮动所带来的的负面影响也可以用来做数据的防爬

  <style>
    p:first-letter{
      /*设置第一个字的大小、颜色*/
      font-size: 48px;
      color: green;
    }
    p:before{
      /*在文本前面添加信息*/
      content:"歌词：";
      color:salmon;
    }
    p:after{
      /*在文本后面面添加信息*/
      content:"结束了";
      color: cornflowerblue;
    }
  </style>
<body>
<p>
  想着你的感觉，有如风的缠绻，吹乱我的日夜，吹也吹不走你的容颜
</p>
</body>

10.css选择器优先级

10.1.相同选择器不同导入方式(相同距离优先)

相同选择器不同导入方式(相同距离优先)
选择器系统遵循就进原则 从上往下谁离标签更近谁说了算
	就近原则
2.选择器不同的情况
	行内 > id选择器 > 类选择器 > 标签选择器
 !important

10.2.不同选择器不遵循就近原则>>>:优先级

不同选择器不遵循就近原则>>>:优先级
行内选择器 > id选择器 > 类选择器 > 标签选择器
 !important

10.3.!important

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试Css中的!Important区别</title>
</head>
<style type="text/css">
.testClass{
color:blue !important;
}
</style>
<body>
    <div class="testClass" style="color:red;">
<!--      虽然元素的style中有testClass类的定义，但是在上面的css定义中的用!important限定的定义却是优先级最高的-->
        测试Css中的Important
    </div>
</body>
</html>

无论是在ie6-10或者Firefox和Chrome表现都是一致的，都显示蓝色。

这种情况也同时可以说明ie6是可以识别!important的，只是这个是ie6的一个缺陷吧。如果写成下面的样式，ie6是识别不出来的：

.testClass{ 
color:blue !important;
color:red;
}

当然，也可以通过以下方式来让ie6识别：

.testClass{
color:blue !important;
}
.testClass{
color:red;
}

通过以上方式也是可以让ie6显示成蓝色的。

11.字体样式

高度和宽度

width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，行内标签的宽度由内容来决定
<style>
p {
    height: 1000px;  /*高度*/
    width: 50px;	/*宽度*/
}
</style>

字体大小

字重

font-weight用来设置字体的字重（粗细）。

font-weight: bolder;  	/*字体粗*/
font-weight: lighter;	 /*字体细*/

文本颜色

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如:  red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

在一些截图软件中我们可以看到颜色的RGB

文字属性

文字对齐
  text-align 属性规定元素中的文本的水平对齐方式。
       left      左边对齐
       right     右对齐
       center    居中对齐
       justify   俩端对其
文字装饰
  text-decoration 属性用来给文字添加特殊效果。
  主要用于去除a标签默认的下划线
       none         默认定义标准的文本。
       underline    定义文本下的一条线。
       overline     定义文本上的一条线。
       line-through 定义穿过文本下的一条线。
       inherit      继承父元素的text-decoration属性的值。
 例如：
  a {
      text-decoration: none;
  }
首行缩进
  默认文字大小是16px 32像素：
  p {
      text-indent: 32px;
  }

12.背景属性

背景颜色

<style>
div {
background-color: orange;
height: 1600px;
width: 1600px;
}   
</style>

背景图片

<style>
div {
        background: url("https://img0.baidu.com/it/u=2196653892,2406547462&fm=253&fmt=auto&app=120&f=JPEG?w=509&h=500");
        width: 700px;
        height: 700px;
    } 
</style>

背景重复

repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺

<style>
    div {
        background: url("https://img0.baidu.com/it/u=2196653892,2406547462&fm=253&fmt=auto&app=120&f=JPEG?w=509&h=500");
        /* background-repeat: no-repeat;  只会展现一张完整的图的，在div空间大于图片的大小*/
        background-repeat: repeat-x;
        width: 700px;
        height: 700px;
        border: 5px solid black;
    }
</style>

图片的位置

background-position:左右 上下;

指定位置

background-position:200px 200px;

左右上下居中

background-position:center center;

多个属性名前缀相同那么可以简写

background:orange url('url') no-repeat center center;
一个个编写即可 不写就默认

如何实时修改图片位置

浏览器找到标签的css代码然后方向键上下按住即可动态调整

13.边框设置

border属性


/*border-left: 5px red  solid;
/*上侧边框*/
/*border-top: 10px dotted orange;*/
/*右侧边框*/
/*border-right: 5px dashed black;*/
/*下侧边框*/
/*border-bottom: 8px solid deeppink;*/

简写设置

border: 5px red solid;  /*上下左右一致*/

边框样式

border-raduis属性

div {
    height: 500px;
    width: 500px;
    border: 5px solid red;
    /*画圆*/
    border-radius: 50%;
}

14.display属性

用于控制HTML元素的显示效果

隐藏标签

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display: none; 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

盒子模型

margin：用于控制元素与元素之间的距离，它的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的

padding：用于控制内部文本内容与边框之间的距离

border：围绕在内边距和内容外的边框

content：盒子的内容，显示文本和图像，标签内部的内容

需要掌握的操作
				margin-top: 20px;
				margin-left: 100px;
				margin-right: 100px;
				margin-bottom: 100px;
margin的各个参数使用
				margin：20px；上下左右
				margin：20px 40px；上下  左右
				margin：10px 20px 30px；上  左右  下
				margin：10px 20px 30px 40px；上  右  下  左
margin与padding用法一致

margin还可以让内部标签居中展示
			margin：100px auto  仅限于水平方向

body标签默认自带8px的外边距  在编写的时候应该提前去掉
    要使用margin：0；贴合上边框

浮动布局（float）

1.什么是浮动

在css中，任何元素都可以浮动
浮动元素会生成一个块级框，而不论它本身是何种元素

2.浮动的作用

只要是设计到页面的布局一般都是用浮动来提升规划好的，页面布局必不可少的操作

3.浮动有两个特点

1.浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或者另一个浮动框的边框为止
2.由于浮动的框不在文档的普通流中，所以文档的普通流中的块框表现得像浮动框不存在一样

4.浮动（float）格式

float: 浮动方向；

三种取值：
    left----向左浮动
    right----向右浮动
    none----默认值，不浮动

5.浮动会造成父标签塌陷这是一个不好的现象因为会引起歧义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .d {
        border: 2px solid lightskyblue;
      }
      .d1 {
        border: 2px solid plum;
        background-color: plum;
        float: left;
        height: 100px;
        width: 100px;
      }
      .d2 {
        border: 2px solid peachpuff;
        background-color: peachpuff;
        float: right;
        height: 100px;
        width: 100px;
      }
    </style>
</head>
<body>
<div class="d">
  <div class="d1"></div>
  <div class="d2"></div>
</div>
</body>
</html>

6.解决父标签塌陷问题

1.自己加一个div设置高度（再写一个div撑起来，但是这种方法不可取，总不能遇到这种情况的时候就设置一个div来撑）

#d4 {
	/*高度*/
	height: 100px;
}

2.利用clear属性（可以使用）

#d4 {
	/*该标签的左边(地面和空中)不能有浮动元素*/
	clear: left;

3.通用的解决浮动带来的影响方法(通用解决策略(推荐使用):只要父标签塌陷就使用)

在写html页面之前 先提前写好处理浮动带来的影响的 css代码
        .clearfix:after {
            /*空的内容独占一行*/
            content: '';
            display: block;
            /*左右两侧都不能有浮动*/
            clear: both;
        }
之后只要标签出现了塌陷的问题就给该塌陷的div标签加一个class=“clearfix”属性即可
该方法的解决方式是通用的 到哪都是一样 并且名字就叫clearfix

溢出属性（overflow）

overflow（水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
如果输入的文本信息超过了盒子的大小，那么就会产生溢出现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>溢出</title>
  <style>
    div {
      height: 100px;
      width: 100px;
      border: 2px solid lightcoral;
    }
  </style>
</head>
<body>
<div>
  婚前，梁思成问林徽因：“有一句话，我只问这一次，以后都不会再问，为什么我？”林徽因答：“答案很长，我得用一生去回答你，准备好听我了吗？”婚后，梁思成曾诙谐地对朋友说：“中国有句俗话：‘文章是自己的好，老婆是人家的好。’可是对我来说是，老婆是自己的好，文章是老婆的好。”
</div>
</body>
</html>

overflow: hidden;只能显示出来一部分，超出的范围会被隐藏起来

overflow: auto;右侧会出来滚动条，下拉查看其他的信息

overflow：scoll;在中间就可以进行滚动

内容溢出的应用场景-头像设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body {
        /*与边框对其*/
        margin: 0;
        /*背景颜色*/
        background-color: #4e4e4e;
    }
    #d1 {
        /*高度*/
        height: 200px;
        /*宽度*/
        width: 200px;
        /*画一个圈*/
        border-radius: 50%;
        /*边框一致*/
        border: 5px solid white;
        /*调位置*/
        margin: 0 auto;
    }
  </style>
</head>
<body>
<div id="d1">
    <img src="https://img2.baidu.com/it/u=1111031032,1956894194&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">

</div>
</body>
</html>

解决设置头像照片溢出问题

解决设置头像照片溢出问题与比列大小问题

        /*溢出位置隐藏*/
        overflow: hidden;
    }
    #d1>img {
        /*让img标签占#d1的百分之百*/
        width: 100%;
    }

定位

静态static

所有的标签，默认都是静态的，无法改变位置
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的

1.relative（相对定位）

相对于标签原来的位置做移动relative

相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。

    <style>
        body {
            /*与边框贴合*/
            margin: 0;
        }
        #d1 {
            /*高度*/
            height: 100px;
            /*宽度*/
            width: 100px;
            /*背景颜色*/
            background-color: red;
            left: 50px;  /*从左往右  如果是负数 方向则相反*/
            top: 50px;  /*从上往下   如果是负数 方向则相反*/
            /*position: static;  !*默认是static 静态 无法修改位置*!*/
            /*相对定位 表由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签*/
            position: relative;
            /*虽然你哪怕没有动 但是性质已经变了*/
        }

2.absolute(绝对定位)

相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照物)

设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body {
            /*与边框贴合*/
            margin: 0;
        }

        #d2 {
            height: 100px;
            width: 200px;
            background-color: khaki;
            /*已经定位过的标签*/
            position: relative;
        }

        #d3 {
            height: 200px;
            width: 400px;
            background-color: lightcyan;
            /*绝对定位*/
            position: absolute;
            /*从左往右移动*/
            left: 200px;
            /*从上往下*/
            top: 100px;
        }
    </style>
</head>
<body>
<div id="d2">
    <div id="d3"></div>
</div>
</body>
</html>

如果对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

3.fixed

相对于浏览器窗口固定在某个位置

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*与边框贴合*/
            margin: 0;
        }

        #d4 {
            /*固定 写了fixed之后 定位就是依据浏览器窗口*/
            position: fixed;
            /*距离浏览器底部 距离*/
            bottom: 80px;
            /*距离浏览器右侧 距离*/
            right: 20px;
            /*高度*/
            height: 25px;
            /*宽度*/
            width: 100px;
            /*背景颜色*/
            background-color: white;
            /*上下左右边框*/
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div style="height: 300px;background-color: #a8e7dc"></div>
<div style="height: 300px;background-color: #74dae7"></div>
<div style="height: 300px;background-color: #efc6e5"></div>
<div id="d4">固定位置不变</div>
</body>
</html>

被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

优先展示文本内容

浏览器是优先展示文本内容的，如果它发现文本内容被挡住了，会想方设法的找到个位置展示出现

脱离文档流(就是原来的位置是否保留)

1.什么是脱离文档流？

就是原来的位置没有了，可以被顶替了

2.主要作用于的对象

浮动、相对定位、绝对定位、固定定位

3.不脱离文档流

相对定位

<body>                                                      /*相对移动  向右移动500*/
<div style="height: 100px;width: 200px;background-color: red;position: relative;left: 500px;"></div>
<div style="height: 100px;width: 200px;background-color: greenyellow"></div>
</body>

4.脱离文档流

浮动、绝对定位、固定定位

<body>
<div style="height: 100px;width: 200px;background-color: #b7d97d;position: fixed;left: 400px;"></div>
<div style="height: 100px;width: 200px;background-color: #fabab9"></div>
</body>

z-index之模态框案例

浏览器界面其实是一个三维坐标系 z轴指向用户

1.最底部是正常内容(z=0)  最远层
2.黑色的透明区(z=99)	中间层
3.白色的注册区域(z=100)  离用户最近

层叠顺序

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

模拟z-index模态框

俩次对比就很明显了，，谁在上谁在下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
  <style>
    body {
      margin: 0;
    }
    .cover {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-color: rgb(255, 140, 140);
      z-index: 99;
    }
    .modal {
      background-color: lightcyan;
      height: 200px;
      width: 400px;
      position: fixed;
      left: 50%;
      top: 50%;
      z-index: 100;
      margin-left: -200px;
      margin-top: -100px;
    }
  </style>
</head>
<body>
<div>这是最底层的页面内容</div>
<div class="cover"></div>
<div class="modal">
  <p>用户名：<input type="text"></p>
  <p>密  码：<input type="text"></p>
</div>
</body>
</html>

简易博客页面搭建

编写流程：
1.分析页面结构
	利用布局标签div和span搭建架子
2.先编写网页骨架
	HTML
3.再编写CSS
4.最后编写JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MyBlogs</title>
  <link rel="stylesheet" href="myblogs.css">
</head>
<body>
<div id="blog-left">
  <div class="img">
        <img src="https://img2.baidu.com/it/u=1111031032,1956894194&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
  </div>
  <div class="blog-left-title">
    <span>cerry的博客</span>
  </div>
  <div class="blog-left-desc">
    <span>万物生长 向我奔来</span>
  </div>
  <div class="blog-left-info">
    <ul>
      <li><a href="">关于我</a></li>
      <li><a href="">微博号</a></li>
      <li><a href="">公众号</a></li>
    </ul>
  </div>
  <div class="blog-left-link">
    <ul>
      <li><a href="">python</a></li>
      <li><a href="">MySQL</a></li>
      <li><a href="">Java</a></li>
    </ul>
  </div>
</div>
<div id="blog-right">
  <div class="blog-right-articel">
    <div class="articel-top">
      <span class="articel-title">成长日志</span>
      <span class="articel-data">2022-08-24</span>
    </div>
    <div class="articel-info">
      <span>总要尝遍所有的路在对生活充满期待。</span>
      <hr color="#cb9a9">
    </div>
    <div class="articel-tags">
      <span>#修生养性 &nbsp;&nbsp;&nbsp;&nbsp; #健康成长</span>
    </div>
  </div>
  <div class="blog-right-articel">
    <div class="articel-top">
      <span class="articel-title">成长日志</span>
      <span class="articel-data">2022-08-25</span>
    </div>
    <div class="articel-info">
      <span>不管你去往何方不管将来迎接你的是什么请你带着阳光般的心情启程。</span>
      <hr color="#cb9a9">
    </div>
    <div class="articel-tags">
      <span>#修生养性 &nbsp;&nbsp;&nbsp;&nbsp; #健康成长</span>
    </div>
  </div>
  <div class="blog-right-articel">
    <div class="articel-top">
      <span class="articel-title">成长日志</span>
      <span class="articel-data">2022-08-24</span>
    </div>
    <div class="articel-info">
      <span>今日事须今日毕切勿拖延到明天。</span>
      <hr color="#cb9a9">
    </div>
    <div class="articel-tags">
      <span>#修生养性 &nbsp;&nbsp;&nbsp;&nbsp; #健康成长</span>
    </div>
  </div>
  <div class="blog-right-articel">
    <div class="articel-top">
      <span class="articel-title">成长日志</span>
      <span class="articel-data">2022-08-24</span>
    </div>
    <div class="articel-info">
      <span>当你下定决定做一件事那就去尽力做给自我一个期限不用告诉所有人也不要犹豫直到你真的尽力为止。</span>
      <hr color="#cb9a9">
    </div>
    <div class="articel-tags">
      <span>#修生养性 &nbsp;&nbsp;&nbsp;&nbsp; #健康成长</span>
    </div>
  </div>
  <div class="blog-right-articel">
    <div class="articel-top">
      <span class="articel-title">成长日志</span>
      <span class="articel-data">2022-08-24</span>
    </div>
    <div class="articel-info">
      <span>看淡一点再努力一点越努力越幸运这世上没有谁活得比谁容易只是有人在呼天喊地有人在静默坚守。</span>
      <hr color="#cb9a9">
    </div>
    <div class="articel-tags">
      <span>#修生养性 &nbsp;&nbsp;&nbsp;&nbsp; #健康成长</span>
    </div>
  </div>
</div>
</body>
</html>

posted @ 2022-12-02 00:07 hugmi男孩阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

zjl248

css