前端
前端
任何与用户直接打交道的操做界面均可以称之为前端
好比:电脑界面 手机界面 平板界面
什么是后端
后端相似于幕后操做者(都是代码)
不直接跟用户打交道
为何学前端css
要求看懂基本前端代码以及可以搭建一些简单的页面便可 先打基础 为后续可能扩展作准备
学习历程html
HTML 网页的骨架 没有任何样式 CSS 给骨架添加各类样式 变得好看 美化HTML JS 控制网页的动态效果 前端框架：BOOTSTRAP JQuery Vue
浏览器窗口输入网址 回车 发生了什么前端
1.浏览器朝服务端发送请求 2.服务端接收请求 3.服务端返回相应的相应(返回一个百度首页) 4.浏览器接收响应 根据特定的规则渲染页面展现给用户看
HTTP协议python
超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式。。。
该协议能够不遵循 到那时你写的客户端就不能被浏览器正常访问 本身跟本身玩 用户想使用就下载你本身专门的APP便可
四大特性：
1.基于请求响应
2.基于tcp/ip做用于应用层之上的协议
3.无状态
不保存用户的信息
4.无/短连接
请求来一次响应一次 以后两者就没有任何连接和关系了
长连接：
双方创建链接以后默认不断开 websocket
#请求数据格式
请求首行(标识HTTP协议版本，当前请求方式)
请求头(一大堆k，v键值对)
\r \n #不能省略
请求体(并非全部的请求方式都有,get没有post有,存放的是post请求提交的敏感数据：用户名 密码等)
#响应数据模式
响应首行(标识HTTP协议版本，响应状态码)
响应头(一大堆k，v键值对)
\r \n #不能省略
响应体(返回给浏览器展现给用户看的数据)
#响应状态码
用一串简单的数字来表示一些复杂的状态或者描述性信息
1xx:服务端已经成功接收了你的数据正在处理，你能够继续提交额外的数据
2xx:服务端成功响应了你想要的数据(200 ok 请求成功)
3xx:重定向 访问一个须要登陆以后才能看的页面 自动跳转到登陆页面
4xx:请求错误 404：请求资源不存在 403：当前请求不合法或者不符合访问资源的条件
5xx:服务器内部错误(500 机房着火 出bug)，与客户端不要紧
#请求方式
1.get请求
朝服务端要数据
eg：输入网址获取对应的内容
2.post请求
朝服务端提交数据
eg：用户登陆 输入用户名和密码以后 提交到服务端后端作身份校验
#url：统一资源定位符(网址)
HTML
网页的骨架 HTML是一种标记语言，是一种用于建立网页的标记语言，它不是一种编程语言。 若是你想要让浏览器可以渲染出你写的页面 你就必须遵循HTML语法 咱们浏览器看到的页面，内部其实都是HTML代码 网页文件的扩展名：.html或.htm <h1>hello baby~</h1> <a href='https://www.mzitu.com/'>AAA</a>
HTML就是书写网页的一套标准web
<!--单行注释--> <!-- 多行注释1 多行注释2 多行注释3 -->
HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>声明为HTML文档。
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签以前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪一个 HTML 版本进行编写的指令。
<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。
包含了文档的元（meta）数据。head内的标签不是给用户看的 而是定义一些配置主要是给浏览器看的
<title>、</title>定义了网页标题，在浏览器标题栏显示。
<body>、</body>之间的文本是可见的网页主体内容。body内的标签 写什么浏览器就渲染什么 用户就能看到什么。
注意：对于中文网页须要使用 <meta charset="utf-8"> 声明编码，不然会出现乱码。
有些浏览器会设置 GBK 为默认编码，则你须要设置为 <meta charset="gbk">。
文件的后缀名是给用户看的，只不过对应不一样的文件后缀名又不用的软件来处理并添加不少功能编程
HTML文件是没有格式的，能够所有写在一行都没有问题，只不过咱们习惯了缩进来表示代后端
标签的分类浏览器
1.双标签 <h1></h1>2.单标签( 自闭和 标签) <a href='https://www.mzitu.com/'></a>
几个经常使用属性前端框架
id：定义标签的惟一ID，HTML文档树中惟一class：为html元素定义一个或多个类名（classname）(CSS样式类名)style：规定元素的行内样式（CSS样式）
head内经常使用的标签
<title>Title</title>
定义网页标题为Title<style></style>
定义内部样式表<script></script>
定义JS代码或引入外部JS文件<link/>
引入外部样式表文件或网站图标 css文件<meta/>
定义网页原信息，告诉浏览器要干啥<style> h1{ color:greenyellow; }</style>
内部用来书写CSS代码
<script> alert(123)</script> 内部用来书写js代码<script scr='myjs.js'></script>
还能够引入外部js文件<link rel='stylesheet' href='mycss.css'>
引入外部css文件<meta >
告诉浏览器要干啥keywords 淘宝 商品 等等搜索关键字当你在用浏览器搜索的时候
只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展现给用户description网页的描述性信息简易操做：ol>li{$}*3
结果以下<ol> <li>1</li> <li>2</li> <li>3</li></ol>
body内经常使用标签
基本标签<h1>我是h1</h1> 一级标题 <h2>我是h1</h2> <h3>我是h1</h3> <h4>我是h1</h4> <h5>我是h1</h5> <h6>我是h1</h6> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除</s> <p>段落标签</p> <br>换行 <hr>水平分割线标签的分类2 1.块儿级标签:独占一行 h1-h6 p div 2.行内标签：自身文本多大就占多大 i u s b span input (1)行内标签能够修改长宽，行内标签不能够 修改了也不会变 (2)块级标签能够套全部的块级标签和行内标签，可是p标签不能嵌套块级元素和p标签，能够套行内标签 (3)行内标签能够嵌套行内标签，可是不能嵌套块级标签
特殊符号服务器
空格> 大于号< 小于号& &符号¥ ¥© ©版权® ®
div标签和span标签
页面布局 先用div和span占位而后再去调整样式div 块级标签能够把它当作一块区域 先用div规定好区域 以后再在区域内填写东西span 行内标签普通文本先用span标签块级元素与行内元素的区别：所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。 若是单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。
img标签
图片标签<img src="" alt="" title="" height="" width="">alt: 当图片加载不出来的时候，输出alt后面的内容title:当鼠标悬浮到图片上后 自动展现的提示信息heightwidth高度和宽度 当只修改一个参数时 另外一个参数会等比例缩放若是修改两个参数 而且不考虑参数的问题 图片可能会失真
CSS:层叠样式表，用来给网页骨架增长样式，使得网页变得更加好看
a标签
超连接标签
所谓的超连接是指从一个网页指向一个目标的链接关系，这个目标能够是另外一个网页，也能够是相同网页上的不一样位置，还能够是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
举例
http://www.sohu.com/stu/intro.html
URL地址由4部分组成
第1部分：为协议：http://、ftp://等
第2部分：为站点地址：能够是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="" target="_self"></a>
href
绝对URL - 指向另外一个站点（好比 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
放的是url，用户点击就会跳转到url页面
放其余标签的id值 点击便可跳转到对应的标签位置
锚点功能
点击一个文本标题 页面自动跳转到标题对应的内容区域
target
默认是target="_self" 当前页面跳转
"_blank"新建页面跳转
<a href="" id="d1">顶部</a>
<h1 id="d111">hello world</h1>
<div style="height: 1000px;background-color: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background-color: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>
列表标签
无序列表（较多）
<ul type=""> 没序号
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
<li>第四项</li>
</ul>
type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
有序列表（了解）
<ol type="1" start="5"> 序号从5开始
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
标题列表（了解）
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
</dl>
表格标签
属性:
border: 表格边框. <table border="1">
cellpadding: 内边距
cellspacing: 外边距.
width: 像素 百分比.（最好经过css来设置长宽）
rowspan: 单元格竖跨多少行 <td rowspan="2">DBJ</td>
colspan: 单元格横跨多少列（即合并单元格） <td colspan="2">egon</td>
<table border="1" cellpadding="5" cellspacing="5">
<thead>
<tr> 一个tr就表明一行
<th>username</th> 加粗文本
<th>password</th>
<th>hobby</th>
</tr>
</thead> 表头（字段信息）
<tbody> 表单（数据信息）
<tr>
<td>jason</td> 正常文本
<td>123</td>
<td>read</td>
</tr>
<tr>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
</tr>
<tr>
<td>tank</td>
<td>123</td>
<td>tea</td>
</tr>
</tbody>
</table>
表单标签
表单属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。
可以获取前端用户数据（永不输入的、选择的等等）基于网络发送给后端服务器
form功能：
1.表单用于向服务器传输数据，从而实现用户与Web服务器的交互
2.表单可以包含input系列标签，好比文本字段、复选框、单选框、提交按钮等等。
3.表单还能够包含textarea、select、fieldset和 label标签。
文本框 选择 表单分组 标签
表单工做原理：
表单通常用来收集用户的输入信息
访问者在浏览有表单的网页时，可填写必需的信息，而后按某个按钮提交。这些信息经过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，若是有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
<form action=""></form>
action：控制数据提交的后端路径
1.什么都不写 默认朝当前页面所在的url提交数据
2.写全路径 写哪里提交到哪里
3.只写路径后缀action='index'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
第一种 直接将input框卸载label内
<label for="d1">
username:<input type="text" id="d1">
</label>
第二种 经过id连接便可 无需嵌套
<label for="d2">password:</label>
<input type="text" id="d2">
input 能够不跟 label 关联
label和input都是行内标签
input
<input> 元素会根据不一样的 type 属性，变化为多种形态。
没有指定按钮的文本内容 不一样的浏览器打开以后可能渲染的文本内容不一致
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
属性说明:
name：表单提交时的“键”，注意和id的区别
value：表单提交时对应项的值
type="button", "reset", "submit"时，为按钮上显示的文本年内容
type="text","password","hidden"时，为输入框的初始值
type="checkbox", "radio", "file"，为输入相关联的值
checked：radio和checkbox默认被选中的项
readonly：text和password设置只读
disabled：全部input均适用
redio：单选
默认选中要加checked="checked"
<input type="radio" name="gender" checked="checked">男
当标签的属性名和属性值同样的时候能够简写
<input type="radio" name="gender" checked>女
checkbox：多选
<input type="checkbox" checked>DBJ
<input type="checkbox" checked>JBD
file:获取文件 也能够一次性获取多个
<input type="file" multiple>
select标签
属性说明：
multiple：布尔属性，设置后为多选，不然默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
<p>前女朋友:
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="">斯佳丽</option>
<option value="">明老师</option>
</select>
</p>
label标签
定义：<label> 标签为 input 元素定义标注（标记）。 说明： label 元素不会向用户呈现任何特殊效果。 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。 <form action=""> <label for="username">用户名</label> <input type="text" id="username" name="username"> </form>
textarea标签
属性说明： name：名称 rows：行数 cols：列数 disabled：禁用 <textarea name="memo" id="memo" cols="30" rows="10"> 默认内容 </textarea> textarea标签 获取大纲文本 可以触发form表单提交数据的按钮有哪些 1.<input type="submit" value="注册"> 2.<button>点我</button> 全部获取用户输入的标签 都应该有name属性 name就相似于字典的key 用户输入的数据就相似于字典的value
CSS
CSS:层叠样式表，用来给网页骨架增长样式，使得网页变得更加好看
css语法结构:
css的三种引入方式
1.styke标签直接书写
2.link标签引入外部css文件
3.行内式 （通常不用）
选择器{
属性名1：属性值1；
属性名2：属性值2；
属性名3：属性值3；
属性名4：属性值4；
属性名5：属性值5；
}
link
hover
active
visited
基本选择器
ID选择器
#i1 {
background-color: red;
}
类选择器
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性若是有多个，要用空格分隔。
元素选择器
p {color: "red";}
通用选择器
* {
color: white;
}
组合选择器
后代选择器
/*li内部的a标签设置字体颜色*/
li a {
color: green;
}
儿子选择器
/*选择全部父级是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}
毗邻选择器 （同级别紧挨着的下面第一个）
/*选择全部紧接着<div>元素以后的<p>元素*/
div+p {
margin: 5px;
}
弟弟选择器（同级别下面全部的p标签）
/*i1后面全部的兄弟p标签*/
#i1~p {
border: 2px solid royalblue;
}
属性选择器
属性选择器
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
分组和嵌套
分组
当多个元素的样式相同的时候，咱们没有必要重复地为每一个元素都设置样式，咱们能够经过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
div, p {
color: red;
}
上面的代码为div标签和p标签统一设置字体为红色。
嵌套
多种选择器能够混合起来使用，好比：.c1类内部全部p标签设置字体颜色为红色。
.c1 p {
color: red;
}
伪类选择器
/* 未访问的连接 */
a:link {
color: #FF0000
}
/* 鼠标移动到连接上 */ （必须记住）（鼠标悬浮态）
a:hover {
color: #FF00FF
}
/* 选定的连接 */ （激活态，点击不松开的状态）
a:active {
color: #0000FF
}
/* 已访问的连接 */
a:visited {
color: #00FF00
}
/*input输入框获取焦点时样式*/（后面会用）
input:focus {
outline: none;
background-color: #eee;
}
伪元素选择器
first-letter
经常使用的给首字母设置特殊样式：
p:first-letter {
font-size: 48px;
color: red;
}
before
/*在每一个<p>元素以前插入内容*/ 在文本开头 同css添加内容 是没法被选中的
p:before {
content:"*";
color:red;
}
after
/*在每一个<p>元素以后插入内容*/
p:after {
content:"[?]";
color:blue;
}
before和after多用于清除浮动带来的影响：多用于处理父标签塌陷的影响。
选择器的优先级
选择器相同时，就近原则
选择器不一样时 行内选择器>id>类>标签
精确度越高越有效
除此以外还能够经过添加 !important方式来强制让样式生效，但并不推荐使用。由于若是过多的使用!important会使样式文件混乱不易维护。
CSS属性相关
width属性能够为元素设置宽度。 height属性能够为元素设置高度。 块级标签才能设置宽度，内联标签的宽度由内容来决定。
字体属性
文字字体
font-family能够把多个字体名称做为一个“回退”系统来保存。若是浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
大白话：修改字体样式 第一个不生效就后一个
字体大小
p {
font-size: 14px;
}
字重（粗细）
font-weight用来设置字体的字重（粗细）。
值 描述
normal 默认值，标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
inherit 继承父元素字体的粗细值
文本颜色
颜色属性被用来设置文字的颜色。
颜色是经过CSS最常常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。
color:rgba(255,0,0,0.3)
文字属性
文字对齐
text-align 属性规定元素中的文本的水平对齐方式。
值 描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐
文字装饰
text-decoration 属性用来给文字添加特殊效果。
值 描述
none 默认，定义标准的文本，没有任何样式。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。
经常使用的为去掉a标签默认的自划线：
a {
text-decoration: none;
}
首行缩进
将段落的第一行缩进 32像素：
p {
text-indent: 32px;
}
背景属性
/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
背景重复
repeat(默认):背景图片平铺排满整个网页
repeat-x：背景图片只在水平方向上平铺
repeat-y：背景图片只在垂直方向上平铺
no-repeat：背景图片不平铺
*/
background-repeat: no-repeat;
/*背景位置*/
background-position: left top;
/*background-position: 200px 200px;*/
background-attachment:fixed; 背景图片不动
简写
background:#336699 url('1.png') no-repeat left top;
边框
边框
border： 粗细 样式 颜色
设置单独一条边框
border-top
border-bottom
border-left
border-right
取消边框
border：none / 0
边框粗细
border-width
border-top -width
边框样式
border-style：{
solid 实线
deshed 虚线
dotted 点线
double 双线
}
border-top -style
边框颜色
border-color
border-top -color
边框变形
border-radius; 圆形
border-radius:200px;椭圆
border-radius:50%; 直接写50%便可长宽同样就是圆 不同就是椭圆
display
dispaly：none; 隐藏标签不展现到前端页面而且原来的位置也再也不占有了 可是还存在于文档上。位置也不在了 hidden:单纯的隐藏，留有位置。 dispaly: inline;将标签设置为行内标签的特色，没法修改长宽 display: block;将标签设置成块级标签的特色 display: inline-block让标签既能够在一行显示又能够设置长宽
CSS盒子模型
margin: 外边距，用于控制元素之间的距离; margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的
padding: 内边距，用于控制内容与边框之间的距离
Border(边框):围绕在内边距和内容外的边框
Content(内容):盒子的内容，显示文本和图像
margin外边距
一、 margin是设置盒子与盒子之间的位置关系
二、边框线之外的距离均可以设置margin
三、使用margin
单一方向margin
margin-left
margin-right
margin-top
margin-bottom
多个方向margin
1个值 4个方向
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
margin-left:
正值 右移动
负值 左移动
margin-top
正值 下移动
负值 上移动
四、让块元素水平居中（内联元素不起做用）
margin：0 auto
内边距padding
一、控制盒子与内容之间的位置关系
二、边框线之内的距离均可以设置padding
三、内边框会撑大盒子，若是设置padding，让盒子不变形，加上多少padding，盒子的宽高就须要减去多少padding
四、padding的设置
单一方向padding
padding-left
padding-right
padding-top
padding-bottom
多个方向padding
1个值 4个方向
2个值 上下 左右
3个值 上 左右 下
4个值 上 右 下 左
五、padding不能设置负值
盒模型的计算
盒子的总高度=height+上下的padding+上下的border
盒子的总宽度=width+左右的padding+左右的border
浮动（float clear）
#d1{
height:200px;
width:200px;
background-color: red;
float:left;
}
float:left;向左浮动
浮动形成的影响：
会形成父标签塌陷的问题
clear：left 该标签的左边不能有浮动的元素
.clearfix:after{
content:'';
display:block;
clear:both;
}
只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性便可
清除浮动的几种方法：
方法一：
给浮动的盒子的父盒子添加一个高度，由于浮动盒子不能撑开父盒子，那么咱们给父盒子加上高度就从根本上解决了这一个问题，
缺点：图片浮动，给定图片盒子一个宽度，致使其高度是等比例缩放的，这一个高度值有很大的概率是很难计算出来的，这种状况就不能使用手动给定高度这一方法
方法二：
额外标签法，
在父盒子中，全部的浮动盒子以后添加一个额外的标签，
.clear { clear: both; } 缺点，一个页面可能有不少地方须要清除浮动，这样就须要使用不少无用的标签
方法三：
给浮动盒子的父盒子也使用浮动，这样浮动的盒子就能撑开其父盒子
缺点：虽然给父盒子使用浮动可以达到清除内部浮动元素的目的，可是总体浮动一样会影响到页面的布局
方法四：
使用CSS的overflow属性
给浮动盒子的父盒子添加overflow:hidden;或overflow:auto;能够清除浮动，另外在 IE6 中还须要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
在添加overflow属性后，浮动元素又回到了容器层，把容器高度撑起，达到了清理浮动的效果。
方法五：
使用CSS的:after伪元素
结合 :after 伪元素（注意这不是伪类，而是伪元素，表明一个元素以后最近的元素）和 IEhack ，能够完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。
给浮动元素的容器添加一个clearfix的class，而后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。
.clearfix:after{
content: “”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
五星推荐使用
溢出
overflow溢出属性 值 描述 visible 默认值。内容不会被修剪，会呈如今元素框以外。 hidden 内容会被修剪，而且其他内容是不可见的。 scroll 内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容。 auto 若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容。 inherit 规定应该从父元素继承 overflow 属性的值。 overflow（水平和垂直均设置） overflow-x（设置水平方向） overflow-y（设置垂直方向）
定位(relative、absolute、fixed)
静态 全部的标签默认都是静态的，没法改变位置 relative（相对定位） position:relative 相对于标签原来的位置作移动 absolute（绝对定位） 相对于已经定位过的父标签移动（若是没有父标签name就以body为参照） 没有父标签就参照body fixed（固定定位） 相对于浏览器窗口固定在某个位置
验证浮动和定位是否脱离文档流
脱离文档流 浮动 绝对定位 固定定位 不脱离文档流 相对定位
z-index模态框
百度登陆页面实际上是三层结构 1.最底部是正常内容(z=0) 最远的 2.黑色的透明区(z=99) 中间层 3.白色的注册区域(z=100) 离用户最近
透明度opacity
rgba智能影响颜色 opacity用来定义透明效果。取值范围是0~1，0是彻底透明，1是彻底不透明。 opacity:0.5;
z-index模态框
百度登陆页面实际上是三层结构 1.最底部是正常内容(z=0) 最远的 2.黑色的透明区(z=99) 中间层 3.白色的注册区域(z=100) 离用户最近
透明度opacity
rgba智能影响颜色opacity用来定义透明效果。取值范围是0~1，0是彻底透明，1是彻底不透明。opacity:0.5;
相关文章
- 1. 前端，前端
- 2. 前端，前端。。。
- 3. 前端---------了解前端
- 4. 前端前端，变化多端
- 5. 前端共享博客（前端导航,前端博客,前端博客推荐）
- 6. 前端
- 7. 【前端】
- 8. 前端....
- 更多相关文章...
- • WSDL 端口 - WSDL 教程
- • XSLT - 在客户端 - XSLT 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通过ViewHelper.setTranslationY实现View移动控制（NineOldAndroids开源项目）
- 3. 【Android】日常记录：BottomNavigationView自定义样式，修改点击后图片
- 4. maya 文件检查 ui和数据分离 （一）
- 5. eclipse 修改项目的jdk版本
- 6. Android InputMethod设置
- 7. Simulink中Bus Selector出现很多? ? ?
- 8. 【Openfire笔记】启动Mac版Openfire时提示“系统偏好设置错误”
- 9. AutoPLP在偏好标签中的生产与应用
- 10. 数据库关闭的四种方式
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 前端，前端
- 2. 前端，前端。。。
- 3. 前端---------了解前端
- 4. 前端前端，变化多端
- 5. 前端共享博客（前端导航,前端博客,前端博客推荐）
- 6. 前端
- 7. 【前端】
- 8. 前端....