开始写一个网页-笔记2

原创 已于 2024-01-12 14:28:23 修改 · 816 阅读 · 18 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#css
于 2024-01-11 12:01:29 首次发布

布局

弹性盒子，横向布局：

  • display：flex

    // html文件代码
<body>
    <div class="continer">
        <div class="first">num1</div>
        <div class="second">num2</div>
        <div>num3</div>
        <div>num4</div>
        <div>num5</div>
        <div>num6</div>
        <div>num7</div>
    </div>
</body>

    // css文件代码
div{
    height: 100px;
    width: 500px;
    background-color: red;
    display: flex;
}

div .first{
    height: 40px;
    width: 100px;
    background-color: blue;
}

div .second{
    height: 40px;
    width: 100px;
    background-color: green;
}

    展示效果：
    在这里插入图片描述

    说明
    1、不使用display时，div为块级元素，会上下布局
    2、想使哪些元素(如.first,.second)横向布局，找父级元素(如.continer)并设置display:flex
    3、弹性盒子类似一个松紧带，当子盒子相加超过父盒子时，父级会自动压缩子盒子的大小

弹性盒子的配套属性
// html代码
	<body>
	    <div class="continer">
	        <div class="first">num1</div>
	        <div class="second">num2</div>
	        <div class="third">num3</div>
	        <div class="fourth">num4</div>
	    </div>
	</body>

  • 1、flex-direction： 作用在弹性盒子上，设置弹性盒子内子元素的排列方式：row(从左到右，默认)、column（从上到下）、row-reverse(从右到左)、column-reverse（从下往上）

    // css文件代码
div.continer{
    height: 200px;
    width: 500px;
    background-color: red;
    display: flex;
    flex-direction: column-reverse; // 子元素竖向排列，从下往上
}
// 子元素仅设置了宽、高和背景颜色的属性，再次不再多写了

    展示效果：
    在这里插入图片描述

  • 2、flex-wrap 作用在弹性盒子上，设置弹性盒子内子元素换行方式，其值：nowrap(不换行，默认)、wrap（换行）

    // 使用方式为：
div.continer{
	    height: 200px;
	    width: 500px;
	    background-color: red;
	    display: flex;
	    flex-wrap: wrap; // 子元素横向排列，失去弹性盒子的作用
	    // flex-wrap: nowrap; // 效果同文章第一张效果图，子元素不换行，挤在一起
	}

    展示效果：在这里插入图片描述

  • 3、order 作用在弹性盒子的子元素上，设置弹性盒子内该自己元素的排列顺序，值越小越靠前

    div.continer{
    height: 200px;
    width: 500px;
    background-color: red;
    display: flex;
}
div .first{
    height: 40px;
    width: 200px;
    background-color: blue;
    order: 10;  // 4个元素中，10最大，排在最后
}
div .second{
    height: 40px;
    width: 200px;
    background-color: green;
    order: 1;  // 4个元素中，1最小，排在最前
}
div .third{
    height: 40px;
    width: 200px;
    background-color: yellow;
    order: 6;  // 4个元素中，6是次大的，排在倒数第二位
}
div .fourth{
    height: 40px;
    width: 200px;
    background-color: pink;
    order: 3;  // 4个元素中，3是次小的，排在第二位
}

    展示效果：
    在这里插入图片描述

  • 4、flex 作用在弹性盒子的子元素上，设置弹性盒子内该元素的缩放比例。使用时是一个复合属性，由flex-shrink（压缩因子），flex-grow（增长/放大因子），flex-basis（基准宽度）

    父盒子宽度为530px，子元素宽度均为80px且不设置flex属性时：
    在这里插入图片描述

    div.continer{
    height: 200px;
    width: 600px;    // 600px-50px*4 = 400px
    background-color: red;
    display: flex;
    flex-wrap: wrap;
}
.continer .first{
    height: 20px;
    width: 50px;
    background-color: blue;
    flex: 2;  // [600-50px]+50px=
}
.continer .second{
    height: 40px;
    width: 50px;
    background-color: green;
}
.continer .third{
    height: 50px;
    width: 50px;
    background-color: yellow;
    flex: 1;

}
.continer .fourth{
    height: 30px;
    width: 50px;
    background-color: pink;
    flex: 2;
}

    效果图
    在这里插入图片描述

    说明

    • flex属性是将剩余的宽度按照设置的值分给子元素
    • 盒子宽为600px，num2未设置，默认基准宽度为当前设置的宽度不变。
    • num1值为2，num3值为1，num4值为2，剩余的550px会被分为（2+1+2）份，每份值为110px
    • 所以，width[num1]=110px2=220px；width[num3]=110px1=110px；width[num4]=110px*2=220px；

  • 5、justify-content 作用在弹性盒子上，设置的弹性盒子内子元素在排列方向上的分布方式

    • flex-start（弹性盒子开始的方向，都挤着放左边）
    • flex-end（弹性盒子结束的方向，即都挤着放右边）
    • center（居中，即左右留空，都挤在中间）
    • space-between（空白在中间的方式）
    • space-around（空白在周围，每个元素的左右都有）
    div.continer{
    height: 200px;
    width: 600px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

    在这里插入图片描述

    说明

    • 子元素仅设置了宽、高和背景颜色的属性
    • 使用时子元素不要设置flex属性（flex会把空余的都填充满，不会出现环绕的效果）

  • 6、align-items 作用在弹性盒子上，设置弹性盒子内子元素在排列方向的垂直方向的对齐方式：

    • flex- start（弹性盒子开始的方向，都挤着放左边）
    • flex-end（弹性盒子结束的方向，即都挤着放右边）
    • center（居中，即左右留空，都挤在中间）
    div.continer{
    height: 200px;
    width: 600px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}
// 子元素仅设置了宽、高和背景颜色的属性

    在这里插入图片描述

    说明

    • end时子元素会粘在盒子底部；start时子元素会粘在盒子顶部；center时会居中展示
    • 子元素在垂直方向上还会有空隙

  • 7、align-content 作用在弹性盒子上，设置弹性盒子行的分布方式（多行展示时）：

    • flex-start（弹性盒子开始的方向，都挤着放左边）
    • flex-end（弹性盒子结束的方向，即都挤着放右边）
    • center（居中，即左右留空，都挤在中间）
    • space-between（空白在中间的方式）
    • space-around（空白在周围，每个元素的左右都有）
    div.continer{
    height: 200px;
    width: 600px;
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    /* align-items: flex-end; */
    align-content: flex-end;

}
.continer .first{
    height: 20px;
    width: 200px;
    background-color: blue;
}
.continer .second{
    height: 40px;
    width: 200px;
    background-color: green;
}
.continer .third{
    height: 50px;
    width: 200px;
    background-color: yellow;
}
.continer .fourth{
    height: 30px;
    width: 200px;
    background-color: pink;

}

    在这里插入图片描述

    说明

    • end时子元素会粘在盒子底部；start时子元素会粘在盒子顶部；center时会居中展示
    • 子元素高度不一致时，会按照该行中最高的展示，行与行之间没有空隙

备注
1、弹性盒子可以设置横向，也可以设置竖向布局
2、配套属性：没有“display：flex”，即使写上“flex-direction：row”也是不起作用的。flex-direction可以去掉，display不能省掉
3、第一步考虑flex-direction，如果flex-direction:column，则flex-wrap:nowrap也是不起作用的。flex-direction的优先级要高于flex-wrap
4、当父盒子的高度放不下所有的子元素时，flex-wrap:warp也是会换行的，只不过是竖着换行
5、align-items:flex-end 和 align-content:flex-end的区别。items是盒子底部对齐，content是内容对齐方式，效果图如下
在这里插入图片描述
在这里插入图片描述

定位 - position

// 使用定位主要是为了使用方位属性：left、right、top、bottom以及层属性 z-index
// 上述属性有效前提是position的值不为static
1、static（静态模式，默认）
2、relative（相对模式）
3、absolute（绝对模式）
4、fixed（固定模式）

//html代码
<body>
    <div class="box"></div>
    <div class="second"></div>
</body>

// css代码
.box{
    width: 200px;
    height: 200px;
    background-color: red;
}
.second{
    width: 200px;
    height: 200px;
    background-color: blue;
}

在这里插入图片描述

  • 1、纯使用relative [相对模式]

    特征：依然保留自己的物理空间，以自己原位置为参考点定位，随着浏览器的滚动而滚动

    .box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative; // 有人也敢下走
    left: 100px;  // 距离原来位置向左动50px
    top: 100px;
}

    在这里插入图片描述

    注意：
    如果是 position:static，元素之间是不会重叠的。relative不关心是否影响其他元素。值可以是负数

  • 2、纯使用absolute [绝对模式]

    特征：不保留自己的物理空间，以浏览器位置为参考点定位。随着浏览器的滚动而滚动

    .box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    right: 50px;
    bottom: 50px;
}

    在这里插入图片描述
    在这里插入图片描述

    注意：

    • 浏览器缩放后，相对浏览器的位置不变。
    • 缩放浏览器时，该元素也会与其他元素重叠
    • 如果有滚动条，绝对位置是以滚动条在最顶部的时候的浏览器为参考点

  • 3、纯使用fixed [固定模式]

    特征：不保留自己的物理空间，以浏览器位置为参考点定位，不随着浏览器的滚动而滚动（如，回到顶部等按钮）

    注意：

    • 浏览器缩放，不影响该元素的位置
    • 如果有滚动条，滑动滚动条也不影响该元素的位置

  • 4、组合使用

    使用：祖先元素使用相对定位，子元素使用绝对定位

    特征：子元素不保留自己的物理空间，以使用了相对模式的祖先元素为参考点定位，随着浏览器的滚动而滚动

    // html代码
<body>
    <div class="container">
        <div class="box">
            <div class="abc"></div>
            <div class="ef"></div>
        </div>
    </div>
</body>

    // css代码
.container{
    width: 500px;
    height: 500px;
    background-color:red;
}

.box{
    width: 300px;
    height: 300px;
    background-color: blue;
}
.abc{
    width: 200px;
    height: 200px;
    background-color: green;
}
.ef{
    width: 200px;
    height: 200px;
    background-color: yellow;
}

在这里插入图片描述

  • 对祖先（红色）元素设置相对模式。子（绿色和黄色）元素设置绝对定位

    // css部分代码
.abc{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.ef{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    right: 20px;
    bottom: 20px;
}

    在这里插入图片描述

  • 子元素中，想让绿色盖住红色，可用z-index属性来设置（值越大，在z轴方向上越靠前）

    .abc{
    width: 200px;
    height: 200px;
    background-color: green;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index:100;
}
.ef{
    width: 200px;
    height: 200px;
    background-color: yellow;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 99;
}
拓展

  • 颜色表示方式

    • 1、 颜色单词，如 red、yellow、blue、green、pink等
    • 2、#000000（#+6位16进制数）。每两位代表一个颜色，光的三原色(红绿蓝)
      • 如果两位的数值一样，可简化。如#ff0011 = # f01
    • 3、rgb(0-255,0-255,0-255)
      • 每个数的范围是[0,255] ，rgb(0,0,0)代表黑色
      • #是用16进制来表示，rgb是使用十进制来表示的
    • 4、rgba(0-255, 0-255,0-255,0-1)
      • a代表透明度，如果是0的话，该内容完全看不到
      • 作用：设置后可以透过看到下层的内容

  • 其他属性

    • width: 24%

      父级盒子(上图红色框 class=container)宽度为1200px，对于4个子元素（上图绿色框 class=item）来平均分配：
      1、固定尺寸，设置每个item的width = 1200/4=300px
      2、百分数设置，将container整体想象成1，则4个元素每个为25%
      // 说明：这里设置24%是因为元素之间需要留空隙

      在这里插入图片描述

    • object-fit

      使用背景：添加的图片，设置固定 高/宽度后，图片会有变形

      • object-fit：cover

        作用：响应式改变图片尺寸，设置cover后图片不会变形，内容会有相应的裁剪

      • object-fit：contain

        作用：响应式改变图片尺寸，设置cover后图片会有压缩

    • cursor: pointer;

      作用：鼠标悬浮时，鼠标样式会变为小手状

    • box-shadow: 1px 2px 3px #000;

      作用：沿着盒子的轮廓增加阴影效果，效果是黑色
      其中 - 1px代表横向偏移量，越大越往右走，越小越往左走；
      2px代表纵向偏移量，越大越往下走，越小越往上走；
      3px代表模糊度，越小越清晰，越大越模糊
      在这里插入图片描述

oneouto
关注
html&CSS-----弹性布局
m0_73633088的博客
08-14 4330
详细介绍html中的弹性布局，介绍其样式和相关特点，以及每一种语法的用法和样式，快点进来看看吧！！！
CSS 悬挂空白与选区溢出
luemeon的博客
06-16 400
在（或pre-line）模式下，浏览器被要求既要保留空格，又要自动换行。原则 A：空格必须保留（因为是pre-wrap原则 B：空格后面没有宽度了，必须换行。如果把这些行尾空格硬塞在当前行，气泡盒子就会被撑大；如果把它们带到下一行开头，下一行的文本又会无故缩进（这通常不是用户想要的）。这些行尾的空白字符不消失，而是“悬挂”在行末的边界之外。它们存在于这一行，但被当作“零零兵”，不占用整行盒子的实际布局宽度（Advance Width）。
Javascript技术:CSS 中rem、vh 和 px各有其最佳适用场景-由Deepseek产生
格码老师教编程
06-15 235
单位相对基准最佳场景px物理/设备像素边框、阴影、精细细节，不随任何缩放变化rem根元素font-size文本、内外边距、组件尺寸，便于全局缩放和可访问性vh视口高度的 1%全屏容器、占屏比例布局，依赖视口高度的模块视口的宽度是整个内容区域（包含滚动条占位）的宽度，拉动滚动条不影响视口宽度，只改变看到的内容位置。
04_CSS及案例开发
人生得意须尽欢
06-17 286
本文摘要介绍了网页布局的核心概念和CSS盒子模型的应用要点。主要内容包括：1）盒子模型的基本用法，重点讲解内边距(padding)的四种设置方式及其对布局的影响；2）外边距(margin)的概念及其在调整元素位置时的作用；3）块元素与行内元素的区别及转换方法；4）浮动和定位技术的应用场景与实际案例开发。学习目标要求掌握盒子模型居中设置、元素类型转换、浮动布局实现、定位技术等核心技能，并通过案例练习巩固这些布局技术在实际网页开发中的应用。课程强调通过div标签划分网页结构，使用边距属性精细控制元素位置，为后续
vue学习第一阶段扩展：关于原子化CSS，DevTools插件以及小练习
2303_80072254的博客
06-17 252
* 每个组件写自己的样式文件 */直接用预定义的 class 名组合，不写自定义 CSS。-- 不用写 CSS，直接用 class 名表达样式 --> < div class = " bg-white rounded-lg p-4 " > < h1 class = " text-lg font-bold " > 标题 </ h1 > </ div >
CSS 3D 硬核解析：四个属性手写旋转立方体
2503_93701293的博客
06-16 279
本文纯 CSS 实现 3D 旋转立方体，拆解 perspective、transform-style、transform、animation 四大核心属性，理清透视、3D 空间、变换执行顺序与动画要点，附完整可运行代码，同时讲解 GPU 渲染优化技巧，零基础也能吃透 CSS 3D 原理。
css filter
qq_41985405的博客
06-15 226
filter 属性用于对元素应用图形效果，如模糊、颜色偏移、亮度调整等。CSS filter 是一个非常强大的视觉处理工具，合理使用可以创造出丰富的视觉效果！drop-shadow() 投影 none -brightness() 亮度 1 0+grayscale() 灰度 0 0-1。contrast() 对比度 1 0+opacity() 透明度 1 0-1。sepia() 棕褐色 0 0-1。invert() 反色 0 0-1。/* 2. 暗色模式图片适配 *//* 多个滤镜用空格分隔 */
html\css\js入门
2302_76384361的博客
06-14 263
-- 头部区域：存放页面配置信息，内容不会直接显示在页面上 -->-- 设置字符编码为UTF-8，支持中文、英文等全球文字，防止乱码 -->-- 视口适配：移动端自适应，页面宽度等于设备宽度，初始缩放1倍 --><title>常见文本标签</title>-- 浏览器标签页标题 -->
使用HTML写一个悬浮摄像头，可拖拽、放大、缩小
weixin_52803316的博客
06-13 686
这段代码实现了一个可拖拽、可调整大小的悬浮摄像头窗口。主要功能包括：1) 通过浏览器API调用用户摄像头并显示实时画面；2) 窗口可自由拖动位置；3) 提供8个方向的调整手柄，支持窗口大小调整并设置最小尺寸限制（160×120px）；4) 采用固定定位，始终悬浮在其他页面内容之上。界面为黑色圆角矩形，带有阴影效果，光标会根据操作区域自动变化形状，提供直观的交互体验。
驱动冲突伴随 DWG 图纸文字问号怎么办？下载冲突解决合集.zip
06-19
彻底解决CAD图纸文字变问号、文字变乱码，以及其他所有字体缺失带来的烦恼
【对架无人机进行规范控制和点对点运动的模拟】可变桨叶四旋翼控制的优化推力分配：翻转动作的比较研究（Matlab代码实现）
06-19
内容概要：本文围绕可变桨叶四旋翼无人机的规范控制与点对点运动模拟展开，重点研究优化推力分配策略在翻转动作中的应用与性能比较。通过Matlab代码实现，构建了四旋翼动力学模型，并设计了多种控制算法以实现精确的姿态调整与轨迹跟踪。研究对比了不同推力分配方案在执行高机动性翻转动作时的稳定性、能耗效率与响应速度，旨在提升无人机在复杂飞行任务中的动态性能与控制精度。该仿真研究为无人机飞控系统的设计与优化提供了理论依据和技术支持。; 适合人群：具备一定自动控制理论基础和Matlab编程能力，从事无人机控制、飞行器动力学或机器人系统研究的科研人员及研究生。; 使用场景及目标：① 实现四旋翼无人机在三维空间中的精确点对点运动控制；② 对比分析不同推力分配策略在执行翻转等高难度动作时的控制效果与能耗表现，优化飞行性能；③ 为无人机自主飞行、特技飞行及复杂环境下的机动控制提供算法验证平台。; 阅读建议：此资源以Matlab仿真为核心，建议读者结合相关控制理论知识，深入理解代码实现细节，重点关注动力学建模、控制律设计与推力分配模块。在学习过程中，应动手调试参数，复现文中翻转动作的仿真结果，并尝试拓展至其他复杂飞行任务，以加深对无人机控制机理的理解。
易语言源码易语言access数据库操作
06-19
易语言源码易语言access数据库操作
C++编程while循环结构测试题解析：程序输出与循环控制逻辑训练
06-19
内容概要：本文档是一份关于C++语言中while循环的专项测试卷，包含20道单项选择题和10道判断题，题目来源于GESP和CSP-J等权威编程等级考试真题。内容涵盖while循环的基本语法、执行逻辑、条件判断、循环控制、常见死循环原因及与其他循环结构的区别，重点考察循环条件的真假判断、循环体执行次数、变量变化过程以及相关逻辑推理能力。附带完整答案解析，有助于巩固C++循环基础知识。; 适合人群：准备参加GESP或CSP-J等青少年编程等级考试的学生，具备初步C++编程基础的学习者（如中小学阶段初学者）；适用于学习流程控制结构中的循环知识点。; 使用场景及目标：①用于检测对while循环掌握程度，查漏补缺；②辅助教师进行教学测评或学生自我练习；③帮助理解循环执行顺序、条件表达式含义及避免死循环等核心概念； 阅读建议：建议在完成每道题目后对照答案认真分析错误原因，结合代码调试加深理解；尤其注意条件赋值与比较的区别（如k=0）、逻辑非运算的应用及循环变量更新机制。
卓海海洋生态平台.pptx
06-19
卓海海洋生态平台.pptx
易语言源码易语言36进制转换模块源码
06-19
易语言源码易语言36进制转换模块源码
批量处理图纸乱码方案下载，高效解决大量文件文字异常问题.zip
06-19
彻底解决CAD图纸文字变问号、文字变乱码，以及其他所有字体缺失带来的烦恼
VariCAD 2021安装教程与下载
最新发布
06-19
VariCAD 2021 VariCAD 2020 VariCAD 2019 VariCAD 2018 VariCAD 2017 以上都包含
景工工艺优化平台解决方案.pptx
06-19
景工工艺优化平台解决方案.pptx
LiteSQL 精简版 MSSQL十大版本合计下载
06-19
LiteSQL 精简版 包含版本： LiteSQL2000 精简版 MSSQL2000 LiteSQL2005x86 精简版 MSSQL2005 LiteSQL2005x64 精简版 MSSQL2005 LiteSQL2008X86 精简版 MSSQL2008 LiteSQL2008X64 精简版 MSSQL2008 LiteSQL2025 X64 精简版 MSSQL2025 LiteSQL2022 X64 精简版 MSSQL2022 LiteSQL2019 X64 精简版 MSSQL2019 LiteSQL2017 X64 精简版 MSSQL2017 LiteSQL2016 X64 精简版 MSSQL2016 简介 精简版的 MSSQL 数据库，旨在为用户提供一个轻量级且易于使用的数据库解决方案。与原版 MSSQL2000 相比，LiteSQL2000 在保留核心功能的同时，大幅减少了文件体积，解压后仅占用约 100 兆的空间。这使得 LiteSQL2000 成为开发者和数据库管理员在资源有限的环境中进行测试、学习和部署的理想选择。 特点 体积小巧：解压后仅占用 100 兆空间，方便存储和传输。 功能齐全：保留了 MSSQL2000 的核心功能，满足日常数据库操作需求。 易于使用：安装简便，配置灵活，适合各种开发和测试环境。 适用场景 开发测试：适用于开发者在本地或测试环境中进行数据库开发和测试。 学习研究：适合数据库初学者和研究人员进行学习和实验。 轻量级应用：适用于资源有限的服务器或嵌入式系统中的轻量级应用。 使用说明 本资源为精简版，可能不包含原版 MSSQL2000 的所有功能和组件。 请确保在安装和使用过程中遵循相关许可协议和法律法规。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值