1.html
! 然后回车,快速生成HTML模板
1.HTML标题(heading)
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
逐渐变小,h1最大
2.标签可以拥有属性(如:href)
<a href="http://www.w3school.com.cn">This is a link</a>
3.HTML中的样式
3.1外部样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
rel:规定当前文档与被链接文档之间关系 stylesheet:样式表 href:外链接文件
3.2.内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3.3.内联样式表
当特殊的样式需要应用到个别元素时，就可以使用内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
4.超链接a标签
4.1属性:
href :规定链接指向的页面的 URL。
target: __blank 跳转新页面; parent ; _self ; _top 规定在何处打开链接文档。
name:HTML5 中不支持。规定锚的名称。
type :规定被链接文档的的 MIME 类型
4.2 在同一页面内进行跳转
首先，我们在 HTML 文档中对锚进行命名：
<a name="tips">查看Chapter4</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">Chapter4</a>
从 查看Chapter4 跳转到 Chapter4
5.img标签
<img src="url" />
img没有闭合标签,只有属性
src: 图像的 URL 地址。
alt: 替换文本属性 (在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nHmLctOO-1597290913139)(C:\Users\张奥\Desktop\1596956670405.png)]
此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。)
6.表格
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格有
标签来表示, 每个表格均有 若干行(由标签定义),每行被分割为 若干单元格(由| 标签定义).字母td指表格数据table data,即单元格内容.数据单元格可以包括文本,图片,列表,段落,表单,水平线,表格等 |
在浏览器显示如下：
| row 1, cell 1 | row 1, cell 2 |
|---|---|
| row 2, cell 1 | row 2, cell 2 |
在<table border="2">加边框属性
在<tr></tr>内加<th>表头
7.列表
有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
浏览器显示如下：
- Coffee
- Milk
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
浏览器显示如下：
- Coffee
- Milk
8.div和span
块级block: 会换行 <h1>, <p>, <ul>, <table> <div>
行内inline :不会换行 <b>, <td>, <a>, <img>,<span>
**使用HTML5的网站布局
| header | 定义文档或节的页眉 |
|---|---|
| nav | 定义导航链接的容器 |
| section | 定义文档中的节 |
| article | 定义代理的自包含文章 |
| aside | 定义内容之外的内容(侧栏) |
| footer | 定义文档或者节的页脚 |
| details | 定义额外的细节 |
| summary | 定义details元素的标题 |
 |
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3School.com.cn
</footer>
</body>
<style>
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
效果图
clear:both 这里nav和section都是浮动元素了,footer会和浮动元素一行.为了文档流不被浮动元素影响.用清除浮动
9.框架标签Frame
框架结构标签 :定义如何将窗口分割为框架
每一个frameset定义了一系列的行或列
rows/columns的值规定了行或列占屏幕的面积
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
感觉这个标签用处不大
内联框架—<iframe>
<iframe src="URL"></iframe>
10.HTML中head元素
<head> 元素是所有头部元素的容器。 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
-
标签定义文档的标题:
<title> -
标签为页面上的所有链接规定默认地址或默认目标（target）:
<base><head> <base href="http://www.w3school.com.cn/images/" /> <base target="_blank" /> </head> -
标签定义文档与外部资源之间的关系。标签最常用于连接样式表：
<link><head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
-标签用于为 HTML 文档定义样式信息 :<style>
-
`标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
11.字符实体
不允许用大于小于号> < ,用 <等
显示结果 描述 实体名称 < 小于号 < > 大于号 > & 和号 & 空格  
11.form表单
input
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br> Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
input type属性类别
text password submit
radio :单选按钮
<form>
<input type="radio">自行车<br>
<input type="radio" checked>小轿车<br>
<input type="radio">火箭<br>
</form>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a9lPGsb0-1597290913147)(C:\Users\张奥\AppData\Roaming\Typora\typora-user-images\1597290481023.png)]
checkbox:复选框 button
HTML5 输入类型
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
**注释：**老式 web 浏览器不支持的输入类型，会被视为输入类型 text。
输入类型：number
用于应该包含数字值的输入字段。
您能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。
<form action="">
<input type="number" max="5" min="1">
<input type="submit">
</form>
select 下拉列表
<form>
<select>
<option value="北京">北京</option>
<option value="天津"`selected` >天津</option>
<option value="南京">南京</option>
</select>
</form>
textarea 元素定义多行输入字段（文本域）:可以设置文本框宽高
<form>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</form>
HTML5 表单元素
HTML5 增加了如下表单元素：
<datalist><keygen><output>
**注释：**默认地，浏览器不会显示未知元素。新元素不会破坏您的页面
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
元素的 list 属性必须引用 元素的 id 属性。
<form>
<input type="text" list="aoao">
<datalist id="aoao">
<option value="邱晨"></option>
<option value="邱晨是谁"></option>
<option value="奇葩说 邱晨"></option>
</datalist>
<input type="submit" value="搜索">
</form>
11.4 HTML5 图像
| 标签 | 描述 |
|---|---|
<canvas> | 定义使用 JavaScript 的图像绘制。 |
<svg> | 定义使用 SVG 的图像绘制。 |
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
11.5 使用 HTML5 <audio><video>元素
controls 属性规定浏览器应该为音频提供播放控件。浏览器控件应该包括：
- 播放
- 暂停
- 定位
- 音量
- 全屏切换
- 字幕（如果可用）
- 音轨（如果可用）
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>
元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
// let和 var的区别`
// let 是块作用域.var是函数作用域
// 函数内都是一样的,但是在块作用域(代码块（即{}）中)；,比如 函数中一个for循环定义let i=0; let 出了for循环就不可用,var是在函数内都可用
// var可以重新声明3变量
// js中append,appendChild及innerHTML的认识
append用法：
可以同时传入多个节点或字符串，没有返回值。
appendchild用法：
只能传一个节点，且不直接支持传字符串。
innerHTML用法：
添加纯字符串，不能获取内部元素的属性。
// innerHTML和innerText区别
(尽量多用innerHtml)
innerHTML指的是==从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是**从起始位置到终止位置的内容,但它去除Html标签==**。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。
<html>
<head><title>innerHTML</title></head>
<body>
<div id="d1"><p id="p1">hello world </p></div>
<script>
var content = document.getElementById("d1");
alert(content.innerHTML);
alert(content.innerText)
</script>
</body>
</html>
通过IE浏览器打开，弹出内容为 <p id="p1">hello world </p> 和 hello world
通过 Firefox 浏览器打开，弹出内容为 <p id="p1">hello world </p> 和 undefined
通过 chrome 浏览器打开，弹出内容为 <p id="p1">hello world </p> 和 hello world
12 HTML的DOM节点操作
- 节点内容
<body>
<div id="hh">
<p id="divp">nih</p>
</div>
</body>
<script>
var div = document.getElementById("hh");
console.log(div.innerHTML); // <p id="divp">nih</p>
console.log(div.innerText); // nih
-
创建.添加节点
var div = document.getElementById(‘hh’)
var h1 = document.createElement(“h1”)
h1.innerHTML = “pizza”
div.append(h1) -
删除节点
-
替换节点
var btn = document.createElement("button") btn.innerHTML = "hambuger" div.replaceChild(btn, h1) -
复制节点
var h2 = document.createElement("h1")
h2 = h1.cloneNode(true)
div.appendChild(h2)
</script>
2.css
// 1.双飞翼和圣杯布局:
实现左右宽度不变,中间宽度自适应
圣杯布局
个人理解:中间的宽度100%,是自适应.left,right宽度固定(width: 200px).给最外container一个内边距,构成左边距,右边距固定(padding:0 300px 0 200px); 这是已经可以实现中间块随着屏幕自适应,两边空白宽度固定.
现在我要的是特定模块固定不变,而不是空白处.所以,通过float,margin-left让left,right模块移到左右空白处
双飞翼布局
与圣杯布局差别不大，效果相同
<div class="container">
<div class="main">
<div class="inner">
inner
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
.container {
/* padding: 0 300px 0 200px; */
}
.main,.left,.right{
min-height: 130px;
float: left;
}
.main{
background-color: blue;
width: 100%;
}
.left{
background-color: aqua;
width: 200px;
margin-left: -100%;
}
.right{
background-color: aquamarine;
width: 300px;
margin-left: -300px;
}
.inner{
margin: 0 300px 0 200px;
}
中间不是main ,是inner.width:100%,是全屏幕宽度,left和right还是通过margin-left值覆盖在main的两端.
inner宽度未定,可以靠margin来帮它留出左右的宽度,与圣杯 .container {
padding: 0 300px 0 200px;
}
作用相同
也不需要相对定位了
1.css背景
- 关键字
位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center。
- 背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
2,css3新特性
一、css3的新选择器
-
E:nth-child(n)选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式 -
E:nth-of-type(n)选择与之其匹配的父元素的第N个子元素 -
E:frist-child相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应 -
E:frist-of-type相对于父级做参考，“特定类型”（E）的第一个子元素 -
E:empty选择没有子元素的每个E元素 -
E:target选择当前活动的E元素 -
::selection选择被用户选取的元素部分 -
属性选择器
E[abc*="def"]选择adc属性值中包含子串"def"的所有元素
二、文本
text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)text-wrap：规定文本换行的规则word-break规定非中日韩文本的换行规则word-wrap：对长的不可分割的单词进行分割并换行到下一行white-space：规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行
三、边框
border-raduis边框的圆角border-image边框图片
//浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | 谷歌 | ||||
|---|---|---|---|---|---|
| border-image | 16.0 4.0 -webkit- | 11.0 | 15.0 3.5 -moz- | 6.0 3.1 -webkit- | 15.0 11.0 -o- |
.border-image {
border-image-source:url(images/border.png);
boder-image-slice:27;
border-image-width:10px;
border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边
}
box-shadow 盒子阴影 :10px 10px 5px #ffffff
水平阴影位置 垂直阴影位置 模糊度
四、背景
rgbabackgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片
五、渐变
linear-gradient
background-image:linear-gradient(90deg,yellow 20%,green 80%)
radial-gradient
background-iamge:radial-gradient(120px at center center,yellow,green)
六、多列布局
column-countcolumn-widthcolumn-gapcolumn-rule
七、过渡
transitiontransition-property:width//property为定义过渡的css属性列表，列表以逗号分隔transition-duration:2s;//过渡持续的时间transition-timing-function:ease;transition-delay:5s//过渡延迟5s进行
八、动画、旋转
animationtransform ：translate（x,y) rotate(deg) scale(x,y)translatescalerotateskew（倾斜）
九、flex布局
十、@media媒体查询
//px和 em区别
在 Firefox, Chrome, and Safari 中，可以重新调整以上例子的文本大小，但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
3.css链接
链接的特殊性在于能够根据它们所处的状态来设置它们的样式
链接的四种状态:
-
a:link - 普通的.未被访问的链接
-
a:visited -用户已访问的链接
-
a:hover - 鼠标指针位于链接的上方
-
a:active -链接被点击的时刻
当为链接的不同状态设置样式时，请按照以下次序规则：
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
4.css表格
- border-collapse: 设置表格的边框是否被合并为一个单一的边框
table, th, td
{
border: 1px solid blue;
}
上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性
table
{
border-collapse:collapse;
}
表格文本对齐
-
text-aligin : 设置水平对齐方式，比如左对齐、右对齐或者居中：
-
vertical-align : 设置垂直对齐方式，比如顶部对齐、底部对齐或居中对齐：
5.css框模型
- padding(没有负值)
内边距的百分比数值
前面提到过，可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。所以，如果父元素的 width 改变，它们也会改变。
padding:10px 5px 15px 20px;
- 上内边距是 10px
- 右内边距是 5px
- 下内边距是 15px
- 左内边距是 20px
padding:10px 5px 15px;
- 上内边距是 10px
- 右内边距和左内边距是 5px
- 下内边距是 15px
padding:10px 5px;
- 上内边距和下内边距是 10px
- 右内边距和左内边距是 5px
| % | 规定基于父元素的宽度的百分比的内边距。 |
|---|---|
| inherit | 规定应该从父元素继承内边距。 |
- border
- margin
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值
-
外边距合并
外边距合并是指当两个垂直外边距相遇时,它们将形成一个外边距.
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图
合并后并没有改变单个元素的margin值,而是显示效果改变.比如合并前是margin:10px,合并后依旧没变,但是显示元素位置会跟着大的走
**注释：**只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
6.css定位
- 一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。
但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待：
<div>
some text
<p>Some more text.</p>
</div>
在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式，因为没有可以应用样式的地方（注意，行框和行内框是两个概念）。但是，这有助于理解在屏幕上看到的所有东西都形成某种框。
-
CSS 定位机制
css三种基本定位机制: 普通流、浮动 和绝对定位
块级框从上到下一个接一个排列,框之间的垂直距离是由框的垂直外边距计算出来.
行内框在一行中水平布置.可以使用水平内边距,边框和外边距调整它们的间距.
-
css position属性
- static : 默认.块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中
- relative :相对位移. 元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占空间被保留.相对于正常位置定位
- absolute :元素框从文档流完全删除,并相对其包含块定位.元素原先是在正常文档流中所占的空间会关闭,就好像元素不存在.元素定位后生成一个块级框,而无论原来它在正常流中生成何种类型的框.相对于其第一个父元素定位
- fixed : 元素框的表现类似于absolute,不过其包含块是视窗本身 生成绝对定位元素,相对于浏览器窗口定额外
-
z-index
- 默认定位流会盖住标准流,后编写的定位流会盖住前面编写的,初始值是0,越大越居上,无单位
- 只有相对定位,绝对定位,固定定位有此属性.标准流,浮动,静态定位没有
- 和浮动一样,元素加了绝对定位和固定定位后,都会转为行内块模式
-
css浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止
由于浮动框不在文档的普通流中,浮动元素浮动后就脱离了普通文档流，相邻的非浮动元素就会忽略浮动元素本来应该占有的那部分空间。
- 浮动元素的脱标:脱离了标准文档流, 不在页面占位置.标签一旦设置浮动,就能并排,且无论行内块级都可设宽高
- 浮动元素排序规则:先浮动前,后浮动后.左找左浮动,右找右浮动.浮动是由在之前标准流的位置确定.浮动+非浮动,浮动一行,非浮正常;非浮+浮动非浮动正常,浮动另起一行;非浮动+非浮动,每个另起一行
//浮动和绝对定位的区别
绝对定位后,会将自己从原来的的文档流中彻底删除,相对于其包含块定位,之后的移动不影响文档流的布局
浮动也是将自己从文档流中删除,左右浮动,但是还是会行框文字的时候会影响普通文档流的布局
//(行框围绕浮动框) 为什么元素浮动后,文字是环绕于浮动元素周围,而不是重合
浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
解决:
要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：
//伪类和伪元素
CSS 伪类用于向某些选择器添加特殊的效果。(用于选择DOM树上元素的不同状态(:link :visited ),或DOM上无法用简单选择器选择的元素(:fisrt-child))
语法
伪类的语法： (伪类↓)
selector : pseudo-class {property: value}
例: a:link{color:#ffff}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
| :active | 正被激活的元素~ | :target | 当前的锚点元素@ |
|---|---|---|---|
| :hover | 被鼠标悬浮着元素~ | :first-of-type | 是其父元素的第一个某类型子元素的元素# |
| :link | 未被访问的元素~ | :only-of-type | 是其父元素的唯一一个某类型子元素我的元素# |
| :visited | 已被访问的元素~ | :nth-last-child(n) | 是其父元素的倒数第n个子元素的元素# |
| :first-child | (左边)是其父元素的第一个子元素! | :nth-of-type(n) | 选择满足是其父元素的第n个某类型子元素的元素 # |
| :focus | 拥有键盘输入焦点的元素! | :nth-child(n) | 选择满足是其父元素的第n个子元素的元素 # |
| :disable | 每个已禁止的元素@ | :empty | 选择满足没有子元素的元素 # |
| :checked | 每个被选中的元素@ | :last-of-type | 是其父元素的最后一个某类型子元素的元素# |
注:
- **:first-child **
例: p:first-child{ color:red} ------------作为某元素第一个子元素的所有p元素设置为红色(满足,必须是p标签,必须要为某个父元素的第一个子元素)从body作为父元素开始
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
p:first-child{
color: yellow;
}
li:first-child{
background: #ccc;
}
span:first-child{
color: red;
}
</style>
</head>
<body>
<div>
<h3> <em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>
例子中没有符合条件的p标签。
<li>Learn the front knowledge.</li>
它就是说把作为某个元素第一个子元素是span的元素颜色变为红色。从上面的例子来看，span有两次出现。第一次是作为h3的第二个子元素，所以不满足要求。再来看看第二个span，它是作为li的第一个子元素，满足了两个条件，所以肯定会变成红色。
-
:first-of-type
例 p:first-of-type 匹配某个父元素下使用同种类型§的第一个子元素
选择的 p 元素是其父元素的第一个 p 元素：
先找出所有p,再找第一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
p:first-child{
background: #ccc;
}
p:first-of-type{
color: red;
}
</style>
</head>
<body>
<div>
<h3><em>My</em> <span>goal</span></h3>
<p>Next stage</p>
<ol>
<li>Learn the front knowledge.</li>
<li>Find a satisfactory internship.</li>
<li>Find a <span>good job</span> when graduating.</li>
</ol>
<p>Come on!</p>
</div>
</body>
</html>
p:first-child没有符合的
p:first-of-type
Next stage
不同父元素,满足条件 都命中
<span>span1</span>
<p>
<span>span2</span>
<span>span3</span>
</p>
<span>span4</span>
</div>```
span1 2都命中
CSS 伪元素用于向某些选择器设置特殊效果。** 将特殊的效果添加到某些选择器(DOM树上看不到的元素,和元素相关的内容)
| ::first-letter | 向文本的第一个字母添加特殊样式。 |
|---|---|
| ::first-line | 向文本的首行添加特殊样式。 |
| ::after | 在元素之后添加内容。 |
| ::selection | 选择指定元素中被用户选中的内容 3 |
| ::before | 在元素之前添加内容。 |
2.css
Q1: margin:auto;是如何工作的
margin:auto; 对于块级元素的水平居中是经常使用的。它的原理是利用外边距占据可用空间 ，auto是给一个元素的左外边距和右外边距赋予同样的auto值，这个元素的左右外边距会平分可用空间（父元素除去子元素内容的可用空间），因此可以看出水平居中。
<div class="father">
<div class="son"></div>
</div>
<style>
.father{
width: 200px;
height: 200px;
background: pink;
}
.son {
width: 100px;
height: 100px;
background: gray;
margin: auto;
}
</style>
分析：父元素width200px，除去子元素100px，可用空间100px，给左右外边距平分，各50px。
注意：因为auto的左、右外边距平分父元素宽度，如果仅给左、右外边距其中一个赋值为auto将会出现什么情况呢？左外边距或者右外边距将占据所有的可用空间，看起来元素好像向右或向左浮动了。
.father{
width: 200px;
height: 200px;
background: pink;
}
.son {
width: 100px;
height: 100px;
background: gray;
margin:0px 0px 0px auto;
}
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
左外边距一个人充满了可用空间，视觉上是向右浮动了。
Q2:top, right, bottom, left设置为0有什么用？它和width:100%和height:100%有什么区别？
贴答案：链接：http://t.csdn.cn/J583D
1.让明确宽高的盒子垂直水平居中
<div class="parent">
<div class="child"></div>
</div>
.parent {
width: 200px;
height: 200px;
background: #ffb6b9;
position: relative;
}
.child {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #8ac6d1;
margin: auto; //这实现水平居中
}
但设置子容器宽高为100%表示继承父容器宽高，即父容器不管多大子容器始终为父容器的百分百。
而设置top:0，left:0，right:0，bottom:0本质目的，是让子盒子四边与父容器间距为0，而子盒子没有明确宽高，自然被拉伸到完全填满父容器了。这也是为何上文中对于让盒子垂直水平居中时必须要有明确宽高的原因。 没看懂
Q3: 如何实现css的水平垂直居中
2.1 利用margin：auto
#container{
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
#div1{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
margin: auto;
background-color: #69f;
}
2.2 利用position: absolute
绝对定位，子绝父相，子left top ：width：50% （这是父容器宽度的一半），这时是一个点水平垂直居中，而子容器有宽度，so 要减去自己宽高的的一半（利用外边距）
#container{
position: relative;
width: 400px;
height: 300px;
background-color: #ABC;
}
#center{
position: absolute;
width: 120px;
height: 120px;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
background-color: #ACC;
}
2.3 使用弹性布局
Q4: 子元素宽度设置50%无法并排显示的问题
想让ul中的li并排显示，并平分宽度，已经清除了内外边距，任然不行。
而使用width：49% 可以，这是因为 HTML的标签之间是会存在间距的。 对于这个间距而言，就涉及到了HTML的另一个知识点：空白折叠现象。
问：何谓空白折叠现象？
答：HTML 代码中所有连续的空格、换行和tab（制表符）都会被算作一个空格显示在页面上。
问：那么，如何去掉html标签之间的间距的？
答：标签产生间距的解决方案: 元素写成一行；当代码较多时，比如说ul>li的布局，代码可读性和可维护性较差
//原始
<div class="father">
<div class="son son1">我是div1</div>//此处的换行，在页面上显示时就是一个空格。
<div class="son son2">我是div2</div>//因为有默认的字体大小，所以div之间会存在间距
</div>
//改变后：
<div class="father">
//当我们想让它们在同一行连续显示时，就让所有的代码之间没有空格，也不要换行。
<div class="son son1">我是div1</div><div class="son son2">我是div2</div>
</div>
或者：
给父元素设置font-size:0。【推荐使用】方便快捷
原理：多出来的其实是换行符，所以将字体设置为0，那么换行符就是0px不会显示了。但是如果将HTML标签写成一行的话，就没有换行符了。
注意：因为子元素会继承父元素的字体大小，所以此处需要给子元素单独设置font-size属性，否则文字显示不出来。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
