因为一直写组件，很久没有好好的写布局了。再加上自己html、css这一块也没有读过相关的书籍，突然感觉好陌生。故把以前在b站上学习时的笔记又整理了一次
还是感觉这些东西逻辑性真的好差，比js难搞多了...
很多图是自己原来笔记上的故粘了水印
这里应该是自己的一个比较大的短板了，主要是自己想要复习一下。如有误，请指正
回到那年夏天，从HTML开始
基本标签回顾
这里的东西应该就不用单拎出来写栗子了吧
表格表单列表
额，不好意思这里的图截长了...
哈哈，下面来点小栗子吧
表格
<table border=1px align="center" cellspacing="10px" cellpadding="5px">
<caption>表格标题</caption>
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>gxb</td>
<td>18</td>
</tr>
<tr>
<td>02</td>
<td>zs</td>
<td>20</td>
</tr>
</tbody>
</table>
跨行合并
<table border=1px align="center" cellspacing="10px" cellpadding="5px">
<caption>表格标题</caption>
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>gxb</td>
<td rowspan="2">18</td>
</tr>
<tr>
<td>02</td>
<td>zs</td>
<!-- <td>20</td> -->
</tr>
</tbody>
</table>
跨列合并
<table border=1px align="center" cellspacing="10px" cellpadding="5px">
<caption>表格标题</caption>
<thead>
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">01</td>
<!-- <td >gxb</td>
<td>18</td> -->
</tr>
<tr>
<td>02</td>
<td>zs</td>
<td>20</td>
</tr>
</tbody>
</table>
列表
无序
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
有序
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
自定义
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
表单
语法
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
这里只举几个小栗子吧
单选框(单选框的name保持一致)
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
label标签的两种使用
第一种：直接包裹
<label> 用户名： <input type="text" name="usename" value="请输入用户名"> </label>
第二种：利用for属性指定控件id值
<label for="usename">男</label>
<input type="text" name="usename" id="usename">
文本控件
一行5个，可一块显示两行
<textarea cols="5" rows="2">
文本内容
</textarea>
下拉列表
<select>
<option>选项1</option>
<option>选项2</option>
<option selected>选项3</option>
</select>
h5新增input增强
其他重要知识
前端进阶之什么是BFC？BFC的原理是什么？如何创建BFC？学习链接
[BFC与IFC]()
CSS
三种引入
选择器
属性选择器
<body>
<input type="text">
<input type="password">
</body>
如要求在不改变结构的情况下选中 <input type="password">
实现
input[type="password"] {
width: 100px;
height: 100px;
background-color: pink;
}
结构伪类选择器
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
如需求在不改变页面结构的情况下选中第五个li
实现
ul li:nth-child(5) {
background-color: red;
}
nth-child中的n参数详解
- 本质是是指可以选择哪个元素
- n除了可以是数字之外还可以是关键字，数学公式**（**常见关键字even偶数，odd奇数。若n是公式，则n的开始值为0。
如选中奇数
ul li:nth-of-type(2n+1) {
background-color: red;
}
-child和-of-type的区别
来个栗子
<div>
<span>span</span>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
需求选中第一个p
div p:nth-child(1) {
background-color: red;
}
这样是选中不了的，这样的选择器是选择的div的第一个子元素并且这个子元素需是p元素
这时得这样写
div p:nth-of-type(1) {
background-color: red;
}
这个选择器选中的是div中p这种元素的第一个
nth-child选择父元素里面的第几个子元素，不管是第几个类型nth-of-type选择指定类型的元素
伪元素选择器
| 选择符 | 描述 |
|---|---|
| ::before | 在元素盒子内容的前面插入内容 |
| ::after | 在元素盒子内容的后面插入内容 |
值得注意：
before和after必须有content属性before和after是相当于创建了一个元素，其属于行内元素- 因为它创建出来的元素在
Dom中查找不到，所以称为伪元素 - 权重为1（例如
div::afte一个标签加一个伪元素权重为1+1=2）
栗子
<body>
<div>
<p>这是一个p</p>
</div>
</body>
css
div::before {
content: "我是新来的";
display: block;
width: 100px;
height: 50px;
background-color: skyblue;
}
基操（实在不知道叫啥名字好了）
字体相关
文本相关
行高问题
行高如上图所示：上基线到下基线的距离
那为啥将文字的行高等于盒子的高度就可以实现单行文本垂直居中呢？
在看这张图，行高=上边距+下边距+内容
还是拿个实例说话吧
行高=盒子高度
如果盒子高度是50px，设置行高也为50px。其内容假设有20px的高，这是它的上下边距均会被设为（50-20）/2=15px。即内容正好被卡在中间
行高>盒子高度
还是盒子高度为50， 如果你把行高设为60px，文本内容还是20px，则上边距和下边距=（60-20）/2应为20px。即上边距为20px（空间够）。下边距应该也为20px（空间不够了）。但盒子只有50px。故剩下的50-20-20=10px便为真正的下边距。即显示的效果是文本偏下了。
行高<盒子高度
与上同理，文本偏上
背景样式
单拎出来几个详写一下。
背景位置
语法
这里有两种形式一种属性值为方位名词，一种具体长度值
background-position : length || length
background-position : position || position
| 参数 | 值 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center | bottom | left | center | right 方位名词 |
这里要注意一下
-
我们必须指定了background-image属性
-
如果指定两个值，两个值都是方位名字，则两个值前后顺序无关，比如left top和top left效果一致
-
如果只指定了一个方位名词，另一个值默认居中对齐。
-
如果position 后面是精确坐标， 那么第一个，肯定是 x 第二的一定是y（这里的坐标轴是以盒子的左上脚为原点，向右为x正方向。向下为y的正方向）
-
如果只指定一个数值,那该数值一定是x坐标，另一个默认垂直居中
-
如果指定的两个值是 精确单位和方位名字混合使用，则第一个值是x坐标，第二个值是y坐标
它的综合写法
这里的综合写法与font属性类似，但是它的顺序没有被强制要求
建议： background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
标签的显示模式
css三大特性
优先级
首先看一下权重的计算公式
| 标签选择器 | 计算权重公式 |
|---|---|
| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |
权重叠加
因为我们的选择器一般均为复合选择器，所以要考虑他们的叠加 举例：
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
要注意的是继承的权重为0
比如来个易错的栗子,p标签的文本最后是什么颜色？
不会还是真的一上来，一个id选择器一个标签选择器，选id吧...
#hezi {
color: blue;
}
p {
color: yellow;
}
<div id="hezi">
<p>这是一个段落</p>
</div>
盒模型
边框
边框写法详细
| 上边框 | 下边框 | 左边框 | 右边框 |
|---|---|---|---|
| border-top-style:样式; | border-bottom-style:样式; | border-left-style:样式; | border-right-style:样式; |
| border-top-width:宽度; | border- bottom-width:宽度; | border-left-width:宽度; | border-right-width:宽度; |
| border-top-color:颜色; | border- bottom-color:颜色; | border-left-color:颜色; | border-right-color:颜色; |
| border-top:宽度 样式 颜色; | border-bottom:宽度 样式 颜色; | border-left:宽度 样式 颜色; | border-right:宽度 样式 颜色; |
表格问题
相邻单元格边框合并，显得外细内粗多难看啊
怎么解决呢？
可通过这一属性：table{ border-collapse:collapse; }
padding
这里再单说一个问题
一个没有指定宽度的盒子，如果给他设置了padding是不会再次撑开盒子的，还是在父盒子里面好好的待着（padding的小于父盒子宽度）
margin合并塌陷问题
合并：兄弟结构上下相邻
兄弟结构水平方向的margin正常，但是垂直方向上面的margin会合并，并且这里的取到的是较大的一个，一般情况下，margin合并我们可以不处理，合理安排垂直方向的margin就能达到需求效果。
塌陷：父子（嵌套）结构
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上magin会与子元素的上magin发生合并。 （还是谁大听谁的）
解决：
- 可以为父元素定义上边框。
- 可以为父元素定义上padding
- 可以为父元素添加overflow:hidden（ 触发bfc来解决 ）。
浮动
清除浮动
很多父盒子在很多情况下是不便之间给高度的，像我们一般网页的商品列表。列表的货物是根据后台数据库中的数据来动态返到前台的。我们不能直接给与商品盒子一个绝对的高度，只能让他以内部内容自己撑开 但是这就产生了问题，因为浮动的元素是不占位置的。父盒子又没有高。下面的盒子自然挤了上来。这就要求我们必须清除因浮动所带来的影响了。
这里的本质原因：父盒子没有高度，里面的盒子还是浮动的
怎么解决呢？
法1：隔墙法
通过在浮动元素末尾添加一个空的标签
.son {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.cleanfix {
clear: both;
}
<div class="fa">
<div class="son">aaa</div>
<div class="cleanfix"></div> 设置空标签
</div>
法2： 可以给父级添加： overflow :hidden| auto| scroll 都可以实现。
法3：使用after伪元素(常用)
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
法4：使用双伪元素清除浮动（常用）
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
定位
这里基本思维图中已经写全了
简单写一下应用吧
使绝对定位的盒子水平居中
left：50%，再回退本身盒子宽度的一般， magin-left：-盒子宽度的一半
堆叠顺序
在使用定位布局时，可能出现盒子重叠的情况，那么就可能需要知道它们的堆叠顺序（默认后来者居上）
z-index：1
z-index 的特性如下：
- 属性值为正整数、负整数或0，默认值是 0，数值越大，盒子越靠上；
- 数字后面不能加单位。
- 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和无效。
css3
从动画开始吧
再来一般使用步骤
- 先定义动画，写好关键帧
- 在调用定义好的动画
定义动画
@keyframes 动画名称 {
0% {
width: 100px; //开始宽100
}
100% {
width: 200px //结束时变为200
}
}
这里关键帧的作用就是说这个盒子在0%干了啥，10%干了啥，50%干了啥，100%的时候又干了啥
- 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
- 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用
from和to，等同于 0% 和 100%
调用动画
div {
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间；
}
其他属性
div {
width: 100px;
height: 100px;
background-color: aquamarine;
/* 动画调用名称 */
animation-name: move;
/* 动画花费时长 */
animation-duration: 2s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 动画等待多长时间执行 */
animation-delay: 2s;
/* 规定动画播放次数 infinite: 无限循环 */
animation-iteration-count: infinite;
/* 是否逆行播放 */
animation-direction: alternate;
/* 动画结束之后的状态 forward保持现状位置*/
animation-fill-mode: forwards;
}
div:hover {
/* 鼠标移入动画是否暂停或者播放 */
animation-play-state: paused;
}
它也可以简写
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否下一次逆向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode
简写没有animation-paly-state，因为它通常需要鼠标等配合使用
3D
先来说一下此时页面的三维坐标系
- x轴：还是水平向右（正值方向）
- y轴：竖直向下（正值方向）
- z轴：垂直于屏幕向外（正值方向）
透视属性perspective
透视属性也被称为视距
进一步解释（自己刚学的时候做的笔记...）
故可以看出来，没有透视就没有c3的3D效果。注意透视属性需要写在被视察元素的父盒子上面
3D呈现 transfrom-style
用来 控制子元素是否开启三维立体环境
属性：transform-style
transform-style: flat代表子元素不开启3D立体空间，默认的transform-style: preserve-3d子元素开启立体空间
位移、旋转
位移
transform: translateX(100px)： x 轴上移动transform: translateY(100px)： y 轴上移动transform: translateZ(100px)： z 轴上移动- 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充；且各个值之间使用逗号隔开
旋转
transform: rotateX(45deg)– 沿着 x 轴正方向旋转 45 度transform: rotateY(45deg)– 沿着 y 轴正方向旋转 45 度transform: rotateZ(45deg)– 沿着 z 轴正方向旋转 45 度transform: rotate3d(x, y, z, 45deg)– 沿着自定义轴旋转 45 deg 为角度
3D中的旋转方向
因为transform: rotateY(360deg)360deg为正值。即认为是Y轴的正方向，如上图大拇指指向轴的方向。其他手指的方向即是盒子的旋转方向。
即transform: rotateY(360deg)开始时是先向屏幕内旋转的。看一下效果图
自定义旋转轴
语法
transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度。
解释：
这里的x，y，z均是矢量。它们的值一般不是0就是1 。
如：transform: rotate3d(1, 0, 0, 180deg) 即为 沿着 x 轴旋转 180deg
再如：
transform: rotate3d(1, 1, 0, 180deg) – 沿着对角线旋转 180deg
图解：
布局
先从flex说起
主轴
flex布局中。分为主轴和侧轴俩个方向，也即为我们传统布局中的x轴y轴。子元素项目按照这俩个参考坐标系进行位置排列
默认：
- 默认主轴方向就是 x 轴方向，水平向右
- 默认侧轴方向就是 y 轴方向，水平向下 设置主轴的基本语法：
flex-direction :row;
其他属性值
| 属性值 | 描述 | |
|---|---|---|
| row | 从左到右 | |
| row-reverse | 从右到左 | |
| column | 从上到下 | |
| column-reverse | 从下到上 |
栗子
div {
display: flex;
flex-direction: row-reverse;
width: 500px;
height: 500px;
border: 1px solid red;
}
span {
margin: 0 10px;
width: 100px;
height: 100px;
background-color: aquamarine;
}
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
设置成column的效果图：
设置主轴上的子元素排列方式justify-content
| 属性值 | 描述 |
|---|---|
| flex-start | 从头开始 |
| flex-end | 从尾部开始 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先贴两边在平分剩余空间 |
center效果
space-between效果
flex-wrap设置是否换行
flex的显示模式中，一个宽500的div盒子里面放了6个均为宽100的span盒子（暂时不考虑边框）。按照传统模式想，一行放不开肯定会是掉到下一行的。但是看效果：
默认情况下，项目都排在一条线（又称”轴线”）上。flex布局中默认是不换行的。它会自动压缩到一行去显示。
想要换行
属性：flex-wrap
属性值
nowrap不换行wrap换行
align-items 设置侧轴上的子元素排列方式（单行 ）
该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
| 值 | 描述 |
|---|---|
| flex-star | 从头部开始 |
| flex-end | 从尾部开始 |
| center | 居中显示 |
| stretch | 拉伸 |
设置主轴居中侧轴居中
align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行）
| 值 | 描述 |
|---|---|
| flex-start | 从头排列 |
| flex-end | 从尾排列 |
| center | 居中 |
| space-around | 平分空间 |
| space-between | 先贴两头再平分空间 |
| stretch | 设置子项元素高度平分父元素高度 |
设置为从头排列
flex属性
flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
align-self控制子项自己在侧轴上的排列方式
直接给项目添加属性，控制它在侧轴上的排列方式。它们的默认值为 auto，表示继承父元素的 align-items 属性。
举例如让上图第三号span盒子侧轴居中 代码片段：
div span:nth-child(3) {
flex: 2;
align-self: center;
}
常用属性值
- flex-start
- flex-end
- center
order 属性定义项目的排列顺序
和z-index相似，只不过z-index是数大的显示遮住数字小的。而order是数字越小排列顺序越往前。
举例：
三栏布局
三栏布局一般多指左右两栏宽度固定，中间栏宽度自适应的布局。在能实现效果的情况下，尽可能的中间栏内容优先渲染。
实现
-
绝对定位布局
-
左右浮动布局
-
圣杯布局
-
双飞翼布局
-
Flex布局
-
Grid布局
-
table-cell布局
代码示例：
圣杯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圣杯布局</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
overflow: hidden;
padding: 0 100px 0 100px;
}
.main,
.left,
.right {
position: relative;
float: left;
}
.left {
width: 100px;
height: 100px;
background: red;
margin-left: -100%;
left: -100px;
}
.right {
width: 100px;
height: 100px;
background: green;
margin-left: -100px;
right: -100px;
}
.main {
background: blue;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
双飞翼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>双飞翼</title>
<style>
.container {
overflow: hidden;
}
.main,
.left,
.right {
float: left;
height: 100px;
}
.left {
width: 100px;
background: red;
margin-left: -100%;
}
.right {
width: 100px;
background: blue;
margin-left: -100px;
}
.main {
width: 100%;
background: aqua;
}
.inner {
margin: 0 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
实现等高布局(常用)
- 使用负margin-bottom和正padding-bottom对冲实现
.选择器 {
float: left;
padding-bottom: 9999px;
再拉回来
margin-bottom: -9999px;
}
父{
overflow: hidden;
}
-
模仿table布局（父：display: table; 子： display: table-cell;）
-
flex布局
-
grid布局
复习一下媒体查询
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
基本使用
@media mediatype and|not|only (media feature) { }
mediatype 用于指定媒体类型
常用值:
- all：用于所有设备
- print：用于打印机和打印预览
- scree：用于电脑屏幕，平板电脑，手机等
and|not|only关键字
- 关键字，and、not、only。关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件 - and：可以将多个媒体特性连接到一起，相当于“且”的意思。 - not：排除某个媒体类型，相当于“非”的意思，可以省略。 - only：指定某个特定的媒体类型，可以省略。
最后的小括号里面的是媒体特性
常用值:
- width定义输出设备中页面可见区域的宽度
- min-width定义输出设备中页面最小可见区域宽度
- max-width定义输出设备中页面最大可见区域宽度
栗子
@media screen and (max-width: 540px) {
body {
background-color: aqua;
}
}
@media screen and (min-width: 540px) {
body {
background-color: red;
}
}
@media screen and (min-width: 1000px) {
body {
background-color: yellow;
}
}
