HTML小白入门基础_8

最新推荐文章于 2024-07-10 01:10:22 发布
最新推荐文章于 2024-07-10 01:10:22 发布
阅读量84 收藏
点赞数 1
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52612800/article/details/118658737
版权

前面

本篇内容开头两个是关于两个CSS的小技巧，其余部分都是关于弹性盒的使用及内部元素的安排；

内容

第一个是关于CSS部分的内容，用来设置当浏览器页面宽度小于一个数值是用什么用的样式或者页面宽度大于一个数值用什么样的样式。

<style>
	@media (max-width: 100px){
		p{
			font-size:100px;
		}
	}
</style>
<p>看看我的不同变化

在这里插入图片描述
在这里插入图片描述
当最大宽度超过100px时显示下面的效果，小于100px时显示上面的效果。

下一实现的让一张图片最页面大小变化而变化。
设置图片最大宽度为100%且高度为自动即可。

<style>
	img{
	width: 600px;
	}
	.img-s{
	 max-width: 100%;
     height: auto;
	}
</style>
<img class="img-s" src="https://images.pexels.com/photos/8647586/pexels-photo-8647586.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">

在这里插入图片描述
下面介绍几个单位 vw（百分比宽度） vh（ 百分比高度) vmax（浏览器宽度或高度较大的那个） vmin（浏览器高度或宽度最小的那个）

<style>
	p{
	width:50vw;
	}
</style>
<p>这是一段很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文字

在这里插入图片描述
在这里插入图片描述
下一个是创建一个弹性容器，用来承载它所有的子标签，对我来说弹性容器就是一个 div 标签，将div所有的东西都装到这个容器里。

<style>
  #box-container {
    height: 500px;
    display:flex;
  }

  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
弹性容器大约如红框所示那么大，两个框高度占一半，宽度各占一半。

下一个属性是 flex-direction，他有两个备选值row-reverse、column-reverse
默认是第一个横式排列，第二个是竖式排列；

<style>
  #box-container {
    display: flex;
    height: 500px;
	flex-direction:column-reverse;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
下面的属性是 justify-content，它用来控制容器内元素的布局，备选属性有：center，flex-start，flex-end，space-between，space-around，
space-evenly；
第一种：沿着容器的水平线的中间布局；
第二种：从水平线的开始（左边）开始布局；
第三种：从水平线的结束（右边）开始布局；
第四种：第一块和最后一块放在边缘中间空出布局；
第五种：均匀分块，每个内容都占据相同大小的布局；
第六种：除去内容外的部分均匀划分。

<style>
  .test-1 {
    background: gray;
    display: flex;
    height: 50px;
    justify-content:center;
  }
  .test-2 {
    background: gray;
    display: flex;
    height: 50px;
    justify-content:flex-start;
  }
  .test-3 {
    background: gray;
    display: flex;
    height: 50px;
    justify-content:flex-end;
  }
  .test-4 {
    background: gray;
    display: flex;
    height: 50px;
    justify-content:space-between;
  }
  .test-5 {
    background: gray;
    display: flex;
    height: 50px;
    justify-content:space-around;
  }
  .test-6 {
    background: gray;
    display: flex;
    height: 50px;
    justify-content:space-evenly;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>
<div class="test-1">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<br>
<div class="test-2">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<br>
<div class="test-3">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<br>
<div class="test-4">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<br>
<div class="test-5">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>
<br>
<div class="test-6">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述

一共六行，对应六种效果。

上面的效果对应的是横轴，对于竖轴也可以实现类似的布局。
使用的属性是 align-items，他有以下几个备选值：center，flex-start，
flex-end，stretch，baseline.
第一种：沿着容器的竖直线的中间布局；
第二种：从竖直线的开始（左边）开始布局；
第三种：从竖直线的结束（右边）开始布局；
第四种：自动适应拉伸，也是默认模式
第五种：按字的水平线对齐。

<style>
  .test-1 {
    background: gray;
    display: flex;
    height: 100px;
    align-items:center;
  }
  .test-2 {
    background: gray;
    display: flex;
    height: 100px;
    align-items:flex-start;
  }
  .test-3 {
    background: gray;
    display: flex;
    height: 100px;
    align-items:flex-end;
  }
  .test-4 {
    background: gray;
    display: flex;
    height: 100px;
    align-items:stretch;
  }
  .test-5 {
    background: gray;
    display: flex;
    height: 100px;
    align-items:baseline;
  }
  .test-6 {
    background: gray;
    display: flex;
    height: 100px;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 10px;
  }

  #box-2 {
    background-color: orangered;
    width: 200px;
    font-size: 15px;
  }
</style>

<div class="test-1">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>
<br>
<div class="test-2">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>
<br>
<div class="test-3">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>
<br>
<div class="test-4">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>
<br>
<div class="test-5">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>
<br>
<div class="test-6">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>

在这里插入图片描述

第六个没有设置属性，使用的是默认属性。

下一个属性是 flex-wrap，它有三个可选项：nowrap，wrap，wrap-reverse
第一种：默认模式，默然放在一行或一列。
第二种：从开头开始，填满整行或者填不下一个元素换行，另起一行放。
第三种：从最底下一行开始开始，剩下和上面的一样。

<style>
  .test-1 {
    background: gray;
    display: flex;
    height: 50px;
    flex-wrap:nowrap;
  }
  .test-2 {
    background: gray;
    display: flex;
    height: 50px;
    flex-wrap:wrap;
  }
  .test-3 {
    background: gray;
    display: flex;
    height: 50px;
    flex-wrap:wrap-reverse;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 50%;
  }
  #box-3 {
    background-color: violet;
    width: 25%;
    height: 50%;
  }
  #box-4 {
    background-color: yellow;
    width: 25%;
    height: 50%;
  }
  #box-5 {
    background-color: green;
    width: 25%;
    height: 50%;
  }
  #box-6 {
    background-color: black;
    width: 25%;
    height: 50%;
  }
</style>

<div class="test-1">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>
<br>
<div class="test-2">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>
<br>
<div class="test-3">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>

在这里插入图片描述
下一个属性是 flex-shrink，它用来规定元素与元素之间的比率。

打个比方，第一个元素宽度为100%，第二个元素宽度也为100%，这时他们处在同一行中就各占一半，当给第二个元素的 flex-shrink 设置为2，那么第一个元素就变成占66.6%，第二个元素占33.3%。设置为3的话那就第一个占75%，第二个占25%；

<style>
  #box-container {
    display: flex;
    height: 100px;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 100%;
  }
  #box-2 {
    background-color: orangered;
    width: 100%;  
    flex-shrink:2;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
下一个属性是 flex-grow,他的作用和上面那个属性相反，值越大，面积越大。

<style>
  #box-container {
    display: flex;
    height: 100px;
  }

  #box-1 {
    background-color: dodgerblue;   
    flex-grow:1;
  }

  #box-2 {
    background-color: orangered;
    flex-grow:2;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
上一个有默认值为1，这个没有默认值，需要自己设置。

下一个属性用来设置沿弹性容器主轴方向的长度：flex-basis；

<style>
  #box-container {
    display: flex;
    height: 500px;
  }

  #box-1 {
    background-color: dodgerblue;
    height: 200px;
    flex-basis:10%;
  }

  #box-2 {
    background-color: orangered;
    height: 200px;
    flex-basis:50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
之前我们说过 padding 和 margin 属性都有四个值，可以快速设置，上面三个属性也可以快速设置 第一个是 flex-grow；第二个是flex-shrink；第三个是
flex-basis；

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    flex:1 2 150px;
    height: 200px;
  }
  #box-2 {
    background-color: orangered;
    flex:2 1 150px;
    height: 200px;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
上面的所有的子元素都是按照出现的顺序来显示的，也可以给他们分配一定的数级，用来控制显示。使用的是 order 属性；

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
	order:2;
    height: 200px;
    width: 200px;
  }
  #box-2 {
    background-color: orangered;
	order:1;
    height: 200px;
    width: 200px;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述

之前在学CSS时可以通过覆盖来消除掉父标签的一些属性，在弹性框中同样可以，在子样式表中加入 align-self；他的可选值与 flex-items 相同；

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    align-self:center;
    height: 200px;
    width: 200px;
  }
  #box-2 {
    background-color: orangered;
    height: 200px;
    width: 200px;
  }
</style>
<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

在这里插入图片描述
在这里附上一张弹性框的图，有利于理解。
在这里插入图片描述
关于 flex-grow 和 flex-shrink；前者是当父元素大于子元素的宽度时，内部子元素所占的比；后者时当父元素宽度小于子元素之和时，内部子元素如何分配。

关于 flex-basis 和 width 同样是用来显示宽度，当前者出现，后者便失效。

结语

本篇内容到这里就结束了，最后还有一部分内容，freecodecamp关于网站设计的内容就全部结束了。
如有错误，还望能够在评论批评指正。

有点东西：）
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
零基础小白深度学习入门篇
qq_42370150的博客
05-19 8568
觉得小编不错请关注加点赞谢谢 一、人工智能和新科技革命 2017年，围棋界发生了一件比较重大的事，Master（AlphaGo）以60连胜横扫天下，击败各路世界冠军，人工智能以气势如虹的姿态出现在我们人类面前。围棋曾经一度被称为“人类智慧的堡垒”，如今，这座堡垒也随之成为过去。 从2016年三月份AlphaGo击败李世石开始，AI全面进入我们大众的视野，对于它的讨论变得更为火热起来，整个业界普遍认为，它很可能带来下一次科技革命，并且，在未来可预见的十多年里，深刻的改变我们的生活。 其实，A...
小白入门前端基础笔记
06-16
前端基础技术笔记（适合小白），内容：HTML，CSS，JavaScript基础
多个css的响应式布局
m0_68505386的博客
04-15 152
响应式布局: <!-- 如果需要很多css的情况下可以用这布局 --> <!-- screen在电脑屏幕或者移动设备下 --> <!-- only screen 仅仅在电脑屏幕或者移动设备下 其他屏幕无效 --> <!--all 包含所有设备 --> <!-- 在屏幕小于600px的时候显示如下样式 --> <link rel="stylesheet" href="../css/6.css" media="screen and (
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
热门推荐
叶兴胜
10-10 2万+
[CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法 原文   http://blog.qiji.tech/archives/10167 主题 CSS 前言 现在 HTML5/CSS3 很流行罢，也是未来时代的趋势。在 HTML5 带来的许多实用功能之后，CSS3也同带来了一些牛逼哄哄的功能呢。 动画 ani
width与max-width理解
王建野的专栏
07-10 1万+
&lt;div class="parent"&gt; &lt;p&gt; 你好啊，好啊好好 &lt;/p&gt; &lt;/div&gt; p{ width:400px; max-width: 200px; }      若同时设置了width和max-width两个属性，则以下面规则显示宽度    ...
HTML零基础入门详细教程
一步一个脚印，踏实努力，向着目标前进
06-08 2755
欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！
HTML零基础入门
weixin_65054907的博客
07-10 3233
HTML用于构造网页的结构，例如：网页中的文字、表格、按钮、链接等等。而CSS用于修饰网页中的元素，就是把上述这些元素进行调整，例如：文字的大小，颜色，背景的样式等等。JavaScript用于实现网页的交互。...........................
【HTML】零基础入门教程
qq_52719660的博客
10-20 4820
一、HTML简介 HTML是英文Hyper Text Markup Language的缩写，即超文本标记语言，是用于描述网页文档的一种标记语言。超文本：超文本文件就是指具有超链接功能的文件。 二、建立HTML文件 1.页面基本结构 打开vscode，新建后缀名为.html的文件，搭建页面基本结构的快捷键：①英文感叹号＋回车，②html:5+回车 。
C#零基础小白快速入门指导
zzc_123xpl的博客
08-25 5510
本文写给想学C#的朋友，目的是以尽快的速度入门。
视频 -前端小白零基础入门HTML5+CSS3视频教程下载地址.txt
03-30
|- 10-前端基础-HTML5CSS3提高.rar |- 09-前端基础CSS第七天.rar |- 08-前端基础CSS第六天.rar |- 07-前端基础CSS第五天.rar |- 06-前端基础CSS第四天.rar |- 05-前端基础CSS第三天.rar |- 04-前端基础CSS第二天.rar...
黑马程序员前端小白零基础入门HTML5+CSS3
06-19
本教程"黑马程序员前端小白零基础入门HTML5+CSS3"专为初学者设计，旨在帮助那些对前端开发感兴趣的朋友们从零开始学习这两门技术。 HTML5是超文本标记语言的最新版本，它的出现极大地增强了网页的交互性和表现力。...
APICloud小白入门.zip
09-28
在"APICloud小白入门"的学习过程中，你不仅会接触到移动开发的基础知识，还会了解到一个完整的APP从无到有、从开发到上线的全貌。通过这个教程，你可以逐步建立起自己的移动开发技能，为未来的项目打下坚实的基础。...
前端小白入门系列课程完整版
02-22
在这个"前端小白入门系列课程完整版"中，你将逐步学习到这些基础知识，并通过实例深入理解。课程可能涵盖HTML基础、CSS布局、JavaScript基本语法、jQuery的使用，以及一个或多个项目实践。图标"icon.jpg"可能是课程...
JS入门必备基础知识（适合小白）
a_l_f_的博客
07-17 1万+
JS入门必备基础知识（适合小白）一、JS是什么？1、JS简介2、JS的组成部分3、JS的基本特点4、JS的特性5、JS与HTML、CSS的对比二、JS的用法1、JS的引入方法1）head中的 JavaScript 函数2）body中的 JavaScript 函数3）外部的 JavaScript2、JS的基本语法3、JS中的变量1）变量名2）变量值3）全局变量与局部变量4、数据类型1）基本数据类型2）引用数据类型3） JS的数据类型转换4）typeof 操作符5、JS代码在执行时分两个阶段1）预编译2）代码执
通过 tomcat 让手机访问到电脑写的 html 网页
最新发布
m0_75138009的博客
07-10 429
通过 tomcat运行的文件，只要处于同一个局域网下，就可以被访问，不过我们需要将防火墙对 8080 这个端口设置允许外部访问，或直接把防火墙先暂时关闭。我们需要在在环境变量中配置 JAVA_HOME 和 CATALINA_HOME 两个变量，分别装入 jdk 和 tomcat 的路径。之前实现的 html 小项目只能在自己的电脑上展示，如果要在其他电脑或者在手机上就看不到网页了。要运行 tomcat ，我们必须要确保我们的环境变量中有 jdk。想要在手机上访问自己写的网页，我们可以借助 tomcat。
HTML内容爬取：使用Objective-C进行网页数据提取
Z_suger7的博客
07-04 785
网页爬取，通常被称为网络爬虫或爬虫，是一种自动浏览网页并提取所需数据的技术。这些数据可以是文本、图片、链接或任何网页上的元素。爬虫通常遵循一定的规则，访问网页，解析页面内容，并存储所需信息。
javaweb学习day1《HTML篇》--新浪微博（前端页面的创建思路及其HTML、css代码详解）
2302_80329073的博客
07-06 803
​ 本篇章为javaweb的开端，也是第一篇综合案例，小编也是看着黑马程序员的视频对里面的知识点进行理解，然后自己找一个新浪微博网页看着做的，主要还是因为懒，不想去领黑马程序员的资料了。 小编任务javaweb和java有诸多共同之处，所以这两个一同进行更新，周期为15天。java可能会快一点，不过还是会同步更新的。小编尽量每天都将自己所学浓缩成综合案例的形式和大家见面的。大家可以试着自己找新浪新闻进行练习。 不知道大家能否找到，小编将网址放在下面了，以防万一。 ​
python爬虫小白入门
10-11
如果你是Python爬虫的小白，建议你先学会相关的基础知识。这包括： 1. 爬虫工作原理：了解爬虫的工作原理以及HTTP协议，HTML语言和CSS等基本概念。 2. Python基础语法：学习Python基础语法，尤其是掌握Python模块、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值