蓝旭第二轮培训预习博客

已于 2024-03-27 19:47:02 修改
阅读量736 收藏 18
点赞数 19
文章标签： html css 前端
于 2024-03-27 19:44:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83677222/article/details/137087241
版权

一、盒子模型

1.盒子的组成

content(内容) height(高度) width(宽度) padding(内边距) margin(外边距) border(边框)

下面是创建一个简单盒子的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: antiquewhite;
            height: 200px;
            width: 200px;
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>你好蓝旭！</div>
</body>
</html>

效果如下：

img

1.1盒子类别

页面上 区域、图片、导航、列表、段落等都可以是盒子。

1.2盒子的宽和高

一个盒子的实际宽度和高度：content+padding+border (margin不会撑大盒子)

2.外边距margin

2.1表示方法

margin的表示方法：
1. margin: 1px；  该盒子的上下左右外边距均为1px
2.margin: 1px 2px 1px 3px; 分别对应盒子的上、右、下、左外边距
3.margin: 1px 2px; 盒子的上下外边距为1px 左右外边距为2px
4.margin: 1px 2px 3px; 盒子的上外边距为1px 下外边距为3px 左右外边距为2px

2.2 margin的合并

垂直方向合并，水平方向不合并 (哪一个盒子的外边距更高 则优先显示)

2.3区域的水平居中

margin: 0 auto;

3.清除默认样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <h1>你好卓音！</h1>
</body>
</html>

4.外边距问题——塌陷问题

场景：父子级的标签，子级的添加上外边距，会产生塌陷问题。

**现象：**导致父级一起向下移动

解决方法：

1.取消子级margin，父级设置padding(需要注意的是：设置padding会撑大盒子，所以要设置box-sizing:border-box;)

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .father{
        background-color: orange;
        width: 200px;
        height: 200px;
        padding: 20px;
       }
       .son{
        background-color: pink;
        width: 100px;
        height: 50px;
       }
    </style>
</head>
<body>
    <div class="father">
    <div class="son"></div>
    </div>
</body>
</html>

效果如下：

img

2.父级设置overflow:hidden;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .father{
        background-color: orange;
        width: 200px;
        height: 200px;
        overflow: hidden;
       }
       .son{
        background-color: pink;
        width: 100px;
        height: 50px;
        margin: 20px;
       }
    </style>
</head>
<body>
    <div class="father">
    <div class="son"></div>
    </div>
</body>
</html>

3.父级设置border-top

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .father{
        background-color: orange;
        width: 200px;
        height: 200px;
        border-top: 1px solid #000;
       }
       .son{
        background-color: pink;
        width: 100px;
        height: 50px;
        margin: 20px;
       }
    </style>
</head>
<body>
    <div class="father">
    <div class="son"></div>
    </div>
</body>
</html>

5.行内元素——内外边距问题

场景：行内元素添加 margin和padding，无法改变元素的垂直位置

**解决方法：**给行内元素添加line-height可以改变垂直位置

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: pink;
            width: 200px;
            height: 200px;
        }
       span{
        margin: 50px;
        line-height: 200px;
       }
    </style>
</head>
<body>
    <div>
    <span>你好蓝旭！</span>
</div>
</body>
</html>

效果如下：

img

6.overflow属性

当盒子内容溢出盒子框时，可用overflow属性取值

1.hidden ：超出部分不可见

效果如图：

img

2.scroll：显示滚动条(无论是否溢出，都显示滚动条)

效果如图：

img

3.auto:如果有超出部分，显示滚动条

7.圆角和阴影

7.1圆角

**作用：**设置元素的外边框为圆角

属性名：border-radius

**属性值：**数字+px / 百分比 (半径)

7.2圆角的表示方法

对角取值相同

border-radius的表示方法：
1.border-radius: 1px；四个角的半径均为1px
2.border-radius: 1px 2px 1px 3px; 分别对应左上圆角半径为1px 右上为2px 右下为1px 左下为3px
3.border-radius: 1px 2px; 左上和右下圆角半径为1px 右上和左下圆角半径为2px
4.border-radius: 1px 2px 3px; 左上圆角半径为1px 右下半径为3px 右上和左下半径为2px

7.3圆角常见应用

1.**正圆形状：**给正方形盒子设置圆角属性值为宽高的一半

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: orange;
            width: 200px;
            height: 200px;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div>
</div>
</body>
</html>

效果如下：

img

2.**胶囊形状：**给长方形盒子设置圆角属性值为盒子高度的一半

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: pink;
            width: 300px;
            height: 200px;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div>
</div>
</body>
</html>

效果如下：

img

7.4阴影

**作用：**给元素设置阴影效果

属性名：box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影 (前两个是必须要书写的)

内外阴影默认是外阴影，内阴影需要添加inset

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: black;
            background-color: pink;
            width: 300px;
            height: 200px;
            box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div>
        你好蓝旭！
</div>
</body>
</html>

效果如下：

img

二、Flex布局(弹性布局)

1.Flex布局介绍和组成

1.1Flex布局介绍

flex布局又称弹性布局，提供了更强的空间分布和对齐能力，flex模型不会产生浮动布局中的脱标现象，布局网页更简单、更灵活。

1.2flex-组成

1.设置方式：给父元素设置 display:flex,子元素可以自动挤压或拉伸

2.组成部分：弹性容器、弹性盒子、主轴：默认水平方向、侧轴：默认在垂直方向。

2.flex布局

描述属性
创建flex容器display:flex
主轴对齐方式justify-content
侧轴对齐方式align-items
某个弹性盒子侧轴对齐方式align-self
修改主轴方向flex-direction
弹性伸缩比flex
弹性盒子换行flex-wrap
行对齐方式align-content

3.主轴对齐方式

属性名：justify-content

属性值效果
flex-start默认值，弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列
center沿主轴居中排列
space-between沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly沿主轴均匀排列，弹性盒子与容器之间间距相等

4.侧轴对齐方式

属性名：

1.align-items：当前弹性容器内所有弹性盒子的侧对齐方式(给弹性容器设置)

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

属性值效果
stretch弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center弹性盒子沿侧轴线居中排列
flex-start弹性盒子从起点开始依次排列
flex-end弹性盒子从终点开始依次排列

5.修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值：column (垂直方向，从上向下)

6.弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：整数数字 (表示占用父级剩余尺寸的份数)

默认情况下，主轴方向尺寸是靠内容撑开，侧轴默认拉伸

7.弹性盒子换行与行对齐方式

7.1弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性名：flex-wrap

属性值效果
wrap换行
nowrap不换行(默认效果)

7.2行对齐方式

属性名：align-content

属性值效果
flex-start默认值，弹性盒子从起点开始排列
flex-end弹性盒子从终点开始排列
center弹性盒子沿主轴居中排列
space-between弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

三、定位

1.关于定位

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

实现： 定位模式：position

​ 边偏移：设置盒子的位置 left right top bottom

2.相对定位

position:relative

top left right bottom 设置偏移量

特点：

1.改变位置的参照物是自己原来的位置

2.不脱标，占位

3.标签显示模式特点不变

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tupian {
            position: relative;
            left:100px;
            top:70px;
            background-color: orange;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
<p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
<div class="tupian"></div>
<p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
<p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
    </div>
</body>
</html>

效果如下：

img

3.绝对定位

position:absolute

top left right bottom 设置偏移量

使用场景：子级绝对定位，父级相对定位 (子绝父相)

特点：

1.脱标，不占位

2.参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改位置

3.显示模式特点改变，宽高生效(具备了行内块的特点)

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tupian {
            position: absolute;
            left:100px;
            top:70px;
            background-color: orange;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
<p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
<div class="tupian"></div>
<p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
<p>你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端你好前端</p>
    </div>
</body>
</html>

效果如下：

img

4.定位居中

实现步骤：

1.绝对定位

2.水平、垂直边偏移为50%

3.子级向左、上移动为自身尺寸的一半：

a. 左、上的外边距为尺寸的一半（负值）

b. transform:translate(-50%,-50%)

第一种方法代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tupian {
            position: absolute;
            top:50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
            background-color: orange;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="tupian">
       你好前端
    </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>Document</title>
    <style>
        .tupian {
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: orange;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="tupian">
       你好前端
    </div>
</body>
</html>

两种方法效果如下：

img

5.固定定位

position:fixed

场景：元素的位置在网页滚动时不会改变

特点：

1.脱标，不占位

2.参照物：浏览器窗口

3.显示模式特点：具备行内块特点

6.堆叠层级

z-index: 取值是整数，取值越大，显示顺序越靠上

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .first {
            position: absolute;
            z-index: 2;
            background-color: orange;
            width: 200px;
            height: 200px;
        }
        .second{
            position: absolute;
            top:100px;
            left: 100px;
            z-index: 1;
            background-color: blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body> 
    <div class="whole">
    <div class="first">
       你好前端
    </div>
    <div class="second">你好前端</div>
</div>
</body>
</html>

效果如下：

img

7.字体图标

7.1介绍

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

7.2使用字体

1.引入字体样式表 (iconfont.css)

2.标签使用字体图标类名

a. iconfont：字体图标基本样式

b. icon-xxx：图标对应类名

许的什么愿-
关注
  • 19
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
蓝旭第六次培训预习博客
2302_80162871的博客
04-27 247
JSON，全称是 JavaScript Object Notation，即 JavaScript对象标记法。（可以取代xml）
蓝旭第二次培训预习博客
2302_80162871的博客
03-31 260
运行时异常都是RuntimeException类及其子类异常，如NullPointerException、IndexOutOfBoundsException等， 这些异常是非检查型异常，程序中可以选择捕获处理，也可以不处理。从程序语法角度讲是必须进行处理的异常，如果不处理，程序就不能编译通过。1加法BigDecimal add = bigDecimal1.add(bigDecimal2);Exception是程序本身可以处理的异常，这种异常分两大类运行时异常和非运行时异常。
24春季蓝旭培训第六周预习博客
2301_80426536的博客
04-26 644
创建远程连接设置连接方式（设置连接超时时间设置响应读取时间发起请求获取请求数据关闭连接创建远程连接设置连接方式（get、post、put。。。设置连接超时时间设置响应读取时间当向远程服务器传送数据/写数据时，需要设置为当前向远程服务读取数据时，设置为true，该参数可有可无（setDoInput设置传入参数的格式:（设置参数发起请求获取请求数据关闭连接。
【蓝旭】第二周预习博客
m0_63195231的博客
04-07 607
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 java异常类和常用类 容器一、java异常类1、引入2、异常的概念3、异常的分类4、异常的捕获和处理（1）try语句（2）catch语句（3）finally语句5、使用自定义的异常总结二、Java常用类1、Object类（1）概述（2）常用方法（3）实践2、String类和StringBuffer类（1）概述（2）String类构造方法和常用方法（3）StringBuffer类常用方法（4）实践3、Math类（1）概述（2）示例（3）实.
蓝旭V6刷机工具
12-29
需要准备工具：电脑、SD卡、读卡器（支持读取SD） 1、首先下载附件中的刷机制作工具PhoenixCard_V309.rar、刷机包。 2.解压刷机制作工具PhoenixCard_V309.rar，打开里面的PhoenixCard.exe程序。...
MauiMETA工具V6
01-17
MauiMETA工具V6是一款专为MediaTek（mtk）平台设计的高级开发和调试工具。这个工具集成了射频(RF)调整和校准功能，对于开发人员和工程师来说，是进行移动设备硬件优化、性能提升以及问题排查的重要辅助手段。...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 3256
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 998
iframe 预览邮件 + 打印邮件 + 模拟滚动条
ASP.NET 生成分页 HTML 函数示例
一个九零后程序猿开发日志
07-24 238
函数会生成一个包含上一页、页码和下一页的 HTML 分页导航。
【HTML — 构建网络】HTML 入门
07-24 1171
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
IPython的HTML魔法：%%html_header命令全解析
2401_85762266的博客
07-24 1163
IPython是一个增强的Python交互式解释器，而Jupyter Notebook是一个基于Web的开源项目，允许用户创建和共享包含实时代码、方程、可视化和解释性文本的文档。HTML头部是网页文档的元数据区域，它包含了文档的标题（title）、样式表链接（link）、脚本链接（script）等信息。的使用，可以让您更灵活地定制Notebook的样式和功能，从而提供更加丰富和个性化的文档体验。命令的使用非常简单。你只需要在Notebook的单元格中输入该命令，然后写入你想要添加到头部的HTML代码即可。
HTML 基础知识
07-24 1002
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
html-docx-js和file-saver实现html导出word
FE小白的进化之路
07-24 234
【代码】html导出word。
HTML(五）——HTML区块，布局
m0_62701594的博客
07-23 483
HTML可以通过 <div> 和 <span>将元素组合起来，可以来布局，就是盒子，div是块级盒子，里面 可以放任何东西，span里面装的是文本。
HTML开发小技巧：根据用户浏览器的分辨率调整控件的大小
ioioppk的博客
07-25 551
在Html页面开发中，我们通常会用Style进行控件的宽度高度进行控件的格式设置，如果直接设置像素的话，无法根据用户的浏览器进行宽高的适配，所以我们要做到根据实际使用的浏览器进行控件大小的自动调整，以下是几种控件自动调整的方式：
HTML（六）——HTML表单和框架
m0_62701594的博客
07-23 793
HTML 表单用于收集用户的输入信息，是一个包含表单元素的区域HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。<form>元素用于创建表单，action属性定义了表单数据提交的目标 URL，method属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。<label>元素用于为表单元素添加标签，提高可访问性。<input>
HTML meta
Gary Leong
07-24 221
meta>标签用于提供html文档的元信息（metadata）。这些信息不会显示在页面上，但会被浏览器或搜索引擎用来识别页面的编码方式、关键字、描述、作者信息、刷新时间等。
HTML前端 盒模型及常见的布局 流式布局 弹性布局 网格布局
wuyujin1997的博客
07-23 329
CSS 两种盒模型 box-sizing content-box 和 border-box流式布局 flow layout弹性布局 flex layout HTML CSS网格布局 grid layout HTML CSS
html笔记
weixin_51644244的博客
07-22 2653
/</</</本地访问：file:///D:\Project\html\html01\html01/第一章.htmlhttp://https:// 加密协议网络传输协议 超文本传输协议常见的：** < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />**、等，其中 < span > 标签是最典型的行内元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值