整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
果图:
核心点:
宽度自适应 width
默认情况下, 块级元素不设置宽度, 默认为整个屏幕宽度或者和父级同宽
如果元素脱离了文档流(浮动或者定位), 那么元素的宽度由元素的内容决定相关介绍: MDN
resize 生效的条件: 不支持内联元素; 块级元素，需要overflow属性的计算值不是visible。整体布局
<div class="container">
<!-- resizable 用于拉伸的工具 -->
<div class="resizable"></div>
<!-- content 要展示的内容区域 -->
<div class="content">content</div>
</div>基础知识, 拉伸区域的实现, 右下角出现可拉伸图标
.content {
width: 200px;
height: 200px;
resize: horizontal;
cursor: ew-resize;
overflow: hidden; // 必须要配合overflow来使用resize, 否则拉伸图标无法显示
border: 1px solid red;
}
<div class="content">content</div>
限制拉伸尺寸
通过设置min-width、min-height、max-width和max-height可以限制拉伸尺寸。所有代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: relative;
/* 脱离文档流 */
float: left;
}
.resizable {
width: 200px;
height: 200px;
overflow: scroll;
resize: horizontal;
cursor: ew-resize;
opacity: 0;
min-width: 200px; // 盒子宽度最小为200px
}
/* 更改拖拽图标的大小和父容器一样大 */
.resizable::-webkit-scrollbar {
width: 20px;
height: 200px;
}
/* 使用定位, 将容器定位到父容器的正中间, 跟着父容器的大小改变而改变 */
.content {
margin: 0;
height: 200px;
position: absolute;
top: 0;
/* 留出5px为了鼠标放上去可以显示拖拽 */
right: 5px;
bottom: 0;
left: 0;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<!-- resizable 用于拖拽的工具 -->
<div class="resizable"></div>
<!-- content 要展示的内容区域 -->
<div class="content">content</div>
</div>
</body>
</html>
层级图
调查了身边五六年经验以上的几个前端同学和同事，尽然发现绝大部分人都不知道，当然，在看到这个文章之前，我也不知道这个，平时虽然都一直在做web前端开发，但真没涉及到这块，或者说涉及到了，也解决了，但是还真没探究过这个问题，你是否躺枪了呢？
这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
下面是一个实例演示代码，你可以调整容器的宽度，但你会发现，黄块块的padding-bottom的距离也会随之宽度而变大或变小。
HTML代码
<div class="wrapper" id="w">
<div class="box" id="b"></div>
</div>
<input type="range" min="120" max="400" value="400" class="range" id="r">
<output>宽度是: <span id="op">400px</span></output>
<output>黄块块的Padding bottom是:<br><span id="op2">10%</span></output>
CSS代码
body {
font-family: Arial, sans-serif;
padding-top: 30px;
text-align: center;
}
.wrapper {
width: 400px;
margin: 0 auto;
border: solid 1px black;
}
.box {
width: 100px;
height: 100px;
background: gold;
margin-left: auto;
margin-right: auto;
padding-top: 10%;
padding-bottom: 10%;
margin-bottom: 5%;
}
.range {
display: block;
margin: 20px auto;
}
output {
text-align: center;
display: block;
font-weight: bold;
padding-bottom: 20px;
}
output span {
font-weight: normal;
}
上面的代码中，我们对内部子元素声明了3个竖向的距离，都是百分比形式。当移动滑块时，我们的js代码只需修改了容器的宽度。但是，这个这三个属性高度都跟随着变化，可以看出，它们的百分比计算是基于容器的宽度，而不是高度的。
切图网致力于web前端技术开发，关注用户体验，关注移动web前端，响应式，微场景等技术，如果你对此感兴趣请加公众微信账号：qietuwang
天我们说下HTML标签中的div、span和图像标签。其实div和span是上一节就要讲的标签内容，但是当时时间比较晚了，就没有说。
<div>和<span>是没有语义的，就是一个盒子，用来装内容的。这和android开发中的font很像，也是一个个的盒子，将内部包起来。可以这么来写:
<div>这是头部</div> <span>我是内容</span> 两个都是双标签。
div是division的缩写，表示分割分区(竖着); span意为跨度、跨距(横着)。div单独占一行，实例如下: 理解为一个大盒子
看下HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一个div标签，我自己独占一行</div>
<div>我是一个div标签，我自己独占一行</div>
</body>
</html>
可以看到，写了两个<div>标签，一个占一行
<span>一行可以放很多个标签，理解为 小盒子，举例如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一个div标签，我自己独占一行</div>
<div>我是一个div标签，我自己独占一行</div>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
</body>
</html>
效果如下:
接下来说一个很重要的标签---图像标签
HTML标签中，使用<img>标签用于定义HTML页面中的图像，是一个单标签。img是image的缩写，src是<img>标签的必须属性，用于指定图像文件的路径和文件名。属性，指的是属于这个图像标签的特性。对于图片，需要将图片和html文件放到一起。
代码图示：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<!-- <img src="HTML5.jpeg"> -->
</body>
</html>
效果如下:
如果我们再加入同样的一行代码，看看显示(加上换行)
代码如图:
代码内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<img src="HTML5.jpeg">
</body>
</html>
效果如下:
可以看到<img src="xxx"> 后面不写 / 也是可以的，<br />后面不写斜杠也行，即使都是用单个的情况。src是source的缩写。
接下来说下图像标签的其他属性:
alt 替换文本，图像不能显示的文字
title 文本，提示文本，鼠标放到图像上，显示的文字，类似于 hover
width 像素，设置图像的宽度(和android中的差不多)
height 像素，设置图像的高度(和android中的差不多)
border 像素，设置图像的边框粗细
具体我们看下实例:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替换文本，图像显示不出来的时候用文本代替<br />
<img src="HTML5.jpeg" alt="图像不展示时，使用文本展示">
</body>
</html>
看下展示效果:
发现 alt后替换文本并没有起作用，图像还是显示的。这是为什么呢？
其实原因很简单，就是先判断src后的图像是否存在，如果存在，就展示图像，如果不存在，就展示文本。上面语句中，图像的地址是正确的，所以会展示图像。可以将图像地址进行修改。我们再试下
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替换文本，图像显示不出来的时候用文本代替<br />
<img src="HTML51.jpeg" alt="图像不展示时，使用文本展示">
</body>
</html>
我们来看看效果，alt后的文本是否能展示
说明我们的测试是正确的。
2.title 提示文本
先看效果:
看下代码和代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
title提示文本<br />
<img src="HTML5.jpeg" title="鼠标hover上，就展示了" />
<br />
</body>
</html>
好的，今天先到这里，一会我们继续。
*请认真填写需求信息，我们会在24小时内与您取得联系。
