前端三剑客部分易忘知识点（无js）

fyj
76 阅读7分钟

前端三剑客部分易忘知识点（无js）

一、HTML

表单标签

<label>标签

  • <label>标签为input元素定义标签

  • <label>标签用于绑定一个表单元素

超链接标签

分类

  1. 外部链接
  2. 内部链接
  3. 空链接
  4. 下载链接
  5. 网页元素链接
  6. 锚点链接

二、CSS

引入方式

外部样式表

<link rel="stylesheet" href="css文件路径">

三大特性

层叠性

继承性

行高的继承
body {
	font:12px/1.5 Microsoft YaHei;
}
  • 行高可以跟单位也可以不跟
  • 如果子元素没有设置行高，则会继承父元素的行高1.5
  • 此时子元素的行高是：当前子元素的文字大小*1.5
  • 这样写法的最大优势是：里面子元素可以根据自己文字大小自动调整行高

优先级

字体属性

字体有哪些属性？

  1. 字号
  2. 字体
  3. 字体粗细
  4. 字体样式
  5. 字体连写

字体复合属性如何写？需要注意的细节？

  1. 字体连写是有顺序的，不能随意换位置
  2. 字号和字体必须同时出现

文本

文本属性

文本有哪些属性？
  1. 颜色
  2. 对齐
  3. 缩进
  4. 修饰（下划线）
  5. 行高

文本阴影

语法：
text-shadow: h-shadow v-shadow blur color
属性：
  1. 水平阴影（必需）
  2. 垂直阴影（必需）
  3. 模糊距离
  4. 阴影的颜色

背景

背景的复合写法

  • 背景颜色
  • 背景图片地址
  • 背景平铺
  • 背景图片滚动
  • 背景图片位置

盒子模型

内边距

注意

如果盒子本身没有设置width/height，则此时padding不会撑开盒子大小

外边距

垂直外边距的合并
相邻块元素

问题：当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和而是取两个值中的较大者

解决方案：尽量只给一个盒子添加margin值

嵌套块元素

问题：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

  1. 可以为父元素定义上边框
  2. 可以为父元素定义上内边距
  3. 可以为父元素添加overflow:hidden

盒子阴影

语法：
box-shadow: h-shadow v-shadow blur spread color inset
有哪些属性？
  1. 水平阴影（必需）
  2. 垂直阴影（必需）
  3. 模糊距离
  4. 阴影的尺寸
  5. 阴影的颜色
  6. 将外部阴影改为内部阴影

浮动

清除浮动

为什么要清除浮动？
  1. 父级没有高度
  2. 子盒子浮动了
  3. 影响下面布局了
清除浮动的方法？
  1. 选择器 {
    clear: both;
} //同时清除左右两侧浮动的影响

  2. 额外标签法

  3. 父级overflow:hidden;

  4. 父级after伪元素（兼容性问题）

  5. 父级双伪元素（兼容性问题）

定位

绝对定位的盒子居中

水平居中
left: 50%;
垂直居中
margin-left: -自身宽度一半;

不透明度 / 透明度

属性的取值范围为 0.0-1.0。值越低，越透明

垂直导航栏

示例：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

/* 鼠标悬停时改变链接颜色 */
li a:hover {
  background-color: #555;
  color: white;
}

.active {
  background-color: #4CAF50;
  color: white;
}

水平导航栏

示例：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

2D转换

属性

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

移动 translate

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。

语法：
transform:translate(x,y); //或者分开写
transform: translatex(n);
transform:translateY(n);
重点：
  1. 定义2D转换中的移动，沿着X和Y轴移动元素
  2. translate最大的优点：不会影响到其他元素的位置
  3. translate中的百分比单位是相对于自身元素的translate:(50%,50%) （使盒子水平居中）
  4. 对行内标签没有效果

3D转换

属性

  • rotateX()
  • rotateY()
  • rotateZ()

Flex布局

Flex布局中有两个主要的概念，即容器和项目。容器是指应用Flex布局的父元素，而项目是指容器内的子元素。

属性：

  1. display属性：要使用Flex布局，需要将容器的display属性设置为flex或inline-flex。这样，容器就成为了一个Flex容器。
  2. flex-direction属性：该属性用于指定Flex容器中项目的排列方向。常用的取值有row（水平方向，从左到右）、row-reverse（水平方向，从右到左）、column（垂直方向，从上到下）和column-reverse（垂直方向，从下到上）。
  3. justify-content属性：该属性用于指定Flex容器中项目在主轴（水平方向）上的对齐方式。常用的取值有flex-start（靠左对齐）、flex-end（靠右对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）和space-around（每个项目两侧的间隔相等）。
  4. align-items属性：该属性用于指定Flex容器中项目在交叉轴（垂直方向）上的对齐方式。常用的取值有flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、baseline（基线对齐）和stretch（拉伸对齐）。
  5. flex属性：该属性用于指定Flex项目的伸缩比例。默认情况下，所有项目的伸缩比例都为1，即平均分配剩余空间。可以通过设置不同的值来调整项目的伸缩比例。
  6. flex-wrap属性：该属性用于指定Flex容器中项目是否换行。常用的取值有nowrap（不换行）和wrap（换行）。
  7. align-content属性：该属性用于指定多行项目在交叉轴上的对齐方式。只有在容器有多行时才会生效。常用的取值有flex-start（靠上对齐）、flex-end（靠下对齐）、center（居中对齐）、space-between（两端对齐，行之间间隔相等）和space-around（每行两侧的间隔相等）。

Grid布局

一种强大的二维布局系统，可以将页面划分为行和列，并通过定义网格单元格来放置元素。

属性：

  1. 容器属性：

    • display: grid;：将元素的显示类型设置为Grid布局。 -
    • grid-template-columns：定义网格的列数和宽度。
    • grid-template-rows：定义网格的行数和高度。
    • grid-gap：定义网格单元格之间的间隔。

  2. 项目属性：

    • grid-column：指定元素跨越的列数或位置。
    • grid-row：指定元素跨越的行数或位置。
    • grid-area：指定元素跨越的区域。
    • grid-column-start、grid-column-end、grid-row-start、grid-row-end：分别指定元素的起始和结束位置。

  3. 自动布局：

    • grid-auto-columns：定义自动布局时生成的列的宽度。
    • grid-auto-rows：定义自动布局时生成的行的高度。
    • grid-auto-flow：定义自动布局时元素的放置顺序。

  4. 对齐方式：

    • justify-items：定义元素在网格单元格中的水平对齐方式。
    • align-items：定义元素在网格单元格中的垂直对齐方式。
    • justify-content：定义网格内容在容器中的水平对齐方式。
    • align-content：定义网格内容在容器中的垂直对齐方式。

  5. 响应式布局：

    @media 查询：可以根据不同的屏幕尺寸应用不同的Grid布局规则。

avatar
文章
阅读
粉丝