htmlcss使用及html5新特性笔记整理

【html基础】

Hyper text markup language 超文本标签语言。不是一种编程语言,而是一种标记语言标记语言是一套标记标签

开发工具

  • chrome
  • subline
  • vscode
  • photoshop

浏览器内核

IE内核Trident
FirefoxGecko
Safari苹果浏览器Webkit
ChromeChromium/blink
Operaprestopresto

html骨架

  • HTML标签:所有html标签中的根节点
  • Head标签:文档头部,描述文档的各种属性和信息。包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。如<!DOCTYPE>声明了htm版本为html5版本
  • Title标签:文档的标题
  • Body标签:文档的主体,素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

html标签分类

html标签分类分为双标签和单标签,双标签具有嵌套关系、并列关系,如<div></div>;单标签有:<input/><img/>

比较特别的有:

  • <link>:定义文档与外部资源的关系,最常见的用途是链接样式表

    <head>
    <link rel="stylesheet" type="text/css" href="theme.css" />
    </head>
    
    属性描述
    charsetchar_encodinghtml5不支持
    hrefurl规定被链接文档的位置
    hreflanglanguage_code规定被链接文档中文本的语言
    mediamedia_query规定被链接文档将被显示在什么设备上
    relalternate\author\help\icon\licence\next\pingback\ prefetch\prev\search\sidebar\stylesheet\tag规定当前文档与被链接文档之间的关系
    typeMIME_type规定被链接文档的 MIME 类型
  • <meta>:定义了与文档相关联的名称/值对。提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部

    <meta name="keywords" content="HTML,ASP,PHP,SQL">
    <meta http-equiv="charset" content="iso-8859-1">
    <meta http-equiv="expires" content="31 Dec 2008">
    //这样发送到浏览器的头部就应该包含:
    content-type: text/html
    charset:iso-8859-1
    expires:31 Dec 2008
    
    属性描述
    *contentsome_text定义与 http-equiv 或 name 属性相关的元信息
    http-equivcontent-type\expires\refresh\set-cookie把 content 属性关联到 HTTP 头部。当服务器向浏览器发送文档时,会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对,但是所有服务器都至少要发送一个:content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档
    nameauthor\description\keywords\generator \revised\others把 content 属性关联到一个名称。比如"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
    schemesome_text定义用于翻译 content 属性值的格式

排版标签

名称语义例子
标题标签head<h1></h1><h2></h2><h6></h6>
段落标签paragraph<p></p>
水平线标签horizon<hr/>
换行标签break<br/>
div标签<div> </div>
span标签<span></span>

文本格式化标签

名称语义例子
粗体strong<b></b> <strong></strong>
斜体<i></i> <em></em>
加删除线delete<s></s> <delb</del>
下划线underline<u></u> <ins></ins>

图像标签img

属性属性值描述
srcurl图像路径
alt文本图像不能显示时的替换文本
title文本鼠标悬停时显示的内容
width像素(XHTML不支持%页面百分比)图像宽度
height像素(XHTML不支持%页面百分比)图像高度
border数字图像边框宽度

链接标签a

属性属性值描述
hrefUrl用于指定链接目标的url地址,Hypertext Reference的缩写。意思是超文本引用
targetself_blank用于指定链接页面的打开方式,其中self为默认值,blank为在新窗口中打开方式。

herf

1. 外部链接 需要添加 `http://`
2. 内部链接 直接链接内部页面名称即可 比如 `< a href="index.html"/>`
3. 空连接 `href="#"`
4. 锚点定位 
	——本页面跳转
		1. 给想要跳转的标签添加id名
		2. 点击可跳转id名标签所在位置<a href="#id名></a>
	——跳转到其他页面的锚点
		1. <a id="test">锚</a>
		2. <a href="test2.html#test"></a>

特殊字符标签

在这里插入图片描述

列表标签

类别描述
无序列表各个列表项之间没有顺序级别之分,是并列的
有序标签有排列顺序的列表,其各个列表项按照一定的顺序排列定义
自定义列表定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
//无序
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>
//有序
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>
//自定义
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl>
 注意:
 1. <ul>中只能嵌套<li>直接在<ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
 3. 无序列表会带有自己样式属性

表格标签

类别描述语法
表头标签表头一般位于表格的第一行或第一列,其文本加粗居中。 用表头标签替代相应的单元格标签<tr> </tr> <th><th/>
表头标题caption 元素定义表格标题。<caption></caption>
表格结构表格可划分为头部、主体和页脚 <thead></thead>用于定义表格的头部。必须位于<table></table>标签中,一般包含网页的logo和导航等头部信息。 <tbody></tbody>用于定义表格的主体。 位于<table></table>标签中,一般包含网页中除头部和底部之外的其他内容。<thead><thead/> <tbody><tbody>
<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>


<tr>
	<th>表头<th/>
</tr>


<table>
   <caption>表格标题</caption>
</table>


<table>
	<thead><thead/>
	<tbody><tbody>
<table/>
属性名属性值含义
border设置表格的边框(默认border=“0”无边框)像素值
cellspacing设置单元格与单元格边框之间的空白间距像素值(默认为2像素)
cellpadding设置单元格内容与单元格边框之间的空白间距像素值(默认为1像素)
width设置表格的宽度像素值
aline设置表格在网页中的水平对齐方式left、center、right
rowspan数字跨行合并单元格
colspan数字跨列合并但管个

表单标签

类别属性属性值描述
inputtypetext单行文本输入框
password密码输入框
radio单选按钮
checkbox复选框
button普通按钮
submit提交按钮
image图像形式的提交按钮
file文件
name由用户自定义控件的名称
value由用户自定义input控件中的默认文本值
size正整数input控件在页面中的显示宽度
checkedchecked定义选择控件默认被选中的项
maxlength正整数控件允许输入的最多字符数
label--label 标签为 input 元素定义标注(标签)。 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
textarea
select下拉菜单,至少包含一对<option></option>; 在option中定义selected="selected“时,当前项即为默认选中项
formactionurl地址
methodGet/post
name用于指定表单的名称,以区分同一个页面中的多个表单。
//label
<form>
  <label for="male"</label>
  <input id="male" />
</form>

//文本域
<textarea cols="每行字符数" rows="行数"></textarea>

//下拉菜单
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

路径

类别描述
相对路径以网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。
绝对路径绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,意指当所有网页引用同一个文件时,所使用的路径都是一样的
  • 图像文件和HTML文件位于同一文件夹:<img src="logo.gif"/>
  • 图像文件位于HTML文件的下一级文件夹:<img src="img/img01/logo.gif" />
  • 图像文件位于HTML文件的上一级文件夹:<img src="../logo.gif" />
  • D:\web\img\logo.gif
  • http://www.itcast.cn/images/logo.gif

【css常用】

css引入类型

行内样式

结构的内部,即写在标签内的样式;写在标签的开始部分内部,style属性当中。

<input style="color:#ccc">

内联样式

在HTML页面内部,存放于head标记当中,样式写在style标记内。

<style>选择器 {属性名:属性值;属性名:属性值;......}</style>

外部样式表

外联式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中

<link type="text/css" rel="stylesheet" href="css/main.css" />
  • href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
  • type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CS样式表。
  • rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

css选择器

基本选择器

1) 类选择器

选择器示例说明css
.class.intro{}选择所有class="intro"的元素1

2) ID选择器

选择器示例说明css
#id#idname{}选择所有id="idname"的元素1

3) 通配符选择器

选择器示例说明css
**{}选择所有元素2

4) 标签选择器

选择器示例说明css
elementp{}选择所有

元素

1

复合选择器

1) 后代、子代、兄弟选择器

选择器示例说明css
后代选择器div p{}选择
元素内的所有

元素

1
子元素选择器div>p{}选择所有父级是
元素的

元素

2
相邻兄弟选择器div+p{}选择所有紧接着
元素之后的

元素

2

2) 交集、并集选择器

选择器示例说明css
element.classnamediv.red{}选择
标签并且类名为red的
元素
1
element#idnamediv#blue{}选择
标签并且id名为blue的
元素
1
element,elementdiv,p{}选择所有
元素和

元素

1

3) 其他选择器

选择器示例说明css
element1-element2p~ul选择p元素之后的每一个ul元素3
element> element:first-childp > i:first-child{}匹配所有

元素中的第一个 元素

3

伪类选择器

  1. 链接伪类选择器
选择器示例说明css
:linka:link{}选择所有未访问的链接1
:visiteda:visited{}选择所有已访问的链接1
:hovera:hover{}选择所有鼠标划过的链接1
:activea:active{}选择所有已选中的链接1
  1. 位置伪类选择器
选择器示例说明css
:first-childp:first-child{}匹配第一个

元素

3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数3
:first-child elementp:first-child i{}匹配所有作为第一个子元素的

元素中的所有 元素

3
  1. 伪元素选择器
选择器示例说明css
E::first-letterp::first-letter选择每一个

元素的第一个字母

3
E::first-linep::first-line选择每一个

元素的第一行

3
E::selectionp::selection匹配p中被用户选中或处于高亮状态的部分3
E::beforediv::before在div内的前面,必须有content属性,它是一个盒子3
E::afterdiv::after在div内的后面3

[案例]:放图片上有边框效果

div{
	width:300px
	height:200pc
	position:relative
    overflow:hidden
}

div:hover::after{
	content:""
	position:absolute
	width:100%
	height:100%
	top:0
	left:0
	border:20px solid rgba(255,255,255,0.5)
	box-sizing:border-border
}

[案例]:鼠标在元素上面时加上小图标

div{
	width:300px
	height:200pc
	position:relative
    border:1px solid #ccc
    font-family:"icomoom"
}
div::before{
    content:"\ea51"
    position:absolute;
    right:10px;
    top:5px
}
  1. 其他选择器
选择器示例说明css
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个

元素的第一个字母

1
:first-linep:first-line选择每一个

元素的第一行

1
:beforep:before在每个

元素之前插入内容

2
:afterp:after在每个

元素之后插入内容

2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有

元素

2
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素(包括文本节点)3
:target#news:target选择当前活动的#news元素(包含该锚名称的点击的URL)3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not§选择每个并非p元素的元素3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 “readonly”(只读) 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 “required” 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素3

属性选择器

选择器示例说明css
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[attribute^=value]a[src^=“https”]选选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*=“runoob”]选择每一个src属性的值包含子字符串"runoob"的元素3
[attribute|=language][lang|=en]选择 lang 属性以 en 为开头的所有元素2

CSS字体样式

语法

font: "font-style font-variant font-weight font-size/line-height font-family"
//按顺序,其中font-size和font-family的值是必需的。

font-size

  • 相对长度单位

    1. em:相对于当前对象内的字体尺寸
    2. px:像素
    
  • 绝对长度单位

    1. in:英寸
    2. cm:厘米
    3. mm:毫米
    4. pt:点
    5. xx-small、 x-small、 small、 medium
    
  • 其他单位

    1. %:设置为基于父元素的一个百分比值
    2. inherit:规定应该从父元素继承字体尺寸
    3. smaller:设置为比父元素更小的尺寸
    4. larger:设置为比父元素更大的尺寸
    

font-family

  • 可以设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体

    p{font-family:"Times New Roman", Times, serif;}
    
  • 用Unicode编码形式定义

    p{font-family:"\5FAE\8F6F\96C5\9ED1";}
    
  • 注意:如果字体系列的名称超过一个字,它必须用引号,如Font Family:“宋体”。多个字体系列是用一个逗号分隔指明

font-style

font-style:normal  		// 正常显示文本
font-style:italic    		// 以斜体字显示的文字
font-style:oblique    		// 文字向一边倾斜

font-weight

font-weight:normal
font-weight:bold|bolder|lighter|number(400相当于normal,700相当于bold)	

font-variant

font-variant:normal|small-caps  //正常|小写字母

CSS文本样式

color

color:#FF0000
color:rgb(255,0,0)
color:red
color:rgba(255,0,0,0.7)
color:hsl(120,100%,25%)		//色相-饱和度-明度
color:hsla(240,100%,50%,0.05)		//色相-饱和度-明度-阿尔法

text-align

text-align:center|right|left|justify		//居中|居右|居左|两边对齐

direction

direction:ltr|rtl	 //从左到右|从右到左

line-height

2.PNG

line-height:3		//此数字会与当前的字体尺寸相乘来设置行间距
line-height:100px
line-height:200%;	

居中用法:只要height=line-height

text-decorate

text-decorate:none|underline|overline|line-through  //无装饰|顶线|下划线|中穿线
text-decorate:underline dotted red  //红色虚线

text-indent

text-indent:50px 	//首行缩进

text-shadow

text-shadow: h-shadow v-shadow blur color;
  • h-shadow 必需 水平阴影的位置 允许负值。
  • v-shadow 必需 垂直阴影的位置 允许负值
  • blur 可选 模糊的距离
  • color 可选 阴影的颜色

text-transform

text-transform:capitalize|uppercase|capitalize 		//每个单词以大写字母开头|全大写|全小写

white-space

  • pre 空白会被浏览器保留。其行为方式类似 HTML 中的
     标签。
  • nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
    标签为止。
  • pre-wrap 保留空白符序列,随屏幕大小正常地进行换行。
  • pre-line 合并空白符序列,但是保留换行符

word-spacing

word-spacing:20px		//字间距

CSS三大特性

CSS叠层性

解决样式冲突问题,权重相同,就近原则

CSS继承性

子标签会继承父标签的某些样式,如字号、字体颜色

CSS优先级

类别权重(可叠加)
*0,0,0,0
每个标签0,0,0,1
每个类、伪类0,0,1,0
每个ID0,1,0,0
每个行内样式1,0,0,0
每个!impotent无穷大

自己的优先,可忽略继承权重

CSS背景

语法

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
//多背景案例
background:url() no-repeate top left,url() no-repeate bottom right
:hover{background-position:bottom right,top left}

background-color

background-color:#ffffff	//十六进制
background-color:bule	//颜色
background-color:rgb(255,0,255)		
background-color:rgba(255, 0, 0,0.3)		

background-image

background-image: url(bgimage.gif)	//图像的URL
//线性渐变
//起始位置,起始颜色,结束颜色
background:linear-gradient(top,green,red)	
background:linear-gradient(left top,green,red)
//起始位置,颜色 位置,颜色 位置
background:linear-gradient(left,green 0%,red 50%,blue 100%)
  • radial-gradient():径向渐变

  • repeating-linear-gradient():重复的线性渐变

  • repeating-radial-gradient():重复的径向渐变

background-repeat

background-repeat: repeat	//重复
background-repeat: repeat-x	//背景图像将在水平方向重复
background-repeat: repeat-y	//背景图像将在垂直方向重复
background-repeat: no-repeat	//不重复

background-attachment

background-attachment: scroll	//默认,背景图像会随着页面其余部分的滚动而移动
background-attachment: fixed	//固定

background-position

background-position:center;		
background-position:left top|left center|left bottom|right top|right center|right bottom|center top|center center|center bottom		//水平垂直位置,如果仅指定一个关键字,其他值将会是"center"

background-position:0% 0%|100%100%|20%	//如果仅指定了一个值,其他值将是50% 
background-position10px 20px	//水平垂直位置,如果仅指定了一个值,其他值将是50%

background-size

background-size: length|percentage|cover|contain
  • length 宽高 如果只设置一个值,则第二个值会被设置为 “auto”
  • percentage 以父元素的百分比来设置背景图像的宽度和高度
  • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,图片比例不变
  • contain 把图像图像扩展至最大尺寸,完整显示图片

background-origin

//定背景图片的定位区域。图片可以放置于 content-box、padding-box 或 border-box 区域
background-origin:content-box;

盒子模型

css3盒模型box-sizing:border-box,padding和border包含在宽度里面。box-sizing:content-box是css2盒子模型

Margin

可以是一个值 padding-bottom、padding-top、padding-left、padding-right;也可以是多个值

margin:5px 5px 5px 5px	//上右下左
margin:10px 5px 10px 	//上(左右)下
margin 10% 10% 	//(上下)(左右)

Border

语法

border:5px solid red;	//边框宽度,边框样式,边框颜色

border-width

border:5px 5px 5px 5px	//上右下左
border:thin medium thick 	//上(左右)下
border 10px 10px 	//(上下)(左右)

border-style

border-style:none	//无样式
border-style:solid|dashed|groove|ridge 	//实心|虚线|3d凹槽|3d垄状

border-color

border-color:#ffffff	//十六进制
border-color:bule	//颜色
border-color:rgb(255,0,255)		
border-color:rgba(255, 0, 0,0.3)

border-radius

border-radius:2px 3px 4px 5px	//四个值按顺时针顺序
border-radius:10px 10px	//两个值对角线关系
border-radius:5px	//四个角

border-top简写

border-top:5px solid red;
//同样的还有border-left、border-right、 border-bottom

Padding


可以是一个值 padding-bottom、padding-top、padding-left、padding-right;可以是多个值

margin:5px 5px 5px 5px	//上右下左
margin:10px 5px 10px 	//上(左右)下
margin 10% 10% 	//(上下)(左右)

Content

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

element:after{
  content: "1";
}

box-shadow

box-shadow: h-shadow v-shadow;		//水平位置|垂直位置  //均为必需允许负值
box-shadow: h-shadow v-shadow blur spread color inset|outset;	
//水平位置 垂直位置 模糊距离 阴影尺寸 颜色 外部阴影|内部阴影

一些问题

消除元素的默认内外边距

*{
	padding:0;
	margin:0;
}

盒子的宽与高

宽高属性只适用于块级元素,对行内元素无效

宽的问题

  • 如果一个盒子没有给定宽,那么子元素将占满父元素的宽度;
  • 如果子盒子没有给定宽度,设置padding不会撑开盒子

实现盒子居中

auto表示充分满,水平居中只需要保证左右都是auto,居中的前提是盒子有宽度

  • margin-left:auto;margin-right:auto
  • margin:0,auto
  • margin:auto

margin合并问题

  • 相邻块元素:如果两者垂直异向设置了margin,这么这一块将会被合并,以值最大的展示
  • 嵌套块元素:默认的子元素如果设置margin,那么会带着父元素一起;解决方法——为父元素指定一个border或加一个padding,但是这样会增大盒子;添加overflow:hidden

盒子布局的稳定性

width>padding>margin

盒子撑开问题

父盒子元素下,子内容指定宽度下,如果添加border或padding或margin,宽度会被撑开,则盒子的宽度为:内容宽+border宽+padding宽+margin宽

定位问题

如果加了position或浮动,margin失效。例外请看position应用

Float

标准流

一个网页内标签元素正常从上到下,从左到右排列顺序的意思,比如块级元素会独占一行,行内元素会按顺序依次前后排列

浮动

即让一个盒子浮在上方不受标准流制约

  • 实现文字环绕
  • 让div盒子一行内显示,并且会随着宽度变化而改变位置
  • 浮动不会越过父元素的padding值
  • 给加了浮动的div加上父元素,则想要定义在下面的浮动就不会跑上来;父元素内的盒子想要在一行,这都需要浮动,也可以直接在父元素上加
  • 浮动不会影响上面已经形成的标准流,只会影响下方
  • 优点:没有间隙
  • 默认让元素转变为行内块

属性

Float:left|right

清除浮动

清除浮动就是把浮动的盒子圈到里面,让父盒子闭合出口和入口不让他们出来影响其他元素。

clear:left|right|both

清除浮动的方式

额外标签

通过在浮动元素末尾添加一个空的标签

<div style="clear:both"></div>

父级添加overflow

overflow:hidden|auto|scroll

after伪类

空元素的升级版,好处是不用单独加标签了

.clearfix:after{centent:'';display:block;height:0;clear:both;visibilite:hidden}//正常浏览器

.clearfix{*zoom:1}//ie6\7

befor和after伪类

.clearfix:before,.clearfix:after{
    content:'';
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

Positon

边偏移

  • top 顶端偏移量,定义元素相对于其父元素上边线的距离
  • bottom 底部偏移量,定义元素相对于其父元素下边线的距离
  • left 左侧偏移量,定义元素相对于其父元素左边线的距离
  • right 右侧偏移量,定义元素相对于其父元素右边线的距离

定位模式

  • static
    含义:默认定位方式
    作用:取消定位

  • reletive
    含义:以自己的左上角为基点定位
    注意:可与偏移位置,但原来的位置继续占有

  • absolute
    含义:相对于 static 定位以外的第一个父元素进行定位
    情况:父级没有定位,相对于浏览器定位;父级有定位,相对于最近的父元素定位

  • fixed
    含义:相对于浏览器窗口进行定位
    注意:不占位置

应用

子绝父相

父元素相对定位占位置,不会影响其他元素;子元素绝对定位不占位置,在父元素内不会影响其他子元素

盒子居中

//水平居中
position:absolute;
left:50%;
margin-left:-(自身元素的一半宽度)

定位模式转换

元素添加了绝对定位和固定定位之后,元素模式也会发生转换,都转换为行内块模式,(与元素添加浮动一样的效果)

叠层次序

z-index:2
  • 如果取值相同,则按照书写顺序,后来居上
  • 只有相对定位、绝对定位、固定定位有这个属性。其余标准流,浮动、静态定位都没有

过渡

  • 过渡动画:是从一个状态渐渐的过渡到另外一个状态.过渡写在本身
  • 帧动画:通过一帧一帧的画面按照固定顺序和速度播放
transition:要过渡的属性 花费时间 运动曲线 何时开始
transition:width .5s ease 0		//单个
transition:width .5s,height .5s		//多组
transition:all .5s		//所有
属性描述
transition简写属性
transition-property属性名称
transition-duration花费时间,默认是 0
transition-timing-function时间曲线,默认是 "ease"逐渐慢|linear匀速|ease-in加速|ease-out减速
transition-delay何时开始,默认是 0

2D变形-transform

translate(x,y)

//变形
E:hover{transform:translate(100px,0)}	//向下移动100px
//过渡
E{transition:all 0.5}

居中写法

div{
	position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    //以自身转移
    transform:translate(-50%,-50%);
}

其他:translateY()、translateX()

scale(x,y)

transform:scale(0.6,0.8)		//宽与高缩放
transform:scale(0.6)		//宽与高一起缩放

其他:scaleX()、scaleY()

rotate(deg)

transform:rotate(30deg)		//旋转

skew(deg,deg)

transform:skew(30deg,0deg)//斜切

其他:skewX()、skewY()

metrix()

matrix(旋转 缩放 移动 倾斜) 六个参数
transform:matrix(0.866,0.5,-0.5,0.866,0,0)

transform-origin

transform-origin:right bottom		//设置变形原点为右下

实例:鼠标放在元素上去有阴影

box-shadow:2 10px 20px rgba(0,0,0,0.5)
transform:translateY(-20px)

3D变形

函数描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)定义 3D 转换,使用 16 个值的 4x4 矩阵
translate3d(x,y,z)定义 3D 转化
perspective(n)定义 3D 转换元素的透视视图定义 3D 转化,仅使用用于 X 轴的值,单位可以是px
translateY(y)定义 3D 转化,仅使用用于 Y 轴的值
translateZ(z)定义 3D 转化,仅使用用于 Z 轴的值
scale3d(x,y,z)定义 3D 缩放转换
rotate3d(x,y,z,angle)定义 3D 旋转定义 3D 缩放转换,通过给定一个 X 轴的值
rotateY(angle)定义沿 Y 轴的 3D 旋转
rotateZ(angle)定义沿 Z 轴的 3D 旋转定义 3D 缩放转换,通过给定一个 Z 轴的值
rotateX(angle)定义沿 X 轴的 3D 旋转

动画

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-

语法格式

animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向

示例

//定义动画 move名称
animation:move 3s ease 0s

//定义关键帧 
@keyframes move{
    from{};
    to{}
}

@keyframes move
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

属性

属性描述
animation-name规定 @keyframes 动画的名称
animation-duration花费时间
animation-timing-function速度曲线
animation-delay何时开始
animation-iteration-count播放次数,infinite表示无数次
animation-direction规定动画是否在下一周期逆向地播放。默认是 “normal”|alternate轮流反向
animation-play-state规定动画是否正在运行或暂停。默认是 “running”|paused
animation-full-mode规定对象动画时间之外的状态。forwards保持最后一个属性|backwards在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)|both向前和向后填充模式都被应用

flex伸缩布局

常用步骤

1、父元素添加伸缩布局

display:flex

2、子元素分配数,均分

flex:1

父级属性

  • min-width 最小值,达最小值时,不会随着窗口伸缩
  • max-width 最大值
  • flex-direction 布局方向row|column

浏览器前缀

浏览器前缀浏览器
-webkitGoogle Chrome,Safari,Android Browser
-moz-Firefox
-o-Opera
-ms-Internet Explorer,Edge
-khtml-Konqueror

【CSS高级】

元素的显示与隐藏

display

//隐藏之后,不再保留位置
display:none
display:block

visibility

//隐藏之后继续保留位置
visibility:visible
visibility:hidden

overflow

//管理溢出部分
overflow:visible		//默认
overflow:auto		//超出的时候显示滚动条
overflow:hidden		//溢出隐藏
overflow:scroll		//无论如何显示滚动条

用户界面样式

鼠标样式

//将鼠标放在元素上所显示的样式
cursor:pointer|text|move|default		//小手|选择|移动||

outline

//在元素外围,边框外围
outline:0|none	//不设置
outline:1px solid red	
outline-color:red
outline-style:solid
outline-width:2px

防止拖拽

resize:none

vertical-align

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXRiq5dc-1596887772829)(C:\Users\13433\AppData\Roaming\Typora\typora-user-images\image-20200719210939981.png)]

  • baseline 元素放置在父元素的基线上
  • sub 垂直对齐文本的下标
  • super 垂直对齐文本的上标
  • top 把元素的顶端与行中最高元素的顶端对齐
  • text-top 把元素的顶端与父元素字体的顶端对齐
  • middle 把此元素放置在父元素的中部
  • bottom 把元素的顶端与行中最低的元素的顶端对齐
  • text-bottom 把元素的底端与父元素字体的底端对齐
  • length
  • %

溢出文字隐藏

white-space

white-space:normal		//默认
white-space:nowrap		//强制在同一行显示所有文本 直到文本结束或者br标签

text-overflow

text-overflow:clip		//不显示省略标记
text-overflow:ellipsis		//显示省略号

与white-space配合使用

精灵技术

减少服务器的请求次数。拿一张图,图标放在里面,通过改变背景图的位置加载图标。

  • background-image
  • background-repeat
  • background-position

滑动门

<a href="#">
	<span>文字</span>
<a/>
  • 首先定义一个a标签,设置背景background: url(./bg.png) no-repeat;
  • 背景图高度与a一致,a设置inline-block,适当加上padding-left调整文字的位置
  • span也是inline-block,设置背景background: url(./bg.png) no-repeat right;,适当加上padding-right
  • hover:同时给文本和父元素加上背景图

Web字体

字体格式

ttfotfwoffeotsvg

图标字体

  • 网站

    • icoMoon http://www.iconfont.cn/
    • 阿里icon font字库 http://www.iconfont.cn/
  • 使用

    • fonts文件放在目录里
    • 在样式里声明字体,font-family可自定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sGth3SUq-1596887772833)(C:\Users\13433\AppData\Roaming\Typora\typora-user-images\image-20200721153144104.png)]

  • demo.html文件查看

  • 应用font-family:icomoon;

  • 独自设计

  • 保存为svg格式

  • 上传生成字体包 import icons

  • 下载兼容字体包

  • 追加新图标到原来库 import icons selection.json 文件

代码压缩

转换ico图标

  • png图片格式
  • 转换图标 http://www.bitbug.net/
  • 引入 <link rel="short ico" href="根目录的文件名"/>

【Html5】

新特性

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 对本地离线存储的更好的支持
  • 新的特殊内容元素,比如 article、footer、header、nav、section
  • 新的表单控件,比如 calendar、date、time、email、url、search

标签

格式类

mark

定义有记号的文本

meter

度量给定范围(gauge)内的数据

<meter value="3" min="0" max="10"></meter>
属性描述
formform_id规定 元素所属的一个或多个表单。
highnumber规定被视作高的值的范围。
lownumber规定被视作低的值的范围。
maxnumber规定范围的最大值。
minnumber规定范围的最小值。
optimumnumber规定度量的优化值。
valuenumber必需。规定度量的当前值。

progress

标示任务的进度

<progress value="22" max="100"></progress> 
属性描述
maxnumber规定任务一共需要多少工作。
valuenumber规定已经完成多少任务。

框架类(非h5

frame

//frame 定义 frameset 中的一个特定的窗口
//frameset 中的每个框架都可以设置不同的属性,比如 border、scrolling、noresize 等等。
//三列
<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

//一行两列
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
属性描述
frameborder0/1规定是否显示框架周围的边框
longdescURL规定一个包含有关框架内容的长描述的页面。
marginheightpixels定义框架的上方和下方的边距。
marginwidthpixels定义框架的左侧和右侧的边距。
namename规定框架的名称
noresizenoresize规定无法调整框架的大小。
scrollingyes/no/auto规定是否在框架中显示滚动条。
srcURL规定在框架中显示的文档的 URL。

frameset

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
属性描述
colspixels/%/*定义框架集中列的数目和尺寸。
rowspixels/%/*定义框架集中行的数目和尺寸。

noframes

 //定义针对不支持框架的用户的替代内容。
<noframes>
  <body>Your browser does not handle frames!</body>
 </noframes>

iframe

图像类

canvas

  • 创建canvas元素
<canvas id="myCanvas" width="200" height="100"></canvas>
  • 通过 JavaScript 来绘制
<script type="text/javascript">
//创建context对象
var cxt=document.getElementById("myCanvas").getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
//直线
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.stroke();
//圆形
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fillStyle="#FF0000";
cxt.fill();
//渐变
cxt.fillRect(0,0,175,50);
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;

2) figure&figcaption

标签定义 figure 元素的标题(caption)
<figure>
  <figcaption>标题</figcaption>
</figure>

音频/视频类

audio

<audio src="someaudio.wav"></audio>
  • 格式
格式IE 9Firefox 3.5Opera 10.5Chrome 3.0Safari 3.0
Ogg VorbisYESYESYES
MP3YESYESYES
WavYESYESYES
  • 属性
属性描述
autoplayautoplay自动播放
controlscontrols显示控件
looploop循环播放
mutedmuted规定视频输出应该被静音
preloadpreload音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性
srcurl音频的 URL

sourse

允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
</audio> 
属性描述
mediamedia query媒体资源的类型
srcurl媒体文件的 URL
typenumeric value资源的 MIME 类型

track

用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的

<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
属性描述
kindcaption chapters descroptions metadata subtitles轨道类型
labellabel轨道的标签或标题
srclanglanguage_code轨道的语言,若 kind 属性值是 “subtitles”,则该属性必需的

video

<video src="movie.ogg" controls="controls"></video>
  • 格式
格式IEFirefoxOperaChromeSafari
OggNoNo
MPEG 4NoNoNo
WebMNoNo
  • 属性
属性描述
autoplayautoplay自动播放
controlscontrols显示控件
heightpixels视频播放器的高度
looploop循环播放
mutedmuted视频的音频输出被静音
posterURL规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像
preloadpreload规视频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性
srcurl视频 URL
widthpixels视频播放器的宽度

语义化类

header、footer、nav、section、article、aside、detail、 dialog、summary

表单类

input新增类型

Input typeIEFirefoxOperaChromeSafari
emailNo4.09.010.0No
urlNo4.09.010.0No
numberNoNo9.07.0No
rangeNoNo9.04.04.0
Date pickersNoNo9.010.0No
searchNo4.011.010.0No
colorNoNo11.0NoNo
  • number
属性描述
maxnumber规定允许的最大值
minnumber规定允许的最小值
stepnumber规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
valuenumber规定默认值
  • range
属性描述
maxnumber规定允许的最大值
minnumber规定允许的最小值
stepnumber规定合法的数字间隔(如果 step=“3”,则合法的数是 -3,0,3,6 等)
valuenumber规定默认值
  • Date Pickers
<input type="date" name="user_date" />
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)

datalist

定义下拉列表

//与input配合使用;list属性绑定
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

output

定义输出一些类型

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form> 
属性描述
forelement_id定义输出域相关的一个或多个元素。
formform_id定义输入字段所属的一个或多个表单。
namename定义对象的唯一名称。(表单提交时使用)

fieldset

//打包表单内容生成一组字段
<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>
属性描述
formform_id规定 fieldset 所属的一个或多个表单。
namevalue规定 fieldset 的名称。

input新增属性

autofocus

//自动获取焦点
<input type="text" autofocus="autofocus" />

form

//规定输入域所属的一个或多个表单,必须引用所属表单的 id
<form id="user_form">
First name:<input type="text"/>
<input type="submit" />
</form>
Last name: <input type="text" form="user_form" />

height & width

//规定用于 image 类型的 input 标签的图像高度和宽度
<input type="image" src="img_submit.gif" width="99" height="99" />

list

//规定输入域的 datalist
<input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
</datalist>

multiple

//规定输入域中可选择多个值.email 和 file
<input type="file" name="img" multiple="multiple" />

placeholder
required

<input type="text" name="usr_name" required="required" />

SVG

什么是SVG

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG的优势

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

画布与SVG

  • SVG
    SVG 是一种使用 XML 描述 2D 图形的语言。
    SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
    在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。

  • Canvas
    Canvas 通过 JavaScript 来绘制 2D 图形。
    Canvas 是逐像素进行渲染的。
    在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

  • 比较

    Canvas

  • 依赖分辨率

  • 不支持事件处理器

  • 弱的文本渲染能力

  • 能够以 .png 或 .jpg 格式保存结果图像

  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘

    SVG

  • 不依赖分辨率

  • 支持事件处理器

  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)

  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)

  • 不适合游戏应用

地理定位

实例

<script>
var x=document.getElementById("demo");
//如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息
//如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
//showPosition() 函数获得并显示经度和纬度
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

处理错误和拒绝

//getCurrentPosition() 方法的第二个参数用于处理错误
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
  }

在地图中显示结果

//如需在地图中显示结果,您需要访问可使用经纬度的地图服务,比如谷歌地图或百度地图
function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

getCurrentPosition()

属性描述
coords.latitude十进制数的纬度
coords.longitude十进制数的经度
coords.accuracy位置精度
coords.altitude海拔,海平面以上以米计
coords.altitudeAccuracy位置的海拔精度
coords.heading方向,从正北开始以度计
coords.speed速度,以米/每秒计
timestamp响应的日期/时间

Web储存

在客户端存储数据

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中,数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

  • localStorage
  • sessionStorage

localStorage——没有时间限制的数据存储

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

sessionStorage——针对一个 session 的数据存储,当用户关闭浏览器窗口后,数据会被删除

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

应用程序缓存

使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本

什么是应用程序缓存(Application Cache)——用户可在应用离线时使用它们

Cache Manifest 实例

<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>

Cache Manifest 基础

如需启用应用程序缓存,请在文档的 标签中包含 manifest 属性

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。
manifest 文件的建议的文件扩展名是:".appcache"。
请注意,manifest 文件需要配置正确的 MIME-type,即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Manifest 文件

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)
manifest 文件可分为三个部分:

CACHE MANIFEST
【必要】在此标题下列出的文件将在首次下载后进行缓存

//列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件
CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK
NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

//规定文件 "login.asp" 永远不会被缓存,且离线时是不可用的.*表示所有文件
NETWORK:
login.asp

FALLBACK
在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

//规定如果无法建立因特网连接,则用 "offline.html" 替代
FALLBACK:
/html5/ /404.html

更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况

  • 用户清空浏览器缓存
  • manifest 文件被修改
  • 由程序来更新应用缓存

[实例]

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

以 “#” 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。
注释:浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)

服务器发送事件

HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新

【快捷方式】

多个标签

div*3

父子标签

ul>li

并列标签

div+p

类名标签

div.nav

其他

inout:text

【display】

block

//常见标签
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

//特点
- 从新行开始
- 高度、行高、外边距、内边距可以控制
- 宽度默认是容器的100%
- 可以容纳内联元素和其他块元素

inlne

//常见标签
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

//特点
- 仅靠自身字体大小和图像尺寸支撑
- 一般不可以设置宽度、高度、对齐等属性
- 常用于控制页面内文本的样式

inline-block

//常见标签
<img/>、<input>、<td>

//特点
- 和相邻行内块在一行上,之间会有**空白缝隙**
- 默认宽度是本身内容宽度
- 高度、行高、外边距、内边距可以控制

【版心与布局】

常见的有960px、980px、1000px、1200px

布局流程

  • 确定版心(可视区域\安全宽度)
  • 分析行模块与列模块

常见布局

  • 一列固定宽度且居中
  • 两列左窄右宽
  • 通栏平均分布
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页