[前端学习] HTML + CSS 学习笔记(五)

最新推荐文章于 2024-09-30 14:01:51 发布

Paxlsean

最新推荐文章于 2024-09-30 14:01:51 发布

阅读量841

点赞数 19

文章标签： html css 学习

本文链接：https://blog.csdn.net/weixin_49160784/article/details/135537373

版权

HTML + CSS 学习笔记(五)

一、常用长度单位

px：像素
em：相对于当前元素或其父元素的font-size的倍数；
rem：相对于根元素（html）的font-size的倍数；
百分比%：相对于父元素的百分比。

二、元素的显示模式

块元素(block)：独占一行，默认宽度撑满父元素，默认高度由内容撑开，可通过css设置宽高；
- 主体结构标签：<html>、<body>;
- 排版标签：<h1> ~ <h6> 、<hr> 、<p>、<pre> 、<div>；
- 列表标签：<ul>、<ol>、<li>、<dl>、<dt>、<dd>；
- 表格相关标签：<table>、<tbody>、<thead>、<tfoot>、<tr>、<caption>；
- <form>、<option>
行内元素(inline)：不独占一行，默认高度和宽度都由内容撑开，无法通过css设置宽高；
- 文本标签：<span>、<br>、<em> 、<strong>、<sup>、<sub>、<del>、<ins>；
- <a>、<label>
行内块元素(inline-block)：不独占一行，默认高度和宽度都由内容撑开，可通过css设置宽高
- 图片：<img>;
- 单元格：<td>、<th>；
- 表单控件：<input>、<textarea>、<select>、<button>；
- 框架标签：<iframe>。
修改元素的显示模式：使用display修改显示模式，有以下几个值：
- none：元素被隐藏；
- block：元素作为块级元素显示；
- inline：元素作为行内元素（内联元素）显示；
- inline-block：元素作为行内块元素显示。

三、盒子模型

由内而外分别是：content（内容）—— padding（内边距）—— border（边框）—— margin（外边距），width 和 height设置的是内容区域的宽高，整个元素的大小由内容区、内边距、边框一起组成，background会影响整个元素，外边距margin只会影响元素的位置，不会影响大小。

内容区域：可设置width、min-width、max-width、height、min-height、max-height，min(max)-width(height)一般不与width(height)一起使用；
默认宽度：不设置宽度时：
盒子总宽度 = 父的content宽度 - 自身的左右margin，
内容区宽度 = 父的content - 自身的左右margin - 自身的左右border - 自身的左右padding。
内边距（padding）：
1）可单独设置四个方向的边距：padding-left、padding-right、padding-top、padding-bottom；
2）复合属性：padding：
- 写一个值：同时设置上下左右边距，例如：padding: 20px;；
- 写两个值：第一个值表示上下边距，第二个值表示左右边距，例如：padding: 10px 20px;；
- 写三个值(不常用)：分别是上边距、左右边距、下边距；
- 写四个值：分别是上边距、右边距、下边距、左边距，例如：padding: 5px 10px 15px 20px。
  3）注意：内边距的值不能为负值；行内元素的左右边距可以完美设置，上下边距不能（如果上下有内容可能出现边距重叠的情况）；块级元素、行内块元素四个方向的边距都可以完美设置。
边框（border）：
1）宽度（border-width），可给一个值设置全部或多个值设置各方向的值，
也可分别设置border-left-width、border-right-width、border-top-width、border-bottom-width；
2）颜色（border-color），可给一个值设置全部或多个值设置各方向的值，
也可分别设置border-left-color、border-right-color、border-top-color、border-bottom-color；
3）线条样式（border-style），可给一个值设置全部或多个值设置各方向的值，
也可分别设置border-left-style、border-right-style、border-top-style、border-bottom-style；
4）按方向设置的复合属性：border-left、border-right、border-top、border-bottom，例如：border-left: 20px solid red；
5）整体复合属性：border，例如：border: 10px solid red 。
外边距（margin）：
1）具体设置参考padding，
2）注意事项：margin的值可以是负值；子元素的margin参考父元素的content计算；行内元素的左右margin可以完美设置，上下margin设置无效；块级元素、行内块元素四个方向的margin都可以完美设置；margin的值也可以是auto，如果给块级元素设置左右都auto，会在父元素中水平居中。
3）margin塌陷问题（margin合并）：在垂直方向如果有两个元素的外边距有相遇，在浏览器中加载的真正的外边距不是两个间距的和，而是两个边距中值比较大的，边距小的塌陷到了边距值大的值内部。有以下两种情况：
- 相邻块元素（同级元素）垂直外边距塌陷
  - 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距取两者中的较大者。
  - 解决办法：尽量只给一个盒子添加margin值。
- 嵌套块元素（父子元素）垂直外边距的塌陷
  - 父元素和子元素都设置了同方向的margin-top值，两个属性之间没有其他内容进行隔离，导致两个属性相遇，发生margin塌陷。
  - 本身父元素与上一个元素的距离是0，子元素如果设置了垂直方向的上边距，会带着父级元素一起掉下来（父元素的上边距0塌陷到了子元素的上边距50里面）
  - 解决办法：
    a. 让两个边距不要相遇：给父元素设置padding或border（会撑大盒子模型）；
    b. 给父元素设置BFC（块级格式上下文）：
    1. 根元素本身就是一个BFC；
    2. 使用overflow属性，设置为visible以外的值，如hidden；
    3. 浮动元素，使用float属性，设置为left、right；
    4. 绝对定位元素，设置position属性值为absolute、fixed；
    5. 设置display属性值为inline-block、table-cell、table-caption、flex、inline-flex等。
处理内容溢出： overflow，显示（默认）——visible、隐藏——hidden、滚动条——scroll、自动——auto。
隐藏元素：
1）设置display: none，隐藏的元素不占位；
2）设置visibility: hidden，默认值是show，设置为hidden后隐藏，这种方式隐藏的元素占位；

四、样式的继承

可继承的有：不影响布局的属性，例如字体属性、文本属性（vertical-align除外）、文字颜色等；不可继承的一般是与盒子布局有关的：例如边框、背景、内边距、外边距、宽高、溢出方式等
元素有默认样式，在优先级上：默认样式 > 继承的样式。

五、布局技巧

行内元素、行内块元素可以被父元素当作文本处理。例如：可以使用text-align、text-height、text-inline来处理行内元素和行内块元素在父元素中的对齐；
让子元素在父元素中水平居中
- 子元素为块元素，给父元素添加margin: 0 auto；
- 子元素为行内元素、行内块元素，给父元素添加text-align: center。
让子元素在父元素中垂直居中
- 子元素为块元素，给子元素添加margin-top: m;（m 的值为 (父元素的content高度 - 子元素盒子总高度) / 2）；
- 子元素为行内元素、行内块元素，让父元素的height = line-height，每个子元素都加上vertical-align: middle，若想绝对的垂直居中，可以给父元素设置font-size: 0，再单独给需要的子元素添加font-size。

六、元素间的空白问题

行内元素的空白
产生原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。
解决方案：
- 方案一：去掉换行和空格（不推荐）；
- 方案二：给父元素设置font-size: 0，再单独给需要的子元素添加font-size。
行内块的幽灵空白问题
幽灵空白：在HTML中的一个元素是行内块时，会出现一个空白间距的情况。
产生原因：行内块元素默认是与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
解决方案：
- 方案一：给行内块设置vertical，值是除baseline以外的值，例如：middle、top、bottom;
- 方案二：若父元素中只有一张图片，设置图片为display:block；
- 方案三：给父元素设置font-size: 0，再单独给需要的子元素添加font-size。

七、浮动

float：最初浮动是用来实现文字环绕效果的，现在浮动是主流的页面布局方式之一。
元素浮动之后的特点：
- 脱离文档流；
- 不管浮动前是什么元素，浮动后默认宽高由内容撑开，而且可以设置宽高；
- 不会独占一行，可以与其他元素共用一行；
- 不会出现margin合并、margin塌陷问题，能够完美设置四个方向的margin和padding；
- 不会像行内块一样被当作文本处理（没有行内块的空白问题）。
浮动后的影响：
- 对兄弟元素：后面的兄弟元素会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响；
- 对父元素：不能撑开父元素的高度，导致父元素的高度塌陷，但父元素的宽度依然束缚浮动元素。
解决浮动的影响（清除浮动）：
- 方案一：给父元素指定高度；
- 方案二：给父元素也设置浮动，但是会带来其他影响；
- 方案三：给父元素设置overflow: hidden；
- 方案四：在所有浮动元素的后面，添加一个块级元素，并给该块级元素设置clear: both；
- 方案五：给浮动元素的父元素，设置伪元素，对伪元素清除浮动，原理与方案四相同，
```
.parent::after {
   content: '';
   display: block;
   clear: both;
}
```
布局中的一个原则：设置浮动时，兄弟元素要么全部浮动，要么都不浮动。

八、定位（`position`）

相对定位（relative）：给元素设置position: relative，可以使用left、right、top、bottom四个属性调整位置，值可以为负数。
参考点：相对定位的参考位置是相对原来的位置。
特点：
- 不会脱离文档流，不会对其他元素产生影响；
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
  默认规则：
  - 定位元素会盖在普通元素之上；
  - 都发生定位的两个元素，后写的元素会盖在先写的元素之上。
- left和right不能一起设置，top和bottom不能一起设置；
- 相对定位的元素也能继续浮动，但不推荐；
- 相对定位的元素也能通过margin调整位置，但不推荐。
  绝大多数情况，相对定位会和绝对定位配合使用。
绝对定位（absolute）：给元素设置position: absolute，可以使用left、right、top、bottom四个属性调整位置，值可以为负数。
参考点：绝对定位的参考位置是相对与它的包含块。
什么是包含块？
1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位元素的祖先元素（如果祖先都没定位，那包含块就是整个页面）。
  特点：
- 会脱离文档流，对后面的兄弟元素、父元素有影响；
- left和right不能一起设置，top和bottom不能一起设置；
- 绝对定位和浮动两者不能同时设置，如果同时设置，浮动失效，以定位为主；
- 绝对定位的元素也能通过margin调整位置，但不推荐；
- 无论什么元素（行内、行内块、块级）设置绝对定位后，都变成了定位元素，定位元素指得是：默认宽高由内容撑开，且可以设置宽高。
固定定位（fixed）：给元素设置position: fixed，可以使用left、right、top、bottom四个属性调整位置，值可以为负数。
参考点：固定定位的参考位置是它的视口。
特点：
- 会脱离文档流，对后面的兄弟元素、父元素有影响；
- left和right不能一起设置，top和bottom不能一起设置；
- 固定定位和浮动两者不能同时设置，如果同时设置，浮动失效，以固定定位为主；
- 固定定位的元素也能通过margin调整位置，但不推荐；
- 无论什么元素（行内、行内块、块级）设置固定定位后，都变成了定位元素。
粘性定位(sticky):给元素设置position: sticky，可以使用left、right、top、bottom四个属性调整位置，值可以为负数，最常用的是top。
参考点：离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
特点：
- 不会脱离文档流，是一种专门用于窗口滚动时的新的定位方式；
- left和right不能一起设置，top和bottom不能一起设置，最常用的是top；
- 粘性定位和浮动可以同时设置，但不推荐；
- 粘性定位的元素也能通过margin调整位置，但不推荐；
- 粘性定位和相对定位的特点基本一致，不同的是粘性定位可以在元素到达某个位置时将其固定。
定位的层级
- 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的；
- 如果位置发生重叠，默认是后面写的元素会显示在前面的元素之上；
- 可以通过css的z-index调整元素的显示层级；
- z-index的属性值是数字，没有单位，但值越大显示层级越高；
- 只有定位的元素设置z-index才有效；
- 如果z-index值大的元素却没有覆盖掉z-index值小的元素，检查其包含块的层级。
定位的特殊应用
1）发生固定定位、绝对定位后，元素都变成了定位元素，默认宽高由内容撑开，且可以设置宽高；
2）发生相对定位后，元素依然是之前的显示模式；
3）以下的特殊应用，只适用于绝对定位和固定定位的元素，不包括相对定位的元素：
让定位元素的宽充满包含块：
- 块宽与包含块一致，可以给定位元素同时设置left、right为0；
- 高度与包含块一致，设置top、bottom为0；
  让定位元素在包含块中居中（定位元素必须设置了宽高）
- 方案一：
```
定位元素 {
   ...
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
}
```
- 方案二：
```
定位元素 {
   ...
   left: 50%;
   top: 50%;
   margin-left: 高度的一半的相反数;
   margin-top: 高度的一半的相反数;
}
```

九、布局

版心
- 在PC端网页中，一般都会有一个固定宽度且水平居中的盒子，来显示网页的主要内容，这是网页的版心；
- 版心的宽度一般是 960 ~ 1200 像素之间；
- 版心可以是一个，也可以是多个。
常用布局类名

topbar、
header、page-header;
nav、navigator、navbar;
search、search-box;
banner;
content、main;
aside、sidebar;
footer、page-footer。
重置默认样式
- 方案一：使用全局选择器，在简单案例中可以用，实际开发不会使用，因为 * 选择的是所有元素。
```
* {
   margin: 0;
   padding: 0;
   ......
}
```
- 方案二：使用reset.css，选择到具有默认样式的元素，清空其默认样式。
- 方案三：Normalize.css，是一种最新方案，在清除默认样式的基础上，保留了一些有价值的默认样式。