[note] CSS 元素类型|display|邮箱&页码练习
内容概述
一. 元素类型
块级、行内级元素：显示（能不能在同一行显示）类型
-
块级元素（block-level elements）：独占父元素一行 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr等
-
行内级元素（inline-level elements）：多个行内级元素可以在父元素的同一行中显示 比如a、img、span、strong、code、iframe、label、input、button、canvas、embed、object、 video、audio等
替换、非替换元素：内容（是否浏览器会替换掉元素）类型
-
替换元素（replaced elements）：元素本身没有实际内容，浏览器根据元素的类型和属性，来决定元素的具体显示内容 比如img、input、iframe、video、embed、canvas、audio、object等
-
非替换元素（non-replaced elements）：和替换元素相反，元素本身是有实际内容的，浏览器会直接将其内容显示出来，而不需要根据元素类型和属性来判断到底显示什么内容 比如div、p、pre、h1~h6、ul、ol、li、dl、dt、dd、table、form、article、aside、footer、header、hgroup、main、nav、section、blockquote、hr、a、strong、span、code、label等
-
替换元素都是行内级元素
屏幕快照 2020-02-09 下午3.28.51.png
- 注意：【行内级非替换元素】
* 行内级替换元素可以设置宽高 * 行内级非替换元素不能设置宽高
- 注意：【元素的嵌套关系】
* 块级元素、inline-block元素 一般情况下，可以包含其他任何元素（比如块级元素、行内级元素、inline-block元素） 特殊情况，p元素不能包含其他块级元素 * 行内级元素（比如a、span、strong等） 一般情况下，只能包含行内级元素
二、CSS属性
CSS属性 - display
-
块级元素的由来
-
浏览器会给块级元素（div、p等）设置display样式user agent stylesheet
-
display的以下取值，等同于某些HTML元素（了解）
-
table：
<table>，一个block-level表格 -
inline-table：
<table>，一个inline-level表格 -
table-row：
<tr> -
table-row-group：
<tbody> -
table-header-group：
<thead> -
table-footer-group：
<tfoot> -
table-cell：
<td>、<th>，一个单元格 -
table-caption：
<caption>，表格的标题 -
list-item：
<li>-
block：让元素显示为块级元素
-
inline：让元素显示为行内级元素
-
none：隐藏元素（不占据空间）
-
inline-block：让元素同时具备行内级、块级元素的特征
-
可以和其他元素在同一行显示
-
可以设置宽高
-
CSS属性 - visibility
-
visibility，能控制元素的可见性，有2个常用值
-
visible：显示元素
-
hidden：隐藏元素
-
-
visibility: hidden; 和 display: none; 的区别
-
visibility: hidden; 虽然元素看不见了，但元素的框依旧还留着，还会占着原来的位置
-
display: none; 不仅元素看不见了，而且元素的框也会被移除，不会占着任何位置
-
CSS属性 - overflow
-
overflow用于控制内容溢出时的行为
-
visible：溢出的内容照样可见
-
hidden：溢出的内容直接裁剪
-
scroll：溢出的内容被裁剪，但可以通过滚动机制查看，会一直显示滚动条区域
-
滚动条区域占用的空间属于width、height
-
-
auto：自动根据内容是否溢出来决定是否提供滚动机制（常用于BFC）
-
-
还有overflow-x、overflow-y两个属性，可以分别设置水平垂直方向（很少使用）
- （建议还是直接使用overflow，因为目前overflow-x、overflow-y还没有成为标准，浏览器可能不支持）
三. 元素之间的空格
-
行内级元素（包括inline-block元素）的代码之间如果有空格，会被解析显示为空格
-
目前建议的解决方法
- 元素代码之间不要留空格
- 注释掉空格
-
设置父元素的font-size为0，然后在元素中重新设置自己需要的font-size
此方法在Safari不适用
-
- 给元素加float
四、练习
邮箱练习(作业一)
-
1.要求写两遍
-
2.要求加注释
-
3.建议: 按照从整体到局部顺序去写样式
页码的练习(作业二)
提问
www.baidu.com?phone=133&password=123&code=3587
target: a元素/form元素
-
_self
-
_blank
charset:
- 字符编码
enctype
-
encode 编码
-
type 类型
列表常使用的元素和样式(1个)
-
ol li
-
ul li
-
dl dt dd
-
list-style: none
表格常使用的元素和样式(1个)
-
table tr td
-
tbody thead tfoot th
-
border-collapse: collapse
vue - element-ui(UI组件库)
react
angular - nestjs - typescript
div/p/span/strong/a/h1/code/i/em/ul/li/table/tr/td/input/img
分类:
-5 -7 -4 4 8 10
-
正负划分:
-
-5 -7 -4
-
4 8 10
-
-
奇数/偶数
-
奇数: -5 -7
-
偶数: -4 4 8 10
-
流媒体:
视频: 2帧
电影: 24帧
眼睛: 小于16帧
视频: 30帧
gif -> 一张张 -> 一帧
李安: 中场战事 -> 120帧
视频编码:
-
-
-
