二、2023新版HTML+CSS零基础入学

郁子大约 6 分钟约 1739 字笔记渡一教育语言基础姬成HTMLCSS

（一）CSS 权重

CSS权重
!importantInfinity
行间样式1000
id100
class、属性、伪类10
标签、伪元素1
通配符 *0
  • 权重进制：256 进制
  • 使用场景：
    • 多样式时计算权重
    • 写在样式表同一行的，权重相加取大值
<div id="idDiv" class="classDiv">
  <p id="idP" class="classP">1</p>
</div>

/* 100 1 */
#idDiv p {
  background-color: red; /* 展示 */
}

/* 10 10 */
.classDiv .classP {
  background-color: green;
}

（二）块级格式化上下文 BFC（Block Formatting Context）

  • 作用：通过特定手段改变某个盒子内部的渲染规则

1）两个 Bug

  • margin 塌陷【解决只需要添加 css】
    • 正常：子元素调整 margin，父元素也随之移动
    • 父元素开启 BFC 后：子元素调整 margin，父元素不移动
  • magrin 合并【解决需添加 html 和 css => 一般不解决 => 修改 margin 值解决】
    • 正常：相邻元素，水平方向区域不可共用，垂直方向 margin 重叠
    • 任一/两者开启 BFC 后：两元素 margin 都会撑开

2）触发 BFC

  • position: absolute;
  • display: inline-block;
  • float: left/right;
  • overflow: hidden;
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

（三）浮动 float

1.浮动元素产生了浮动流

  • 所有产生了浮动流的元素，块级元素看不到他们
    • 所以相邻块级元素会覆盖他们，形成层叠关系
  • 产生了 BFC 的元素、文本类属性（带 inline 属性）的元素、文本都能看到浮动元素
    • 相邻元素不会覆盖，没有层叠关系

2.不定高度父元素包裹浮动元素

  • 浮动元素只影响在其之后出生的元素，所以只需要在父元素最后一个浮动元素之后添加一个无样式占位元素，并使用 clear: both; 清除浮动效果，则父元素会被该元素撑开，实现包裹效果
  • clear: both; 必须在块级元素中才会生效
  • 一般写在父元素的伪元素中：::after
  • 设置了 position: absolute; 和 float: left/right; 的元素会从内部转变为行级块元素inline-block，其宽高由当前包裹着的子元素整体宽高决定
<div class="wrapper">
  <div class="content">1</div>
  <div class="content">2</div>
  <div class="content">3</div>
  <!-- 无端增加无用的占位元素，不符合语义化，应该用伪元素 -->
  <!-- <p></p> -->
</div>

.wrapper {
  border: 1px solid black;
}
.content {
  width: 100px;
  height: 100px;
  color: #fff;
  background-color: black;
  float: left;
}
p {
  border: 0px solid black;
  clear: both;
}
.wrapper:after {
  content: "";
  display: block;
  clear: both;
}

（四）文本溢出——打点展示

1.单行文本

  • 使文本失去换行功能：white-space: nowrap;
  • 隐藏容器溢出部分：overflow: hidden;
  • 文本溢出打点展示：text-overflow: ellipsis;

2.多行文本

  • CSS3

（五）图片链接优化展示

1.背景

  • 浏览器在客户端带宽低于某个值时，会自动禁用网站的 CSS、JS，此时网站仅有 HTML。
  • 对于类似于网站 logo 功能，既需要在正常情况下展示带链接的 logo 图片，又需要在 CSS、JS 禁用时正常展示文本链接。
<a href="www.taobao.com" target="_blank">淘宝网</a>

2.解决方案一：text-indent

  • a 标签内部正常写链接文本，logo 图片作为背景引入。
  • 使用 text-indent 让文本溢出 a 标签容器，禁用换行，并隐藏容器溢出。
a {
  display: block;
  width: 200px;
  height: 100px;
  background: url() no-repeat;
  text-indent: 200px;
  white-space: nowrap;
  overflow: hidden;
}

3.解决方案二：padding-top

  • padding 区域可以渲染背景颜色和背景图片。
  • 通过加大 padding（容器高度置 0）将文本挤出 a 标签容器，再隐藏容器溢出。
a {
  display: block;
  width: 200px;
  height: 0;
  padding-top: 100px;
  overflow: hidden;
  background: url() no-repeat;
}

（六）元素嵌套

  • 行级元素只能嵌套行级元素
  • 块级元素可以嵌套任意元素

警告

p 标签不能嵌套 div 元素，否则 p 标签会被 div 标签截断，渲染为 p-div-p

a 标签不能嵌套 a 标签

<p>
	<div></div>
</p>

<!-- 渲染为 -->
<p>
	</p>
<div></div>
<p></p>

（七）img 标签间隙

  • img 标签是文本类元素（inline-block），具有文本的一切属性
  • html 的裸文本中如果字符间有空格/换行符，则渲染后文本字符间默认保留一个字符距离
  • 当 img 标签前后有空格/换行符时，渲染后的图片前后会默认保留一个字符的空白距离
    • 解决：img 标签不换行

（八）文本对齐

  • inline-block 元素（无内容的 span 和 img 标签），如果其后方有文本，则两者底部对齐
  • 如果 span 内部有文本，其后方也有文本，则外部文本相对于 span 内部文本底部对齐
  • 调整一行中文本的对齐线：vertical-align

（九）样式重置

1.字体行高

  • 微软雅黑行高约为 1.32
  • 宋体行高约为 1.41
  • line-height: normal; 的行高实际值与浏览器以及当前元素字体大小有关
    • 渲染后的行高 = 设置的行高值 * 字体大小
  • 父元素的行高可被继承，如果是数值就直接继承，否则继承父元素计算后的行高（设置的行高值 * 字体大小）
  • 如果父元素行高设置为 em，则先计算父元素的行高值，再由子元素继承
    • 如果父元素行高设置为数值，则子元素先继承，再根据子元素字体大小计算行高值
h3 {
	line-height: normal;
	line-height: 1.5;
	line-height: 200%;
	line-height: 50px;
	line-height: 5em;
}

/* 渲染后的行高 = 设置的行高值 * 字体大小 */
5em => 5 * 16 = 80

2.父级清除浮动

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

3.模块化引入样式表

  • @规则（at-rule）/ @语句 / CSS 指令 / CSS 规则
    • @charset：设置样式表的编码，必须写在 css 文件的第一行
    • @import：导入其他样式文件
    • @media：媒体查询
    • @font-face：自定义字体
@charset 'utf-8';
@import "reset.css";

（十）base 标签

  • 定义文档中所有相对于该目录的链接根目录
  • 页面中只能有一个 base 标签
<head>
  <base href="http://www.baidu.com/1" />
  <base target="_blank" />
</head>
<body>
  <a href="123.html">度娘</a>
</body>

（十一）盒模型

1.标准盒模型

  • 总宽度 = border（左右） + width + padding（左右）
  • 总高度 = border（上下） + height + padding（上下）

2.IE 盒模型（怪异盒模型）

  • 总宽度 = width
  • 总高度 = height

3.触发 IE 盒模型

box-sizing: border-box;

（十二）伪元素和伪类

1.伪元素

  • ::after、::before
    • CSS3 标准
    • 不兼容 IE8

2.伪类

  • :after、:before
    • 兼容 IE8

3.伪类选择器

  • :hover、:active、:focus
  • 选中某些元素的某种状态
  • a 元素四种伪类选择器
    • :link ：超链接未访问时的状态
    • :visited ：超链接访问过后的状态
    • :hover ：鼠标悬停状态
    • :active ：激活状态，鼠标按下的状态
  • 优先级按顺序 => 爱恨法则：love hate （l v h a）

4.伪元素选择器

  • ::after、::before
上次编辑于: