HTML + CSS 随笔

发表于 2021-02-12 分类于前端

一些学习到的 HTML 和 css 的知识点，有意思的就记录一下。

常用元素

常用块级元素：<div><p><form><ul><hr><h1>
常用行间元素：<span><a><em><strong><input><img>
~~可变元素（根据上下文）：<del>~~

Bfc - block format context 解决 margin 塌陷

margin 塌陷：父元素与子元素都有上外边距时，此时父元素会塌陷较大的外边距值

通过触发 Bfc 解决这个问题，为元素添加以下 css 即可：
1、position:absolute
2、Display:inline-block
3、Float:left/right
4、Overflow:hidden

主流浏览器内核

Google chrome (webkit/blink)
IE (trident)
Firefox (Gecko)
Safari (webkit)
Opera (presto)

html 编码特殊字符 `$;`

“<”就是”$lt;”。
“>”就是”$gt;”。
“ “就是”$nbsp;”（空格）

`<img>` 标签

“alt”是占位符，”title”是鼠标悬停时显示的信息。

`<a>` 标签作用

锚点。<a href="#id"></a>跳转到相应 ID 所指元素。
超链接。
打电话发邮件等。<a href="tel:110></a>（发邮件 mailto:，一般不用）。

`<input>` 用作选择题

单选题：type=”radio” 将同一道题的 name 设为相同的值。
多选题：type=”checkbox”。
设置预选项的方法：将选中的 input 标签添加 checked=”checked”属性。
type=”submit”为提交。提交时需要 input 提供 value 和 name。

基本使用形式：

<form method="" action="">
  <input type="" name="" value=""></input>
  <input type="submit"><input>
</form>

伪类和伪元素

伪类是 css 选择元素时通过类似”:hover”来操作属性的一类方法，伪元素是每个元素都会有的(::before 和::after),只能通过 css 选中并操作。

css 选择器的权重

以 256 进制比较

!important(Infinity) 计算机中无穷大是个具体值可以通过加减值来改变。
行间样式(1000)。
ID(100)。
class|属性|伪类(10)。
标签|伪元素(1)。
通配符(0)。

缩进

css 中 text-indent 为缩进，如 text-indent=”2em”为缩进两个字符，em 为单个字符宽。也就是 font-size 的大小。

font-size

文字大小以高为标准。

下划线

Css 中的 text-decoration 常用值：underline,overline,none,line-through。

浮动流

浮动元素会产生浮动流：
块级元素看不到浮动元素（会重叠）。
触发了 bfc 的元素和文本类属性的元素以及文本都能看得到浮动元素（会跟着）。

消除浮动的方式：

::after {
  content: "";
  clear: both;
  display: block;
}

单行文本溢出容器打点展示

 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

控制内容显示的高度

Vertical-align: n px

cursor 改变鼠标样式

sticky 吸顶不成功

position 设置为 sticky 即可开启粘性定位，经常用来做吸顶效果，经常会出现设置了 position 和 top: 0 依旧没有生效的情况，此时应该检查父级容器是否设置了 overflow: auto 等值。

因为 sticky 是相对第一个滚动的父容器定位的，所以如果是爷爷容器在滚动，但是直接父元素也开启了滚动（实际没有滚动），那么就会导致吸顶灯失败，解决办法是把除了滚动容器和吸顶元素之前的其他包裹元素 overflow 设为 initial 即可

svg 填充颜色

对 svg 添加 fill=”currentColor”属性，svg 填充的颜色由继承的 color 决定，方便做悬浮等状态的颜色切换。

请求 url 直接触发浏览器下载

响应头中添加 Content-Disposition