HTML&CSS基本知识

一、HTML基本介绍

W3C标准（成立于1994年，web技术领域最权威和具影响力的国际中立性技术标准机构）

world Wide web Consortium(万维网联盟)

W3c标准包括：

结构化标准语言（HTML、XML）

表现标准语言（CSS）

行为标准（DOM，ECMAScript）

HTML：超文本标签语言

h5并不是新语言，而是html语言的第五个版本

支持：所有主流浏览器都支持h5（chrome，Firefox，safari。。。）。IE9（部分支持）及以上支持h5，但是ie8（完全不支持）及以下不支持h5.

增加了新特性:语义特性，本地存储特性，网页多媒体，二维三维，特效。

HTML骨架:

<html> 根标签/根节点

  	<head> 用于存放title、meta、base、style、script、link

      		<title></title>标题标签

  	</head>

  	<body>主体标签

  	</body>

</html>

标签分类:双标签 <标签名>内容</标签名>

         单标签 <标签名/> 如换行标签<br />

标签关系

1.嵌套关系：如html是所有标签的父标签、

2.并列关系：如head和body标签

如果两个标签是嵌套关系，子元素最好缩进一个tab的身位。若是并列关系，最好上下对齐。

sublime快速生成html骨架：1.html：5后tab 2.！后tab   *快速生成必备插件：emmet

<!DOCTYPE xxx>标签作用：告诉我们使用哪个html版本

如<！DOCTYPE html>说明使用的是h5版本

字符集

utf-8：包含全世界所有国家需要用到的字符

gb2312：简体中文

BIG5：繁体中文

GBK：包含全部中文字符

标签的语义化：指标签的含义

遵循的原则：先确定语义的html，再选合适的CSS

二、HTML标签

HTML标签：

一、排版标签：

1.标题标签：<h1></h1> <h2></h2>  <h3></h3> <h4></h4> <h5></h5>

2.段落标签：<p> 文本内容 </p>

3.水平线标签：<hr />(单标签) 增加一条线 hr=horizon

4.换行标签：<br /> br=break

5.div span标签：网页布局的两个主要盒子  div=division

二、文本格式化标签

1.字体加粗：<strong> </strong>

2.字体倾斜：<em> </em>

3.字体加删除线:<del> </del>

4.字体加下划线：<ins> </ins>

标签属性

基本语法格式：

<标签名 属性1=“属性值” 属性2=“属性值2” ...>内容</标签名>

在上面的语法中，

标签可以拥有多个属性，必须写在开始标签中，位于标签名后面

属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。

任何标签的属性都有默认值，省略该属性则取默认值

采取 键值对 的格式 key=”value”的格式

三、图片标签

基本语法格式

<img src=”图像URL(图像路径)” />

<img />标记属性

属性 属性值 描述

src URL 图像的路径

alt 文本 图像不能显示时的替换文本

title 文本 鼠标悬停时显示的内容

width 像素 图像宽度

height 像素 图像高度

border 像素 边框宽度

四、超链接

基本语法格式：

<a href=”跳转目标”  target=”目标窗口的弹出方式”>文本或图像</a>

Href用于指定链接目标的url地址，当为标签应用href属性值时，它就具有了超链接的功能

Target用于指定链接页面打开方式，有_self和_blank两种取值，其中self为默认值，blank为在新窗口中打开方式。

即如果想要对元素添加点击链接功能，则需要对其加上链接标签即a标签

注意

外部链接 需要添加http://

内部链接 直接链接内部页面名称即可 比如<a href=”index.html”>首页</a>

如果没有确定链接目标，通常将链接标签的href属性值定义为”#”，表示该链接暂时为一个空链接

除了文本，图像表格音频视频等都可以添加超链接 如<a href="img标签.html" target="blank"><img src="C:\Users\Administrator\Desktop\炜\photo\职业照小.jpeg"></a>

锚点定位

<a href=”#id=uu”>xxx</a>  记得添加#和””号！！！！！非常重要！！！！！

<标签名 id=uu> </标签名>

详例见锚点定位.html

Base标签

在head中添加<base target=”_blank” /> 可实现所有链接都以新窗口打开，同理_blank改为_self则实现所有链接都以自身窗口打开

若想实现其中某个链接以不同方式打开，则对其单独设置target属性即可。

特殊字符代码  都要记得加“&”

&lt (<)  &gt (>)  &copy(版本商标)  &nbsp(空格)

注释标签

<!--xxx--> 养成注释的习惯！！！！！！！！

五、路径问题（一般使用相对路径）

六、列表

无序列表：各个列表项之间没有顺序级别之分，是并列的（没有顺序数字前戳）。

基本语法格式：

<ul>

<li>列表项1</li>

<li>列表项2</li>

<li>列表项3</li>

...

</ul>

注意事项：

1.<ul></ul>之间只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。

2.<li></li>之间相当于一个容器,可以容纳所有元素

3.无序列表的样式可让CSS来完成设置

有序列表：带顺序数字前缀的列表

基本语法格式：

<ol>

<li>列表项</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>

七、表格

表格创建

基本语法格式：

<table>

<tr>

<td>单元格内的文字</td>

...

</tr>

...

</table>

Table为整体框架

Tr为行数

Td为每一行内的单元格数（没有列的说法）

表头标签

把表头的<td>换成<th>，会自动加粗居中。

表头结构

表格布局时可分为头部主体和页脚

<thead></thead>:用于定义表格头部

<tbody></tbody>:用于定位表格主体

以上两种都不显示，只是用于布局。

表格标题

<caption>标题</caption> 写在table标签内

合并单元格

跨行合并：rowspan 跨列合并：colspan

合并单元格的思想：将多个内容合并的时候，会有多余的东西，将其删除。例如把3个td合并成一个，就多于2个，需要删除

公式 删除的个数=合并的个数-1

表格不要纠结于外观，是CSS的作用

注意事项：table里只能放tr标签，不能放其他。而td里可以放任何东西。

八、表单

组成：表单控件，提示信息，表单域3个部分构成

input控件（重点）为单标签

Type中image可以设置按钮为其他图像 <input type="image" src="img/三国.jpg">

File可以用来上传文件 添加multiple属性可以上传多个文件

如果单选框是同一组，那么可以通过name属性来设置为一组，从而限制选择

Value可以改变按钮中的文本

Checked可以设置默认选项 即<input type=”button” checked=”checked” />

Maxlength可以设置其最大输入字符数

email 用于填写邮箱，填写时必须有@符号，同时包含服务器域名。如不能满足验证，则会阻止当前的数据提交

tel 用于填写号码，不是用来验证，是为了能在移动端打开键盘时打开数字键盘。即限制了用户只能输入数字

url填写网址。只能输入合法的网址，必须包含http：//

number 只能输入数字 其中 max最大值 min最小值 value默认值

新增占位符焦点多选等属性（即input中的属性值）

color 选择颜色

Label标签的使用

若想实现点击文字就可进入文本框，则可用label标签包裹整个表单选项

如：<label>输入账号：<input type="text" /></label>

若有多个输入框，想定位到某个，则对目标框设置id，然后<label for=”id”></label>

若想实现大量文本输入，则可用textarea标签

语法：<textarea>请输入留言</textarea>

下拉菜单：用select标签

<select>

		<option  >北京</option>

		<option selected="selected" >上海</option>

		<option >广州</option>

		<option >深圳</option>

</select>

其中selected=”selected”代表默认选项

option也可以为单标签，效果一样

表单域：即整个表单框架

基本语法：

<form action=”url地址” method=”提交方式” name=”表单名称”>

各种表单控件

</form>

常用属性：

Action:表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址

Method：用于设置表单数据的提交方式，其取值为get或post

Name：用于指定表单的名称，以区分同一个页面中的多个表单。

注意：每个表单都要有自己的表单域

  • H5input新增的type类型

email 用于填写邮箱，填写时必须有@符号，同时包含服务器域名。如不能满足验证，则会阻止当前的数据提交

tel 用于填写号码，不是用来验证，是为了能在移动端打开键盘时打开数字键盘。即限制了用户只能输入数字

url填写网址。只能输入合法的网址，必须包含http：//

number 只能输入数字 其中 max最大值 min最小值 value默认值

新增占位符焦点多选等属性（即input中的属性值）

color 选择颜色

九、HTML5新特性

html文档类型和字符集

 HTML:sublime输入html：4s

HTML5:sublime输入html：5 或 ！

XHTML:sublime输入html：xt

H5中字符集写法：<meta charset=”UTF-8”>

H5常用新标签

Header：定义文档的页眉 头部

Nav：定义导航链接的部分

Footer：定义文档或节的页脚 底部

Article：定义文章

Section：定义文档中的节

Aside：定义其所处内容之外的内容 侧边

Datalist：标签定义选项列表，请与input元素配合使用该元素

Fieldset:可将表单内的相关元素分组，打包

Datalist用法

通过设置id并在input中的list属性链接这个id，从而达到智能显示的效果

<input type="text" value="输入明星" list="star">     <!-- input里面用list -->

<datalist id="star">  <!-- datalist里面用id实现和input的链接 -->

		<option >刘德华</option>

		<option >郭富城</option>

		<option >黎明</option>

		<option >张学友</option>

		<option >叼你妈</option>

		<option >臭傻逼</option>

		<option >曹尼玛</option>

		<option >吃屎吧</option>

</datalist>

datalist与selection的区别:前者不仅可以选择，还可以输入。

datalist弊端：在不同浏览器的显示不同，少用

如果与之连接的input type值为url，则其value值必须添加http://

Fieldset用法：

与legend搭配使用，legend包含在fieldset里面负责写标题。例：

<fieldset>

		<legend>用户登录</legend>   <!-- 标题 -->

		用户名：<input type="text"> <br />

		密　　码：<input type="password">

</fieldset> 

常用属性值

Placeholder 可实现用户输入时里面的文字消失，删除所有文字，自动返回

Autofocus：实现打开网页时，光标自动定位到其所在表单

Autocomplete：实现自动记录表单内容，再次输入时可智能提示

用法：用户名：<input type="text" autocomplete="on" name="username">

				<input type="submit">

注意：必须要有提交按钮。其次表单必须要有名字。

required：要求必须输入

pattern:正则表达式验证

multiple 实现上传填写多个东西

form：指定某个表单id，再将当前表单的form属性值设置为与其id相同。在将来指定id号的表单进行数据提交的时候，也会将当前表单元素的数据进行提交

十、多媒体标签

多媒体标签

引用网上的视频：embed

引用本地视频：video 三种格式：mp4、ogg、wmv

引用本地音频：audio 三种格式：mp3、ogg、wav

常用属性 ：autoplay控制自动播放  controls：添加进度条等控制元素

Loop：x 循环播放x次 poster：设置视频封面

	<!-- 从上往下一个个尝试 -->

	<video controls>

		<source src="xx.mp4">

		<source src="xx.flv">

	</video>

十一、解决低版本浏览器新标签不兼容的措施

	<!-- 1.通过创建新标签并转化标签模式 -->

	<!-- <script>

		document.createElement("名字")   默认为行级元素

	</script> -->

	<!-- 2.通过引入第三方插件 -->

	<script src="../html5shiv.min.js"></script>

其他标签

keygen 实现加密 产生私钥和公钥，私钥客户端对信息进行二次加密后与公钥一起发给服务器，服务器再通过公钥对其解密

output输出信息

十二、CSS入门

1、css样式规则

格式：选择器{ 属性：属性值；属性：属性值；}

规则：

选择器用于指定CSS样式作用的html对象，花括号内是具体的样式

属性和属性值以“键対值”的形式出现

属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等

属性和属性值之间用英文”:”链接 不是等号

多个键值对之间用英文”;”区分

2、选择器

选择器

标签选择器

格式：

标签名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

类选择器

格式

.类名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}

标签调用时用class=“类名”即可

命名规范：

长名称或词组可以使用中横线来为选择器命名

不建议使用“_”下划线命名css选择器

不要纯数字、中文等命名，尽量使用英文字母

多类名选择器

即一个标签带多个类名，从而实现灵活自由搭配

例：<div class="font20 blue">傻逼</div>

	<div class="font14 blue">憨憨</div>

	<div class="font20 orange">傻逼</div>

	<div class="font14 orange">傻逼</div>

1.样式显示效果跟html中的类名先后顺序无关

2.各个类名中间用空格隔开

交集选择器

<style>

标签名.类名{}

</style>

并集选择器

<style>

标签名,

标签名,

标签名,

标签名{}      一般上下写

</style>

Id选择器

语法格式：

#id名{}

<xx id=””></xx>

Id与类选择器区别：一个id只能用于一个标签，类可以用于多个标签。

链接伪类选择器

语法格式

：link{}  设置未点击链接时链接的样式

：visited{} 设置点击链接后链接的样式

：hover{}  设置鼠标移动到链接时的样式

：active{}  设置鼠标点击链接且不松开时的样式

注意：必须按照以上lvha的顺序

一般工作不需要用到active和visited，所以有以下便捷写法*/

		a{color:gray;}a:hover{color:red;}

结构伪类选择器(原理:先找到XX元素的父元素，再找这个父元素的第指定个元素，如果不与xx元素相同则无视。即是相对于父元素的结构伪类）

n是从0到指定的元素个数

xx:first-child{}     选择xx元素中的第一个子元素

Xx:last-child{}     选择xx元素中的最后一个子元素

Xx：nth-child（y）{}  选择xx元素中的第y个子元素

Xx：nth-child（n）{}  选择所有子元素

Xx：nth-child（even）{} 选择所有第偶数个子元素

Xx：nth-child（odd）{} 选择所有第奇数个子元素

Xx：nth-child（2n）{} 选择所有第偶数个子元素

Xx：nth-child（2n+1）{}   选择所有第奇数个子元素

Xx：nth-last-child（）{} 与上面相同，但是是倒数

xx：nth-child（-n+y）{} 选择前y个

xx:nth-of-type(n){}  只认定xx元素同级元素中所有xx元素。即所有xx元素中的第n个

xx:nth-last-of-type （）{} 倒数

兄弟伪类选择器

xx + yy {}  加号代表与xx元素相邻的yy元素 必须是相邻的  （相邻后一个标签受影响）

xx ~ yy{}波浪号代表满足条件的所有xx的兄弟元素  （相邻后同一级标签受影响）

伪元素选择器

X：：first-letter{}  选中x标签中文档的第一个字

X：：first-line{} 选中x标签中文档的第一行

X：：selection{} 使选中的文字发生实时变化（只能改变显示样式不能改变内容大小）

X：：before{content：”xx”;}在x文档的开头添加文字xx

X：：after{content:”xx”；}在x文档的结尾添加文字XX

伪元素的本质

伪元素本质为行内元素，改为块级元素(或者浮动、定位）后可以设置宽高，伪元素不占位置。设置：before和：after时必须设置content属性，否则伪元素不起作用

后代选择器（后代所有标签受影响）

父标签 子孙标签{}

可以选择父标签内的所有对应子标签、孙标签、重孙标签。。。

子元素选择器(后代一级所有标签受影响）

父标签>字标签{}

只能选择父标签的亲生儿子标签。

target样式：可以为锚点目标元素添加样式，当目标元素被触发为当前锚点链接的目标时，调用此样式

语法 目标链接：target {样式;}
  • 属性选择器

3、颜色

CSS颜色三种表达方式

1.直接用名字表示 color：red

2.用16进制代码表示  color：#ffb100

3.用rgb代码表示 rgb（192，255，252） 分别代表红绿蓝，16进制数

4.rgba（x，x，x，x）最后一个数值可以设置半透明度

5.hsl（颜色，饱和度，亮度）；  颜色0~360  饱和度、亮度0%~100%

4、CSS书写规范

1.选择器与花括号之间必有空格

2.属性名与冒号之间不允许有空格，冒号后必须有空格

3.属性值后必须加分号

4.当选择器有多个并行标签时，应上下逗号分开

5.选择器的嵌套尽量不超三层

6.不同属性应另起一行

5、CSS样式表

内部样式表

<head>

<style type=’’text/CSS’’>

选择器 {属性1：属性值1；属性2：属性值2；属性3：属性值3；}

</style>

</head>

行内样式表

<标签名 style=’’属性1：属性值1；属性2：属性值2；属性3：属性值3；”>

外部样式表

<head>

<link href=’’css的路径’’ type=’’text/css’’ rel=’’stylesheet’’ />   是个单标签

</head>

总结：推荐使用外部样式表

6、标签显示类型

块级标签

如<h1> <p> <div> <ul> <ol> <li>等

块级元素特点：

总是从新行开始

高度、行高、外边距以及内边距都可以控制

宽度默认是容器的100%

可以容纳内联元素和其他块元素

行内元素

如<a> <strong><b><em><i><del><s><ins><u><span>等

特点：

和相邻行内元素在一行上

高宽无效，但水平方向的padding和maigin可以设置，垂直方向的无效

默认宽度是它本身内容的宽度

行内元素只能容纳文本或其他行内元素

注意：文字标签里不能放块级元素。链接里不能再放链接

行内块元素

如<img/><input/><td>等

特点：

和相邻行内元素在一行上，但是之间会有空白缝隙

默认宽度就是它本身内容的宽度

高度，行高，外边距以及内边距都可以控制

7、CSS三大特性

层叠性

当同个标签设置样式属性不同值出现冲突时，则依照就近原则以最后的样式属性为准。

继承性

子元素能继承父元素的样式

优先级

CSS Speciality 权重值：

继承或*的贡献值   0,0,0,0

每个元素标签的贡献值 0,0,0,1

类、伪类、元素选择器的贡献值 0,0,1,0

Id选择器的贡献值 0,1,0,0

行内样式贡献值 1,0,0,0

！Important的贡献值 ∞无穷大

注意：

权重可以叠加 如：div ul li 的贡献值为0,0,0,3

数位之间没有进制

继承的权重为0

十三、字体设置

CSS Unicode字体

微软雅黑 \5FAE\8F6F\96C5\9ED1

宋体 \5B8B\4F53

尽量只写unicode字体 写宋体和微软雅黑

CSS中注释方式：/*xxxxx*/ 

设置字体样式：font-family:”xxx”

设置字体字号：font-size:”xxpx”

字体字号常用技巧：

网页中正文普遍使用14px

若有设置多个字体，则字体之间应用英文逗号隔开

中文字体需要加英文双引号，英文字体不需要，且英文字体应在中文字体之前

若字体中包含空格、π、$等符号，无论是英文还是中文字体都必须加引号

尽量使用系统默认字体

设置字体粗细

Font-weight:

可用属性值包括normal（即400）、bold（即700）、bolder、lighter、100-900之间100的整倍数

设置字体风格

Font-style:

可用属性值包括normal,italic(斜体)

字体综合设置

选择器{font：font-style font-weight font-size/line-height font-family；}

注意：

不能更换顺序，以空格隔开

不需要设置的属性可以忽略

文字阴影:

Text-shadow:水平位置(px) 垂直位置(px) 模糊距离(px) 阴影颜色(rgba);

行高对齐和首行缩进:

行间距：line-height：xxpx;

首行缩进  text-indent：xxem；

字间距:letter-spacing

Text-decoration：none 不设置下划线

Text-decoration：underline 设置下划线

Text-decoration：overline 设置上划线

Text-decoration：line-through 设置穿过文本的一条线

十四、背景设置

Background-img:url（）；背景图地址

Background-color:；设置背景颜色

Background-repeat:；设置平铺方式  有no-repeat、repeat-x、repeat-y、space、round选项，分别对应全平铺，x轴方向平铺，y轴方向平铺,图片不缩放并增加空隙后平铺，图片缩放后使其紧贴平铺 

设置背景图位置

Background-position：x轴方向像素 y轴方向像素；

Background-posiiton：方位词 方位词；（无先后顺序之分）top bottom left right center

Background-position：方位词+y像素（x像素+方位词）；

背景图平铺开始位置

background-origin:border-box,padding-box,content-box(即从border、padding、content开始平铺）

bcakground-clip:border-box,padding-box,content-box(即分别只显示border及以内、padding及以内、content的内容）

背景附着

Background-attachment：scroll（fixed） 前者为默认随对象内容滚动，后者为背景图像固定 local

背景简写：background：color  url 平铺方式 滚动方式 位置;（尽量采用此顺序）

背景半透明：在颜色设置中采用rgba（x，x，x，0.x）最后为透明度数值

背景缩放：

Background-size：xxpx xxpx；

Background-size：xx% xx%；

Background-size：contain；    自动调整缩放比例保证图片完整显示

Background-size：cover；    自动调整缩放比例保证图片填充满背景区域

多背景图片

Background-image：url（），url（）；

Background：url（xxxx）……，url（xxx） ……；   不同图片以逗号隔开

十五、盒子边框

Border-color：  设置边框颜色

Border-width： 设置边框厚度

Border-style： 设置边框类型

Style属性值有：

实线solid

虚线dashed

点线dotted

双实现double

不同方向边框的写法

border-top（left、right、bottom）-width（color、style）

边框综合写法

Border：width style color

合并细线表格

Border-collapse：collapse

圆角矩形

Border-radius:xxpx(xx%)     设置四个角

Border-radius:xx xx     设置左上右下  左下右上

Border-radius：XX XX XX 设置左上 左下右上 右下

Border-radius：xx xx xx xx   左上 右上 右下 左下

border-radius:xx/xx     设置每个角的水平/垂直方向

border-方位词-方位词-radius：xxpx； 如broder-top-right-radius

border-radius：x1 x3 x5 x7/x2 x4 x6 x8;    x1x2为左上 x3x4右上 以此类推    

边框图片

border-image-source：url（）；

border-image-slice：xx fill； 图片切片，不需加单位,即将图片四个边xx像素的宽度作为边框 fill则是将整个图片填充

border-image-width:xxpx 设置边框背景图宽度 但是不影响内容放置

border-image-outset:0  边框扩展，一般为0

border-image-repeat:repeat/round (前者直接平铺 后者缩放后平铺）

简写 border-image:source slice /width/outset repeat;

盒子内边距

Padding：xx     设置四个边距

Padding：xx xx    设置上下 左右边距

Padding：xx xx xx   设置 上 左右 下边距

Padding：xx xx xx xx   设置上 右 下 左 边距

盒子外边距

margin：xx

margin：xx     设置四个边距

margin：xx xx    设置上下 左右边距

margin：xx xx xx   设置 上 左右 下边距

margin：xx xx xx xx   设置上 右 下 左 边距

盒子模型布局稳定性

使用优先级：width>padding>margin

原因：

1.margin会有外边距合并，还有ie6下面margin加倍的bug

2.padding会影响盒子大小，需要进行加减计算

3.Width没有问题，常用宽度剩余法 高度剩余法来做

十六、盒子浮动

浮动：指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

语法：选择器{float：属性值；}

属性值：left、right、none

使用浮动首先要添加标准流父盒，从而防止布局失真

浮动特性

父盒内的盒子设置浮动后会就近对齐父盒子，但不会遮盖padding和margin

兄弟盒子中第一个盒子如果浮动，第二个盒子设置浮动后会与其顶部对齐。若第一个盒子不浮动，第二个盒子设置浮动后顶部会与其底部对齐

元素（包括块级和行内）添加浮动后，都会具有行内块元素的特性

总结：float==>浮漏特

浮：加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面

漏：加了浮动的盒子，不占位置的，他浮起来了，他原来的位置漏给了标准流的盒子

特：特别注意要和标准流父级搭配使用。

清除浮动

在一般情况下，考虑到子盒子的内容变化，父盒子都不方便设置高度。子盒子没有浮动时会自动撑开父盒子。如果子盒子浮动，则父盒子高度会变为0，导致其他盒子占据位置。

清除浮动就是解决没有设置高度的父盒子在子盒子浮动后高度变为0的现象

解决方法

1.在父盒子中添加overflow：hidden；

2.浮动盒子后添加空标签，且将该标签的clear属性值设置为both

.clear {

			clear: both;}  清除浮动的影响

3.用after伪元素清除浮动（推荐）

父盒子类名添加 clearfix

.clearfix:after {

			content: '.';

			display: block;

			height: 0;

			visibility:hidden;

			clear: both;

		}

4.用before和after伪元素清除浮动（推荐）

父盒子类名添加clearfix

.clearfix:before,.clearfix:after {display:table;content:’ ‘;}

.clearfix:after {clear:both;}

.clearfix {*zoom:1;}

十七、定位

边偏移

Top bottom left right

定位模式

语法：

Position：{属性值；}

属性值：

静态定位static：

相对定位relative：

绝对定位absolute

固定定位fixed

Static定位：

默认，该定位下无法使用边偏移属性

Relative定位：

定位后可通过边偏移改变位置，是以自身左上角为基准。不脱标，依旧是标准流，原先位置保留

Absolute定位：

可通过边偏移改变位置，完全脱标不占位置。

子盒子设置为absolute后，父盒子必须定位为任何定位类型，子盒子才能以父盒子为基准设置边偏移改变位置，否则会乱跑

子绝父相：一般子盒子设置为绝对定位后，父盒子要设置为相对定位较好

水平/垂直居中：盒子设置绝对定位后，margin中的auto无效（具体数值有效）

要居中一般是以：1首先left50%2.然后走外边距负的一半值即可

如：left：50%；margin-left：-xxpx；

Top：50%；margin-top：-xxpx；

或者 left：父盒子宽度一半减去子盒子宽度一半；top：父盒子高度一半减去子盒子高度一半

Fixed定位

固定定位的元素跟父亲没有任何关系，只认浏览器

完全脱标,不占位置,不随着滚动条移动

叠加次序

index:正整数、负整数、0

注意

1.index默认属性值为0，取值越大，定位元素在层叠元素中越居上

2.如果取值相同，则按顺序后来居上

3.后面数字不能家单位

4.只有相对定位绝对定位固定定位有这个属性。

固定绝对定位模式转换

跟浮动一样,元素添加了绝对定位和固定定位之后,元素都会变成行内块模式

也就是；如果行内元素添加了绝对定位和固定定位后,可以不用转换模式,直接添加高度宽度

十八、Display和visibility、Overflow溢出的使用

Display设置或检索对象是否及如何显示

Display：none 隐藏对象

Display：block除了转换为块级元素之外还有显示元素的意思

特点：隐藏之后，不再保留位置

Visibility

设置或检索是否显示对象

Visible：对象可视

Hidden：对象隐藏

特点:隐藏之后,继续保留原有位置

Overflow溢出

属性值

Visible:不剪切内容也不添加滚动条 （默认）

Auto：超出自动显示滚动条,不超出不显示滚动条

Hidden：不显示超出对象内容的尺寸,超出的部分隐藏掉

Scroll：不管超出内容否,总是显示滚动条

HTML&CSS基本知识的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. css基本知识框架图

    css基本知识框架:(一:基本知识缩影.二基本知识框架图) 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部样式 3.样式表配置方法 4 ...

  3. CSS基本知识和选择器

    一.CSS基本知识 内联式css样式,直接写在现有的HTML标签中 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red ...

  4. css基本知识框架（转）

    css基本知识框架: 1.css样式表的基本概念 2.样式表基本类型-----1.内嵌样式 2.内联样式3.链入外部样式表4.导入外部?式 3.样式表配置方法 4.字体属性----1.font-fam ...

  5. css基本知识

    WANGJUN59451   css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...

  6. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  7. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  8. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  9. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  10. <转载>Div+Css布局教程（-）CSS必备知识

    目录: 1.Div+Css布局教程(-)CSS必备知识 注:本教程要求对html和css有基础了解. 一.CSS布局属性 Width:设置对象的宽度(width:45px). Height:设置对象的 ...

随机推荐

  1. isHex

    public class Test { public static boolean isHex(String str) { boolean isHexFlg = true; int i = 0; ch ...

  2. the solution of Mining Your Own Business

    the description of problem (我看的是 PDF 里面的原题所以这里描述会和题目不一样,但是大意一致) 给定一个未必连通的无向图,问最少在几个点设置出口,可以保证任意一个点坍塌 ...

  3. nginx配置解决跨域访问

    场景:前后的分离项目,前端vue框架,打包后放在Tomcat里访问,端口是8080,后端服务端口8058.访问前端项目时,调用后端接口报跨域. 后端环境 正常访问端口8058 经过nginx配置(文末 ...

  4. Vue之自定义过滤器

    使用Vue.filter('过滤器名称',方法); 1. <!DOCTYPE html> <html lang="en"> <head> < ...

  5. Vue之键盘事件

    1.使用keydown触发事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. multiset用法汇总

    c++语言中,multiset是<set>库中一个非常有用的类型,它可以看成一个序列,插入一个数,删除一个数都能够在O(logn)的时间内完成,而且他能时刻保证序列中的数是有序的,而且序列 ...

  7. Unity - EditorWindow 折叠树显示（IMGUI）

    仅适用于2018之前的版本,有UIElements或者UIWidgets的最好用新的 基本实现 树节点 public interface ITreeNode { ITreeNode Parent { ...

  8. 动态规划的状态设计 | bot 讲课の补题

    sto james1badcreeper orz. 好厉害的题,但是怎么有人补了三天才补完呢? CF1810G The Maximum Prefix 线性 dp,怎么有 bot 说题目难度在 *240 ...

  9. HTTP请求中浏览器的缓存机制（转）

    摘要:在Web开发过程中,我们可能会经常遇到浏览器缓存的问题.本文作者详细解释了浏览器缓存的机制,帮助读者更深层次的认识浏览器的缓存. 流程 当资源第一次被访问的时候,HTTP头部如下 (Reques ...

  10. Shader学习笔记 （一） ：利用shader在一个面绘制出圆

    在各种游戏中,想必大家一定和我一样总是惊叹于游戏画面的各种炫酷的特效. 作为游戏开发中单独列出的一个职业TA(Technology Art),他们会利用GLSL或者HLSL等着色器语言绘制出一幅幅美丽 ...