分类块级元素

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

html

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<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>
</div> 

</body>
</html>

分类行内元素

HTML <span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

html

<!DOCTYPE html>
<html>
<head>
<style>
  span.red {color:red;}
</style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>

css 类选择器

id 属性指定 HTML 元素的唯一 ID。 id 属性的值在 HTML 文档中必须是唯一的。

id 属性用于指向样式表中的特定样式声明。JavaScript 也可使用它来访问和操作拥有特定 ID 的元素。

html

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

**注释：**id 名称对大小写敏感！

**注释：**id 必须包含至少一个字符，且不能包含空白字符（空格、制表符等）。

区别

html

<style>
/* 设置 id 为 "myHeader" 的元素的样式 */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

/* 设置 class 为 "city" 的所有元素的样式 */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
/* 设置 span class为 "red" 的所有元素的样式 */
  span.red {color:red;}

/* 设置指定标签的元素的样式 */  
    header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
</style>
<!-- 拥有唯一 id 的元素 -->
<h1 id="myHeader">My Cities</h1>

<!-- 拥有相同类名的多个元素 -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

HTML中id与name的区别

id

id 属性用于为 HTML 元素指定唯一的 id
id 属性的值在 HTML 文档中必须是唯一的
CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
id 属性的值区分大小写
id 属性还可用于创建 HTML 书签
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素

name

我们先来了解一下name属性在表单中的定义：

name 属性规定 input 元素的名称。

name 属性用于对提交到服务器后的表单数据进行标识

或者在客户端通过 JavaScript 引用表单数据。

注释：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

HTML中的name属性的有哪些作用？默认的name属性又是什么？

HTML 文件路径

路径	描述
`<img src="picture.jpg">`	picture.jpg 位于与当前网页相同的文件夹
`<img src="images/picture.jpg">`	picture.jpg 位于当前文件夹的 images 文件夹中
`<img src="/images/picture.jpg">`	picture.jpg 当前站点根目录的 images 文件夹中
`<img src="../picture.jpg">`	picture.jpg 位于当前文件夹的上一级文件夹中

相对路径

相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：

./ ：代表文件所在的目录（可以省略不写）

../ ：代表文件所在的父级目录

../../ ：代表文件所在的父级目录的父级目录

/ ：代表文件所在的根目录

值得注意的是，（/ ：代表文件所在的根目录）其实可以理解成项目内部的绝对路径

多个div并排分布

解释

css

float: left;

div元素居中

css

margin: 0 auto;
必须指定div的大小

margin

margin 属性为给定元素设置所有四个（上下左右）方向的外边距属性。也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

padding

padding CSS 简写属性控制元素所有四条边的内边距区域。

圆角

css

border-radius: 25px;

一、position 的四个值

static、relative、absolute、fixed。

绝对定位：absolute 和 fixed 统称为绝对定位，fixed是位于屏幕整个页面的指定位置脱离文档流，不占用空间

相对定位：relative 仍会占用空间

默认值：static

static:

是position属性的默认值，表⽰⽆论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发
⽣改变。
相对定位

relative：

表⽰⽤top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置。
绝对定位

absolute：

表⽰⽤top、bottom、right、left属性可以设置元素相对于其⽗元素（除了设置了static的⽗元素以外）左上
⾓的位置，如果⽗元素设置了static，⼦元素会继续追溯到祖辈元素⼀直到body。
绝对定位

fixed：

相对于浏览器窗⼝进⾏定位，同样是使⽤top、bottom、right、left。
四种取值中，除了static之外，其他属性都可通过z-index进⾏层次分级

div css 模板

css

background-color: #fff;
width: 363px;
height: 79px;
position: relative;
top: 19px;
left: 12px;

javascript

html

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

a标签去掉下划线

css

text-decoration:none;

HTML中6种空白空格的区别

` `	这是我们使用最多的空格，也就是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加。为了便于记忆，我总是把这个空格成为“牛逼(nb)空格(sp – space)”，虽然实际上并不牛逼。该空格占据宽度受字体影响明显而强烈。在inline-block布局中会搞些小破坏，在两端对齐布局中又是不可少的元素。是个让人又爱又恨的小东东。
`&ensp;`	该空格学名不详。为了便于记忆，我们不妨就叫它“恶念(e n-ian)空格”。此空格传承空格家族一贯的特性：透明滴！此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
`&emsp;`	该空格学名不详。为了便于记忆，我们不妨就叫它”恶魔(e m-o)空格”。此空格也传承空格家族一贯的特性：透明滴！此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
` `	该空格学名不详。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。我目前是没用过这个东西，这里亮出来是让其过一下群众演员的瘾。

css

!important提升优先级（或看成强制重定义
p {
  background-color: red !important;
}

flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 flexbox 的主要特性，更多的细节将在别的文档中探索。

CSS 的 `flex-wrap` 属性指定 flex 元素单行显示还是多行显示

在div里面，设置div里面的元素是否多行显示

虚线

html

*<hr style="border:1px dashed #000; height:1px">*

作用是将块级元素转化为内联元素或者是内联元素转化为块级元素

css

display: inline-block;

设置背景为图片和大小，并设置没图片的地方的颜色

css

span.one {
    background: #1ba2c7 url(./images/1.png) no-repeat;
    background-size: 80px 42px;
}

文字垂直居中

元素内单行文本垂直居中：line-height=height

文字加粗

css

font-weight: bold;

display

inline-block行內區塊

．以inline的方式呈現，但同時擁有block的屬性．可設定元素的寬高/margin/padding ．可水平排列

列如 span 设置为行内元素后可以设置大小，还可以使用text-align：center

a标签设置为block可以设置背景

Inline行內元素

．元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置．不可設定長寬，元素的寬高由它的內容撐開 另外，常聽到行內元素不能設定上下margin/padding，但並非不能設定，是排版不會隨著設定改變，字仍在行內，其他行並不會被推開。

隐藏

display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

none

隐藏元素

visibility

CSS属性 visibility 显示或隐藏元素而不更改文档的布局

visible

元素正常显示。

hidden

隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。

collapse

用于 `` 行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是，仍会计算其他行和列的大小，就好像折叠的行或列中的单元格一样。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
折叠的弹性项目被隐藏，他们将占用的空间被删除。

padding不能设置为auto，margin 可以设置，因为margin是外边框

顺序先上下再左右，上右下左

内填充的值不能为负值，外边距可以

background-position 是先左右再上下

列表

有序标签

在使用 <ol> 时，它一般和 <li> 配合使用，不会单独出现。而且不建议在 <ol> 中直接使用除 <li> 之外的其他标签

无序标签

在使用 <ul> 时，它一般和 <li> 配合使用，不会单独出现。而且不建议在 <ul> 中直接使用除 <li> 之外的其他标签

定义列表

在 HTML 中，<dl> 标签用于创建定义列表。它是由定义标题和定义描述两部分组成的

html

<dl>
      <dt>定义标题<dt>
      <dd>定义描述<dd>
      <dd>定义描述<dd>
      <dd>定义描述<dd>
</dl>

定义列表

设置列表编号为图片

css

li {
     list-style: none;
     background: #613E72 url(./images/icon.png) no-repeat left center;
        }

border

border-bottom: solid; //实心线
border-bottom: dashed; //虚线
border-bottom: double; //双线

li标签图标

链接伪类

注意顺序

clear是清除浮动对自己的影响，用于浮动周围的元素，clear只对块元素发挥作用

overflow是清除自己子元素浮动对自己的影响，用于包含浮动元素的影响

浮动和div顺序有关

字体样式

font-style

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

`<button>`和`<input type="button">`的区别

<button>标签定义了一个按钮。在button元素内部可以放置内容，例如文本或图像。
input type="button">`标签定义了一个按钮，如果不写js的话，按下去什么也不会发生。
<input type="submit">标签定义了一个按钮，用户点击后会自动提交表单，除非写js阻止事件发生。
button在ie中的默认类型时button，而在其他浏览器中（包括w3c规范）的默认值是submit。
- type = button就是单纯的按钮功能
- type = submit就是发送表单
- 使用submit后，页面支持enter键操作，用button后往往页面不支持enter键，默认enter键对第一个submit进行操作
<input type="button">并不是一个画面元素，而是一个表单元素，和文本输入一样，都属于“数据”的一部分（特征是：有value属性，而且该属性的值会被送到server端，可以拿来用）。只有表单数据有这个特性，<button>无法把自己当成Form的数据。
<button>放在form中会自动提交表单，但是他的缺点是不同浏览器提交的value会不一样。

文字居中

语法

text-align 属性指定为从以下值列表中选择的单个关键字。

Values

start Experimental
如果内容方向是左至右，则等于left，反之则为right。
end Experimental
如果内容方向是左至右，则等于right，反之则为left。
left
行内内容向左侧边对齐。
right
行内内容向右侧边对齐。
center
行内内容居中。
<string> Experimental
第一个出现的该（单字符）字符串被用来对齐。跟随的关键字定义对齐的方向。例如，可用于让数字值根据小数点对齐。
justify
文字向两侧对齐，对最后一行无效。
justify-all
和 justify 一致，但是强制使最后一行两端对齐。
match-parent Experimental
和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right。

CSS截取图片取图片一部分

css文字适应背景颜色

css

mix-blend-mode: difference;

分类块级元素 ​

分类行内元素 ​

css 类选择器 ​

区别 ​

id ​

name ​

HTML 文件路径 ​

div元素居中 ​

圆角 ​

一、position 的四个值 ​

div css 模板 ​

javascript ​

a标签去掉下划线 ​

flex 布局的基本概念 ​

CSS 的 flex-wrap 属性指定 flex 元素单行显示还是多行显示 ​

虚线 ​

作用是将块级元素转化为内联元素或者是内联元素转化为块级元素 ​

设置背景为图片和大小，并设置没图片的地方的颜色 ​

文字垂直居中 ​

文字加粗 ​

display ​

inline-block行內區塊 ​

Inline行內元素 ​

隐藏 ​

none ​

visibility ​

padding不能设置为auto，margin 可以设置，因为margin是外边框 ​

列表 ​

有序标签 ​

无序标签 ​

定义列表 ​

设置列表编号为图片 ​

链接伪类 ​

字体样式 ​

<button>和<input type="button">的区别 ​

文字居中 ​

css文字适应背景颜色 ​

分类块级元素

分类行内元素

css 类选择器

区别

id

name

HTML 文件路径

div元素居中

圆角

一、position 的四个值

div css 模板

javascript

a标签去掉下划线

flex 布局的基本概念

CSS 的 `flex-wrap` 属性指定 flex 元素单行显示还是多行显示

虚线

作用是将块级元素转化为内联元素或者是内联元素转化为块级元素

设置背景为图片和大小，并设置没图片的地方的颜色

文字垂直居中

文字加粗

display

inline-block行內區塊

Inline行內元素

隐藏

none

visibility

padding不能设置为auto，margin 可以设置，因为margin是外边框

列表

有序标签

无序标签

定义列表

设置列表编号为图片

链接伪类

字体样式

`<button>`和`<input type="button">`的区别

文字居中

css文字适应背景颜色