?

一.HTML代码结构剖析

 	
 	
    
     	
        
        
        
        
        
        
        
        
    	
        
    

     	
		...省略代码
    
    

1.文档声明

• 不能省略
• 放在最前面

2.html元素

  
      ...省略代码
  

• 根元素 ->它只存在一个
• lang属性 （language） 给语音合成工具/翻译工具提供帮助：我的HTML文件是什么语言

3.head元素

• meta元素（元数据）：用来描述数据的数据
  • charset：字符编码
  • viewport：暂时不用了解，是适配移动设备的
• head是对网页进行一些基本操作
• title 网站标题
• link
  • rel = stylesheet 可以用来引入css文件
  • rel = icon 改变网页的图标
  • href是超链接
• style 用来写css文件
• base元素：和a元素同步使用
• script元素

4.body元素

    ...省略代码

• body元素就是网页的具体结构和内容

二.HTML基本元素

1.h元素

这是h1
这是h2
这是h3
这是h4
这是h5
这是h6

• h有h1到h6，依次从大到小
• h元素有利于SEO（Search Engine Optimization）的优化
  • 也就是百度在数据库中对你的网页优先性考虑，在正则中，h标签的权重较重，所以爬虫时会优先考虑一个网页里面一个就可以了（所以h标签不是完全没有用的）

2.p元素

 
原标题：必须抵制挑衅现代文明的行径

• 是paragraph的简写
• p元素内部不能写div元素！

3.strong、code、br、hr元素

这是strong元素
这是code元素

• 四个元素都不常用
• strong 双标签：只是个加粗字体而已
  • 使用font-
• code 双标签：它只是给你设置了一个样式： font-family: monospace (等宽字体)
  • 我们会用span元素会精准控制一段东西
• br 单标签：换行符 br是break的意思
  • 如果要换行，那么我们用div元素进行包裹即可换行，但是不要在p元素内写div元素。
• hr 单标签：分割符
  • 可以用div元素来充当分隔符。注意div的高度是line-height来决定的()。

4.span元素

这是span元素

• 用于区分特殊文本和普通文本，结合css使用
• 用class对其进行精准控制

5.div元素

这是div元素

• 一般作为其它容器的父容器，用于把网页分割成多个部分

6.img元素

• 单标签
• src属性
  • 绝对路径和相对路径
    • 绝对路径
    • 相对路径：
      • ../是上一层路径
      • ./是这一层路径（也就是同一层路径）（这个可以省略）
• alt属性：当图片失效时加载的文本
• src属性和alt属性是img元素必须的属性，缺一不可

7.a元素

这是超链接

7.1.a元素的基本使用

• 双标签
• 定义超链接，打开新的url
• target属性： 在哪里打开页面
  • _self(默认值)：自己
  • _blank:在空白页打开
  • 和iframe使用时才有效果的属性：（现在不用）
    • _parent
    • _top
    • 具体的name

7.2.a元素和base元素结合使用

    
    
    
    
    
    


    百度一下
    百度logo
    搜索abc
    淘宝一下

• base相当于缺省文件，在a元素没有的时候进行补充
• 可以加入a元素的很多属性
• 当a元素有自身的属性时，自身的属性优先级大

7.3.锚点链接：跳转到页面的相应位置

• 所有元素都有title,id,class 三个元素
• id通过 # + name 索引
• class通过 . + name 索引
• a元素的href属性不能省略 否则就不是a属性了
• 当href属性只有一个‘#‘时，链接会跳到页面的顶部

7.4.伪链接：不希望打开新的URL，而是希望干点别的事情

• 伪链接没有指定指定具体地址

• 用a元素代替button（也就是把链接当按钮使用）

• 和img元素结合

  a元素一定是跳转链接吗？不一定，可以通过超链接下载，发送邮件等

8.字符实体

  一个空格
< > (< left than, > great than)
& (表示&符号)
"(表示双引号)

三.URL： Uniform Resource Locator(统一资源定位符)

• 资源的地址（位置） 互联网上的每个资源都有唯一的URL
• URL的格式： protocol://hostname/path = 协议://主机地址/路径
• 常见的协议：
  • http https 超文本传输协议 https://
  • file 本地资源（不需要主机地址）file://
  • mailto 访问的是电子邮件地址 mailto:
  • ftp 访问的是共享主机的文件资源 ftp://
  • ed2k thunder 等
• URL的完整语法格式是：protocol://hostname[:post]/path/[;parameters] [?query]#fragment
  • port表示端口 从0 - 65535 默认 80，端口号是用来区分服务的
  • ?表示query（查询）请求参数，提交给服务器数据
  • fragment（片段）也就是锚点

四.CSS基本学习

• 什么是css？
  • 给网页的每一个元素设置样式
• css的全称是 Cascading Style Sheets 层叠样式表
• 目前不存在真正意义上的CSS3，是对CSS2.x后对某一些CSS模块进行升级更新后的称呼
• 常见的css属性...（过于多）属性名都是小写
• CSS出来的时候不是就是标准了，而是从草稿->备选->推荐。只有推荐了才是标准
• 属性名：属性值 如 color: red;

1.如何将CSS样式应用在元素上？

1. 内联样式(inline style)
2. 文档样式表(document style sheet)、内嵌样式表(embed style sheet)
3. 外部样式表(external style sheet)
   • 外部样式表引入的两种方法：
     • 使用link：
     • 使用style的@import：@import url(./css/style/css);
   • 你可以在一个css样式中使用import url来引入另一个css
4. 关于层叠：后面引入的css会覆盖（层叠）掉前面的css

• 如果外部样式表，指定css编码。在css文档头中加入 @charset "utf-8";

2.选择器（selector）

• 如何对你要的元素进行选择？使用选择器

• 三种主要的选择器：

  1. 元素选择器div
  2. 类选择器 .box
     • 一个元素是可以有多个类的， 多个类用空格进行分割(重点)
     • 类的名字“见名知意“
     • 当用多个单词时，以-进行连接
  3. id选择器#id
     • id选择器 +空格+ class选择器 形成一组后代选择器在对应id和class下进行更改
     • 不要在同一个页面中用多个id，id是用来分块的

• 通用选择器（*）：选择所有的元素（包括body）进行一个初始化

  • 常见的操作：对全部元素去掉margin 和 padding

3.最常用的css属性

1. color（前景色 不只是文字颜色，下划线删除线，边框颜色等等）
2. font-size（文字大小）
3. background-color（背景色）
4. width（宽度）（行内非替换元素是不生效的）
5. height（高度）

五.文本/文字属性

1.文本属性

• text-decoration 装饰线
  • none 无装饰线（去掉a元素的默认装饰线)
  • underline 下划线（u和ins元素就是设置了这个）
  • overline 上划线
  • lint-througth
• letter-spacing/word-spacing 字间距和词间距
• text-transform 用于设置文字的大小写转换
  • capitalize 将每个单词的首字符变成大写 capital是首都的意思
  • uppercase 大写字母
  • lowercase 小写字母
  • none: 无
• text-indent 用于设置第一行内容的缩进
• text-align 用于设置元素内容在元素中的水平对齐方式
  • left
  • right
  • center
  • justify 两端对齐

2.文字属性

• font-size 决定文字的大小

  • 具体数值+单位
  • 也可以使用em单位 1em表示100%，2em表示200%
  • 谷歌浏览器最小是12px，所以设置12px以下的大小，默认都是12px

• font-family 设置网页字体

  • 字体和操作系统有关系。为了防止字体在操作系统中不存在 我们会设置多个字体。
  • 如果都没有，会用默认字体。
  • 把英文字体写前面，中文字体写后面。

• font-weight 用于设置文字的粗细（重量）

  • 一般设置为100 - 900
  • normal = 400
  • bold = 700

• font-style 用于设置常规和斜体

  • normal 常规
  • italic 字体的斜体
    • em、i、cite、address、var、dfn等元素默认是italic
  • oblique 文本倾斜
    • 使用italic的时候 需要font-family支持斜体
    • oblique是让文字倾斜

• font-varient （基本不用）

  • small-caps 把小写字母变成大写字母 但是按小写字母的规格

• line-height 行高

  • 注意区分height和line-height的区别
    • height：元素的整体高度
    • line-height：元素中每一行文字所占据的高度
  • 应用：让这行文字在div内部垂直居中
    • line-height = 文字的高度 + 行距
    • 假设line-height是30px，文字高20px，那么上下行距就是各5px
    • 如果div的height是200px，那么我设置line-height也为200px，那么文字就居中了
    • 这是上下行距对半分的特性

• font 缩写属性

  • 写法：font-style font-variant font-weight font-size/font-height font-family
  • font-style font-variant font-weight 顺序可以调换 也可以不写
  • line-height 可以省略 但是要写的时候/行高不能省略
  • font-size 和 font-family不能省略 缺一不可

六.更多选择器

• 类选择器 .class
• id选择器 #id
• 元素选择器 div p span ...
• 通配选择器 *

更多选择器：

• 属性选择器
  • [att = val] 属性值等于什么的元素
  • [att *= val] 属性值包含什么的
  • [att ^= val] 属性值是什么开头的
  • [att $= val] 属性值是什么结尾的
  • [att |= val] 属性值刚好等于val，或者val开头且后面紧跟连字符- 的，一般用在lang属性
• 后代选择器 descendant combinator
  • div span (div里面的span元素 包括直接和间接元素)
  • div p span （div里面的p里面的span元素 包括直接和间接元素）
• 子选择器 child combinators
  • div > span (div的直接子span元素)
  • .box > .title（类也可以子代）
• 相邻兄弟选择器
  • div+p (div元素后面紧挨着的p)
• 全兄弟选择器
  • div~p (div后面的全部p)
• 交集选择器
  • div.box（div中，class为box的元素（中间没有空格））
• 并集选择器
  • div, .box（div这个元素 和 class为box的元素）

七.伪类和伪元素

1.伪类(pseudo-classes)

1.1动态伪类(dynamic pseudo-classes)

• :link
  • 未访问的状态
  • a:link(a元素的未访问的状态)
• :visited
  • 已经访问的状态
  • a:visited(a元素的已经访问的状态)
• :hover
  • 鼠标悬浮的状态
  • a:hover(a元素的鼠标挪到上面)
  • 它必须放在link 和 visited之后才有效(在有link和visited的情况下)
• :active
  • 鼠标按住不送手的状态
  • a:active(a元素的鼠标按住不送手的状态)
  • 它必须放在hover后面才有效(在有hover的情况下)
• :focus
  • 获取焦点时的状态

编写顺序建议： Link Visited Focus Hover Active

• 去掉a元素的焦点状态（用tab换的时候）
  • 假装去掉:用focus状态，里面outline:none; 这样只是没有框线，但是还是选中了的
  • a元素中的属性tabindex="-1"，tab选择元素的顺序， 如果是-1 那么不可能被选中了
• 如果直接给a元素设置样式，那么相当于对a的所有动态伪类都设置了样式

1.2结构伪类（structural pseudo-classes)

1.2.1 :nth-child 与 :nth-last-child

:nth-child (数字)

• nth就是第n个 n-th
• 这个意思是选中第几个子类
• 这个(1)就是选中第一个子类
  • 首先它必须是子类，并且必须是第几个子类
• 注意！body元素也有子元素
• p:nth-child(3)
  • 注意！这个意思是p元素是子元素中的第三个(交集选择器)
    • 所以p如果是body的第三个子元素，它也会被选择!
  • 不要理解成p元素中的第三个子元素，这是错的！
    • p :nth-child(3)使用后代选择器（注意有个空格），才能完成这个意思

:nth-child(n)

• n代表的是自然数(0,1,2..)，也就是子元素全部都是

• :nth-child(2n) / :nth-child(even)

  • 所有的偶数

• :nth-child(2n-1) / nth-child(2n+1) / :nth-child(odd)

  • 所有的奇数

• :nth-child(3n+2)

  • 2 5 8 ...的数
  • 当然还有其它等差数列

• :nth-child(-n+3)

  • 取前3个
  • 在排行榜里面可以操作

:nth-last-child 和 :nth-child一样，只不过是从后往前数

1.2.2 :nth-of-type 与 :nth-last-of-type

• 与nth-of-child基本一致
• 这个是找相同类型的第n个元素
  • 也就是计数的时候只计算相同的元素

1.2.3 其余的结构伪类

• :first-child
  • 相当于nth-child(1)
• :last-child
  • 相当于nth-last-child(1)
• :first-of-type
  • 相当于nth-of-type(1)
• :last-of-type
  • 相当于nth-last-of-type(1)
• :only-child
  • 是父亲中唯一的子元素
  • 注意:html元素是文档的唯一子元素
  • 如果直接写这个结构伪类，就会全选所有元素
    • 因为html根元素的儿子会继承html
  • 可以这样写：body :only-child
• :root
  • 根元素。如果直接写就是html元素
• :empty
  • 空元素
  • 这个元素是没有内容的

1.3目标伪类(target pseudo-classes)

• :target

• 让成为锚点（跳转的目标）会让其变成什么

1.4元素状态伪类(UI element states pseudo-classes)

• :enabled
• :disabled
• :checked

1.5否定伪类 与 语言伪类

• :not(x)

  • x是一个简单选择器
  • 包括元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类
  • 就是代表除了什么，都选择
  • 注意，直接选的时候，是包括了body和html的
  • not的意思是：只要不是这个东西，那就都可以
    • 不是html？那body也可以，div也可以，其它都可以
  • 只支持简单选择器，就是只有一个，不要写一些交集和并集

• 语言伪类(language pseudo-classes)(基本不用，省略)

  • :lang()

2.伪元素(pseudo-elements)

• 为了区分伪元素和伪类，伪元素一般用::（两个冒号）

2.1 ::before 与 ::after

• 都是用来对一个元素的内容之前或者之后插入一个内容
• content属性（不能省略）插入的内容
  • content可以是文字
  • content: url()就可以插入图片了
• 伪元素可以看作是行内元素，不能修改宽和高
  • 可以display中更改特性
    • inline-block
    • 但是content不能删，可以没有内容

2.2 ::first-line 与 ::first-letter

• ::first-line 第一行会怎么样
  • 只有字体属性、颜色属性、背景属性（还有一些其它属性）
• ::first-letter 第一个字母会怎么
  • 字体属性，margin属性等等（还有一些其它属性）

八.Emmet语法

1.基础Emmet语法

1.1用 ! 或者 html:5 生成html5代码

1.2 > (子代) 和 + (兄弟)

• 想要写一个 div 嵌套p元素 嵌套 span元素 嵌套strong元素

  • div>p>span>strong

• 写一个h2和div和p并列的

  • h2+div+p

1.3 * (生成多个元素)

1.4 ^ (生成上一个层级的元素)

• 可以用 ^^跳两个层级

1.5 () (分组)

2.属性和内容

2.1 生成元素的属性

• 生成class：div#box
• 生成id：div.header
• 生成普通属性：div[title]
  • 普通属性和值：div[title=“haha”]
  • 这些值都可以连续嵌套（一次性添加多个属性）

2.2 {} (生成元素的内容)

这是我的内容


我是div元素

2.3 $ (生成的结构有数字)

• 属性中有数字

• 内容中有数字

    
文字内容1
    
文字内容2
    
文字内容3
    
文字内容4
    
文字内容5

• 数字要00x，要补几个0就用几个$

3.隐式标签

• .box 或者 #main会直接生成div对应的类或者id
• ul里面会生成li

列表元素1
列表元素2
列表元素3
列表元素4
列表元素5

4.CSS的emmet语法

• w h m p
  • weigth height margin padding
  • 加号表示连续
  • 减号(连续号)表示一个内容多个参数

.box1 {
    /* w200+p200+m20+p30 */
    width: 200px;
    padding: 200px;
    margin: 20px;
    padding: 30px;
}
.box2 {
    /* m20-30-40-50 上右下左*/
     margin: 20px 30px 40px 50px;
    /* p-10-20--30 上 左右 下*/
    padding: -10px 20px -30px;
}

• fz20 font-size: 20px;
• fz1.5 font-size: 1.5em;
• fw font-weight: ;
• dib display: inline-block;

九.CSS特性

1.继承

• 一个元素如果没有设置某属性的值，就会跟随父元素的值
  • 如果有自己设置的值，就使用自己值
• color font-size等属性会被继承
  • 如果这个属性不继承，那么可以强行用这个属性的 inherit 强行继承
• 具体查官方文档 MDN
• 继承的是计算值，不是百分比
  • 如果你是百分之50，你的儿子是继承计算后的值

2.层叠

• 普通层叠：后面的覆盖前面的
  • 前提：选择器相同
• 优先级层叠（自上而下，从大到小）：
  • !important
  • 内联样式
  • id选择器
  • 类选择器、属性选择器、伪类
  • 元素选择器、伪元素
  • 通配符
• 比较优先级的方法
  • 从权重大的开始比较每一种权值的数量多少，数量多的优先级高
  • 如果数量相同，比较下一个权值

十.HTML进阶元素

1.列表

1.1 有序列表 (ol li)

• ol (ordered list) li (list item)
  • ol 的直接子元素 只有 li
• 使用emmet语法快速生成列表 ol>li*5
  • 使用tab键进行切换

1.2 无序列表 (ul li)

• ul(unorder list) li (list item)
  • ul 的直接子元素 只有 li
• 使用emmet语法快速生成列表 ul>li*5
  • 使用tab键进行切换

1.3 定义列表 (dl dt dd)

• dl (definition list)
  • dl的直接子元素只能是dt和dd
    • dt (definition term) 列表中每一项的项目名
    • dd (definition descroption)
  • 一个dt后面跟着1个或者多个dd
  • dt和dd是兄弟元素
• 常见组合：
  • 事物的名称、事物的描述
  • 问题、答案
  • 类别名、归属于这类的各种事务

1.4 列表的属性

这些属性都可以被继承

• list-style-type
  • 设置li前面的样式
    • disc 实心圆
    • circle 空心圆
    • square 实心方块
    • decimal 阿拉伯数字
    • lower/upper-roman 大小写罗马数字
    • none 什么都没有（开发常用）

    
 1 海王
    
 2海贼王
    
 3药王
    
 4上海堡垒
    
 5诛仙

• list-style-image
  • 设置某张图片为li元素前面的标记
  • 会覆盖list-style-type的设置
  • 格式一定是 list-style-image: url()
• list-style-position(不常用)
  • 设置li元素前面标记的位置
  • inside 不算到margin里面
  • outside 算到margin里面
• list-style
  • 缩写属性
    • type image style
    • 一般直接设置为none

2.表格

2.1 table tr td 的基本认识

• tr (table row)行
• td (table define)单元格
• table里面放tr，tr里面放td
  • table的属性（开发不用）
    • border 边框宽度
    • cellpadding 单元格内边距
    • cellspacing 单元格间距
    • width 表格宽度
    • align 水平对齐方式
      • left center right
  • tr的属性
    • valign 单元格的垂直对齐方式
      • top middle bottom baseline
    • align 单元格的水平对齐方式
      • left center right
  • td的属性
    • valign 单元格的垂直对齐方式
      • top middle bottom baseline
    • align 单元格的水平对齐方式
      • left center right
    • weight 单元格的宽度
    • height 单元格的高度
    • rowspan 单元格可以横跨的行数
    • colspan 单元格可以横跨的列数、

2.2 表格中的其它元素

• tbody
  • 表格的主体（和th联合使用）
• caption
  • 表格的标题
• thead
  • 表格的头
• tfoot（很少用）
  • 表格的页脚
• th
  • 表格的表头单元格（和tbody联合使用）

2.3 单元格的合并

• 合并的要领
  • 合并方向是向右、向下
  • 向右是跨列
  • 向下是跨行

2.4 border-spacing

• 用于设置单元格之间的水平、垂直间距
• 设置到table上面
  • 第一个值是水平方向的值
  • 第二个值是垂直方向的值
  • 只写一个就是水平和垂直都是同一个值

2.5关键知识点

2.5.1. 边框的合并

• border-collapse 边框重叠 css属性
  • collapse 合并（合并两个线，不管距离有多远）
  • separate 分割（默认）

2.5.2. css居中表格

• 对整个表格margin: 0px auto;

2.5.3.第一行特殊操作

• 在没有tbody重构的时候
  • table tr:nth-child(1)(注意空格)
  • 或者 table first-child(注意空格)

3.表单

3.1 form

• 一般情况下，其它表单相关元素都是它的后代元素
• action
  • 用于提交表单数据请求的URL
• method
  • post请求和get请求(默认是get)
• target
  • 同a元素的target
• enctype
  • encode编码 type类型
  • 对数据进行编码
  • multipart/form-data 文件上传必须是这个值
    • 文件上传必须是post的method
• accept-charset
  • 规定了提交时候的字符（一般不用设置）
  • 不设置会使用文档默认的字符格式

3.2 input

• 是行内替换元素（把某个你的代码替换成一个东西，这里是输入框）并且是行内的
• type (input的类型)
  • text 文本输入框（明文）
  • password 密码输入框（密文）
  • radio 单选框
  • checkbox 复选框
  • button 按钮
    • 单标签显示文本： value属性
  • reset 重置
    • 重置是重置表单内的所有内容（没填之前的内容）
    • value属性可以不写，默认是“重置”
    • 所有的内容必须在同一个表单（form）中才能进行重置
    • reset必须也在form内部
  • submit 提交表单数据给服务器
  • file 文件上传
• maxlength (最大输入上限)
• placeholder (占位文字-提示你输入啥的)
• readonly 只读（不可修改）
• disabled 禁用
• checked 默认被选中
• autofoucs 页面加载时自动获取焦点
• name 名字
• value 取值
• form 表单

3.3 fieldset 和 legend

• fieldset 是表单元素组（包在外面的）
• legend 是fieldset的标题

3.4 select 和 option

• select 是选择器
• option是select内部的选项
• multiple
  • 让select可以多选
• selected
  • 默认选中（和input区分）
• size
  • 显示多少项

3.5 textarea

• 多行的文本输入框
  • cols 默认多少列
  • rows 默认多少行

3.6 input和label的关系

 

     手机：
     
 
	

• 点击input text前的文字，可以让焦点聚焦文本框
• 用label实现
  • for属性：填写text的id

4.按钮的实现方式

4.1普通按钮的实现

button的默认type是submit（提交）

• input实现 （这是个替换元素）
  • 将type选为button
  • value 更改名字
• button
  • 将type选为button

4.2重置按钮的实现

• input实现
  • 将type选为reset
• button
  • 将type选为reset

4.3提交按钮的实现

• 注意！表单提交需要form外面包裹
  • form的action是你要提交给哪个服务器
• 表单提交，提交的元素必须要有name属性
  • 协议头://主机地址/路径?query的时候会提交一个key=value格式的内容
    • key就是name ，value就是你输入的（比如文本框）

4.4 input 和 label

 

     手机：
     
 

• 在lable中点击文字，可以将焦点指向对应的input
  • 将for中写上input的id即可

其它问题

1.布尔属性

• 没有属性值，写上这个属性名就代表了使用这个属性

2.去除input的tab键的选中效果

• 不想用tab键切换到上面出现样式，就把对应的表单tabindex=-1

3.textarea不让其进行缩放

• resize:none

4.表单的提交

• 传统的表单提交
  • 将所有的input包裹到一个form中
  • input必须要有name，name就是query的key
    • 同样的name值（如radio，checked，select里面的option）那么需要用value值进行区分
    • 如果默认的话，那么value值会是on（选中）
  • form设置action(你要提交到的服务器地址)
  • input/button的类型是submit
  • 点击submit，自动将form中表单的所有数据提交到服务器
  • 弊端一：会进行页面的跳转
    • 意味着服务器必须将一个页面写好
      • 这个是服务端渲染
    • 并且将写好的页面返回前端，然后前端直接展示这个页面
  • 弊端二：不方便进行表单数据的验证
• 前后端分离
  • 通过JavaScript获取所有表单的内容
  • 通过正则表达式进行表单的验证
  • 发送ajax请求，将数据传递给服务器
  • 验证成功后，服务器会返回结果，需要前端解析这个数据
  • 并且决定显示什么内容（前端渲染和前端路由）

5.name和value

• name 是 key， value 是 value
  • 在radio/checkbox里面需要设置value，因为value不是用户填写的

6.get和post请求

• get是在?后面加上key=value，且多个数据中用&隔开，大小最多1kb
• post请求是放在一个请求体里面的，大小无限制

十一.CSS进阶

1.元素类型的划分

块级、行内级元素

• 根据元素的显示(能不能在同一行显示)类型，HTML元素可以主要分为两大类
• 块级元素(bolck-level elements)
  • 独占父元素一行
  • 比如div,p,pre,h1-h6,ul,ol,li,dl,dt,dd,table,form,article等等
• 行内级元素(inline-level elements)
  • 多个行内级元素可以在父元素的同一行中显示
  • 比如a,img,span,stong,code,iframe,label,input,button等

替换、非替换元素

• 替换元素(replaced elements)
  • 元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容
  • 如img,input,iframe,video等
• 非替换元素(non-replaced elements)
  • 和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要类型和属性来判断到底显示什么内容

行内元素才有替换素，块级全是非替换元素

行内元素只有非替换元素才不能随意设置宽高

2.display属性

• display能改变元素的显示类型
  • block 让元素变成块级元素
  • inline 让元素变成行内级元素
  • none 隐藏元素
    • 元素会不再占据空间（消失）
  • inline-block 让元素同时具备行内级、块级元素的特征
    • 可以和其它内容在同一行显示
    • 设置宽度和高度
    • 宽高默认由内容决定
    • 对内是行内元素，对外是块级元素
    • 让行内非替换元素能随时设置宽度考高度
    • 让块级元素能够跟其他元素在同一行显示

3.visibility属性

• visible 显示
• hidden 隐藏
  • 这个只是隐藏，display是消失

4.overflow属性

• 图片超出部分会怎么样
• visible 依然可见
• hidden 超出部分隐藏
• scroll 溢出的内容被裁剪，但可以进行滚动
• auto:自动根据内容是否溢出来决定是否提供滚动机制

5.元素之间的空格

• 行内级元素都会产生空格
  • 包括inline-block
• 设置父元素(body)的font-size为0，然后在元素中重新设置自己需要的font-size
  • 因为字的大小是0了
  • 不推荐使用
• 设置浮动（正解）

6.元素之间的嵌套关系

• 块级元素和行内块级元素可以嵌套任意元素
  • 除了p里面嵌套div不行
• 行内元素(span/a/strong)里面不要嵌套块级元素
  • 只包含行内元素

十二.盒子模型

在HTML内的所有元素都可以看作一个盒子

1.盒子的构成

• content 内容
• padding 内边距
• border 边框
• margin 外边距

2.content相关属性

• min-weight,max-weight,min-height,max-height
  • min-weight是用来限制你网页缩小的时候不让布局改变的
  • max-weight是用来限制强行换行的
  • min-height是你缩小到一定地步会出现滚动条
  • max-height内容如果多余控制的话，会被超出（或者使用overflow属性）

3.padding

• 缩写属性的时候
• 四个值：上右下左
• 三个值：上，左右，下
• 两个值：上下，左右

4.maigin

4.1 上下margin的传递

• 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
• 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto,那么这个块级元素的margin-bottom值会传递给父元素

如何防止进行传递？

• 给父元素设置padding-top/padding-bottom
• 给父元素设置border
• 触发BFC block format context
  • BFC相当于一个结界
  • 浮动可以触发
  • 设置一个元素的overflow为非visible
    • hidden
    • auto
    • scroll

margin一般设置兄弟元素之间的间距

padding一般设置父子元素之间的间距

4.2 margin的上下折叠

垂直方向上相邻的两个Margin有可能会合并为一个margin,这种现象叫做collapse

其它：

word-break

• 让单词可以断开（换行）

Flex布局

• flexible(弹性布局)
• 开启flex布局的元素叫 flex container
• flex container 里面的直接子元素叫做 flex items
• 如何开启flex布局？（让这个元素成为flex container)
  • 在css样式中，display设置
    • flex (块级元素)
    • inline-flex (行内元素)

快捷键

• alt+鼠标点击 多重光标
• alt+shift+鼠标拉选 多重光标
• w200+h200 (宽高200px)
• m0 (margin: 0;)
• p0 (padding:0;)
• f-s (font-size)
• f-sy (font-style)
• f-f (font-family)
• f-w (font-weight)
• bg-c (background-color)
• t-d (text-decoration)
• l-sp (letter-spacing)
• w-sp (word-spacing)
• t-t (text-transform)
• t-i (text-intent)
• t-al (text-align)

标签语义化

• 选择标签的时候要尽量让每一个标签都有正确的语义
• 比如不要用strong 去做img
• 让正确的标签去做正确的事情

css注意点

1. 把不同的css放不同的文件（不用担心css太多， 会打包的）
2. 把公共的样式抽离到base.css中
3. 不要用标签的属性去控制样式，用css控制
4. 设置网页图标用ico，png格式，常用大小16x16等

原文：https://www.cnblogs.com/autoloop/p/15302477.html