王为知——前端第二次培训预习

最新推荐文章于 2024-09-13 23:32:49 发布

Oliveira726

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量760

点赞数 23

文章标签：前端

本文链接：https://blog.csdn.net/2302_80287128/article/details/137117218

版权

本文详细介绍了CSS中的盒子模型、伪元素选择器、边框样式、外边距、尺寸计算、元素溢出控制、浮动和flex布局、定位技术，以及CSS精灵和字体图标的应用。

摘要由CSDN通过智能技术生成

一、盒子模型

1、伪元素选择器

作用：创作虚拟元素（伪元素），用来摆放装饰性的内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

注意：

必须设置content:" "属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
伪元素默认是行内显示模式
权重和标签选择器相同

.head a::before {
    content: "<";
}
.head a::after {
    content：">"
}

2、盒子模型——组成

组成部分：

内容区域——width,height
内边距——padding（内容与盒子边缘）
边框线——border：

border-width

border-style（必需）：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-color

各个边框：

border-top-style: dotted;（上边框：点状）
border-right-style: solid;（右边框：实线）
border-bottom-style: dotted;（下边框：点状）
border-left-style: solid;（左边框：实线）

4. 外边距——margin（盒子外面）

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: lightgrey;
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
</style>
</head>
<body>
<div>此文本是盒子里的内容。我们添加了 50px 的内边距，20px 的外边距和 15px 的绿色边框。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。此文本是盒子里的内容。</div>
</body>
</html>

3、尺寸计算

默认情况：

盒子尺寸=内容尺寸+border尺寸+内边距尺寸
结论：给盒子加border / padding 会撑大盒子
解决： 手动做减法：减掉border / padding 的尺寸；内减模式：box-sizing：border-box

4、元素溢出

作用：控制溢出元素的内容的显示方式
属性名：overflow
属性值：
属性值 效果
hidden 溢出隐藏
scroll 溢出滚动（无论是否溢出，都显示滚动条位置）
auto 溢出滚动（溢出才显示滚动条位置）

div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: auto;
}

5、外边距问题

1、合并现象

场景：垂直排列的兄弟元素，上下margin会合并
现象：取两个margin中的较大值生效

2、塌陷问题

场景：父子级的标签，子级的添加上外边距会产生塌陷问题
现象：导致父级一起向下移动
解决方法：取消子级margin，父级设置padding；父级设置overflow：padding；父级设置border-top。

6、行内元素-内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置
解决方法：给行内元素添加line-height可以改变垂直位置

7、圆角边框

作用：设置元素的外边框为圆角
属性名：border-radius
属性值：数字+px/百分比
提示：属性值是圆角半径

p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}

分类：

正圆形状：给正方形盒子设置圆角属性值为宽高的一半/50%
胶囊形状：给长方形盒子设置圆角属性值为盒子高度的一半

p.round1 {
  width:200px;
  height:200px;
  border-radius: 50%;
  border:solid red;
}

p.round2 {
  width:200px;
  height:80px;  
  border-radius:40px;
  border:solid red;
}

8、阴影

作用：给元素设置阴影效果
属性名：box-shadow
属性值：x轴偏移量 y轴偏移量模糊半径扩散半径颜色内外阴影
注意：x，y轴偏移量必须书写；默认是外阴影，内阴影需要添加inset

二、浮动，flex

1、标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块级元素独占一行，行内元素可以一行显示多个。

2、浮动

1、基本使用与布局

作用：让块元素水平排列
属性名：float
属性值：left：左对齐；right：右对齐
特点：1、顶对齐 2、具备行内块特点 3、脱标
注意：如果父级的宽度不够，浮动的盒子会掉下来。（指定消除margin）

2、清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）；
解决方法：清除浮动（清楚浮动带来的影响）

3、flex布局

1、组成

组成部分：弹性容器，弹性盒子
主轴：默认在水平方向（弹性盒子沿着主轴方向排列）
侧轴/交叉轴：默认在垂直方向

2、主轴与侧轴对齐方式

主轴：属性名：justify-content

侧轴：属性名：

align-items：当前弹性容器内所以弹性盒子的侧轴对齐方式（给弹性容器设置）

align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

3、修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向
属性名：felx-direction

4、弹性伸缩比

作用：控制弹性盒子的主轴方向尺寸。
属性名：flex。
属性值：整数数字，表示占用父级剩余尺寸的份数。
在默认情况下：主轴方向尺寸是靠内容撑开，侧轴默认拉伸。

5、弹性换行与行对齐方式

特点：弹性盒子换行；弹性盒子可以自动挤压或者拉伸，默认情况下，所以弹性盒子会在一行内显示
属性名：flex-wrap
属性值：
wrap：换行
nowrap:不换行（默认）
行对齐方式（对单行弹性盒子不生效）
属性名：align-content
属性值：

三、定位，精灵，字体图标

1、定位

作用：灵活改变盒子在网页中的位置
实现：

定位模式：position
边偏移：设置盒子的位置left，right，top，bottom。

相对定位：

position：relative
特点：改变位置的参照物是原来的位置。不脱标，只占位，标签显示模式特点不变

绝对定位：

position：absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：

脱标，不占位
参照物：离我最近的已经定位的祖先元素；如果所以的祖先元素没有定位，参照浏览器改变其位置；
显示模式特点改变：宽高生效（具备了行内块的特点）

定位居中

实现步骤：

绝对定位（如果是相对于父级元素那就是子绝父相，如果是相对于浏览器，那就是绝对定位，相对于浏览器的绝对定位）
水平垂直边偏移均为百分之五十(left right top bottom)
子级向左，上移动自身尺寸的一半（法1.用margin外边距)

左，上的外边距为-尺寸的一半
transform：translate（-50%，-50%）

固定定位

position：fixed
特点：

脱标，不占位
改变位置的参照物是浏览器的窗口
显示模式特点是行内块的特点

定位-堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上
作用：设置定位的元素的层级顺序，改变定位元素的显示顺序
z-index：取值是整数，默认是0，取值越大显示顺序越上面（就压在谁上面）

定位总结

2、CSS精灵

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加background-position属性，改变背景图位置

3.1使用pxcook测量小图片左上角坐标

3.2取负数坐标为background-position属性值（向左上移动图片位置）

3、字体图标

字体图标：展示的是图标，本质是字体
作用：在网页中添加简单的，颜色单一的小图标
优点

灵活性
轻量性
兼容性
使用方便

字体图标-下载字体

字体图标-使用字体

引入字体样式表（iconfont.css）
标签使用字体图标类名

iconfont：字体图标基本样式（字体名，字体大小等等）
icon-xx:图标对应的类名

字体图标-上传矢量图

Oliveira726

关注

23
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）