web前端学习5

已于 2022-11-18 23:12:32 修改
阅读量343 收藏
点赞数
文章标签： 前端 学习 css
于 2022-11-18 23:11:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71337144/article/details/127926487
版权

Web前端学习

一、overflow溢出隐藏

overflow
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、over-flow-y针对两个轴分别设置

<style>
        /* div{ width: 300px;height: 200px; border: 1px black solid; overflow: hidden;} */
        /* div{ width: 300px; height: 200px;border: 1px black solid;overflow: scroll;}/* 通过滚动条来解决溢出问题 */
        /* div{ width: 300px; height: 200px;border: 1px black solid;overflow: auto;}自动识别通过滚动条来解决溢出问题 */
        div{ width: 300px; height: 200px;border: 1px black solid;overflow-y: auto;overflow-x: scroll;}
    </style>
</head>
<body>
    <div>
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    </div>
</body>

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

二、透明度与鼠标手势

1.opacity : 0(透明，占空间) ~ 1(不透明)
0.5(半透明)
注: 占空间、所有的自内容也会透明
2.rgba( ): 0 ~ 1
注: 可以让指定的样式透明，而不影响其他样式
3.cursor : 手势
default: 默认箭头
要实现自定义手势:
准备图片: .cur、.ico

<style>
        #div1{ width: 100px;height: 100px;background-color: aqua;opacity: 0.5;}/* backgrou透明度 */
        #div2{ width: 100px;height: 100px;background-color:  rgba(255,0,0,0.5);
        cursor: pointer;/* 鼠标手势 */
        cursor: url(./img/cursor.ico);/* 自定义鼠标样式S */
        }
    </style>
</head>
<body>
    <div id="div1">明天早八且满课</div>
    <p>这是一个段落</p>
    <div id="div2">早八晚五谁懂</div>
</body>

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

三、最大最小宽高

min-width、max-width
min-height、max-height
注 : 强化对百分比单位的理解
%单位: 换算 -> 以父容器的大小进行换算
一个容器怎么适应屏幕的高: 容器加height: 100%；body: 100%；html: 100%；
html，body{ height:100%；}
.contrainer{ height: 100%；}

<style>
        div{ width: 200px;min-height: 200px; border:1px red solid;}/*文字自动适应方框 */
        #box1{ width: 200px;height: 200px;background-color: aqua solid;}
        #box2{ width: 200px; height: 200px ;background-color: blue solid;}
    </style>
</head>
<body>
    <div>
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
        早八且满课啊
    </div>

在这里插入图片描述

四、css默认样式

有些标签有默认样式，有些标签没有默认样式。
没有默认样式:
div、span、···
有默认样式:
body、h1···h6、p、ul、···
body -> marign : 8px
h1 -> margin : 上下 21.440px
font-weight : bold
p -> margin : 上下 16px
ul -> margin : 上下 16px
padding: 左 40px
默认点: list-style : disc
a -> text-decoration: underline；

五、css重置样式

简单的CSS reset

*{ margin: 0; padding: 0;}
优点:
缺点:稍微的影响性能
ul{ list-style: none;}
a{ text-decoration: none; color: #666;}
img{ display: block;}
问题的现象: 图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
vertical-align: baseline; 基线对齐方式，默认值
vertical-align: bottom; 解决方式是推荐的
写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式

<head>
    <style>
        div{ border: 1px black solid;}
        img{ display: block;}/*解决图片与容器底部的间隙*/
    </style>
</head>
<body>
    <div>
        <img src="./img/2.jpg" alt="">
    </div>

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

六、PS工具在web的应用

1、photoshop使用
组成：
菜单项
工具栏
辅助面板
图片引用格式
jpd、png、gif
快捷键：
ctrl +r ：显示隐藏标尺(在标尺上可以拖拽参考线)
2、png等图片切图流程
矩形选框选取区域
ctrl + c 复制图层
ctrl + n 新建图层
ctrl + v 粘贴图层
微调：alt 减少区域 shift 增加区域 上下左右键进行微调
利用参考线记录量取的位置，以便以后测量其他的值
最后：存储为web格式
3、利用PS切片测量页边居和容器距离

<style>
        *{ margin: 0;padding: 0;}
        ul{ list-style: none;}
        img{ display: block;}
        a{ text-decoration: none;color: #666666;}
        h1,h2,h3,h4,h5,h6{ font-size: 16px; font-weight: normal;}
        #main{ margin: 20px auto; width: 238px;border: 1px solid #d9e0ee;border-top: 3px #ff8400 solid;}
        #main h2{height: 35px;border-bottom: 1px solid #d9e0ee;line-height: 35px; padding-left: 11px;}
        #main h2 a{color: black;}
        #main h2 a:hover{ color: #ff8400;}
        #main div img{ margin: 8px auto 3px auto;}
        #main ul{ font-size: 12px;line-height: 24px;margin-bottom: 8px;}
        #main ul li{ padding-left: 18px;}
        #main ul li.first-line{ border-bottom: 1px solid #d9e0ee;padding-bottom: 3px;margin-bottom: 8px;}
        #main ul a{}
        #main ul a:hover{ color: #ff8400; text-decoration: underline;   }
    </style>
</head>
<body>
    <div id="main">
        <h2>
            <a href="#">旅游</a>
            <div>
                <a href="#">
                    <img src="./img.gif" alt="">
                    <a href="#">详细>></a>
                </a>
            </div>
            <ul>
                <li>
                    <a href="#">触摸运河文脉，跟上这阵“小香风”</a>
                </li>
                <li>
                    <a href="#">听涛观海忆洪帆，品鲜问渔游巴斗</a>
                </li>
                <li>
                    <a href="#">第三届大运河文旅博览会精彩开幕</a>
                </li>
                <li>
                    <a href="#">多样展演，邀你约姑苏共话运河情</a>
                </li>
            </ul>
        </h2>
    </div>
</body>

效果：
在这里插入图片描述
4、企业中切图流程
利用工具快速获取样式
蓝湖：https://lanhuapp.com

七、float浮动概念及原理

文档流：
文档流是文档中可显示对象在排列时占用的位置
float特性：
加浮动的元素，会脱离文档流，会延迟容器靠左或靠右排列，
float的取值：
left
right
none(默认)

<style>
        body{ border: 1px black solid;}
        #box1{ width: 100px; height: 100px; background: yellow; float: left;}
        #box2{ width: 200px; height: 200px; background: red; float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>

效果：
在这里插入图片描述
如果之前已经有浮动的元素，会挨着浮动的元素进行排列
效果：
在这里插入图片描述

八、float注意点整理

float注意点:
1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
5.主要给块元素添加，但也可以给内联元素添加

<style>
        body{ border: 1px black solid;} 
        #box1{ width: 100px;height: 100px;background: yellow;;}
        #box2{ width: 200px;height: 200px;background: red;float: left;}
        #box3{ width: 300px; height: 300px; background :blue;}
        #box4{ background : green; float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜上网课了！呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜</div>
    <div id="box4">不想上网课！</div>
</body>

在这里插入图片描述

<style>
        body{ border: 1px black solid;} 
        ul{ margin: 0;padding: 0;list-style: none;width:300px;height: 300px;border: 1px black solid;}
        li{ width: 100px;height: 100px;background: red;border: 1px yellow solid;box-sizing: border-box;float: left;}
        li:nth-of-type(1){ height: 120px;}
        li:nth-of-type(2){ height: 80px;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<html>

在这里插入图片描述

九、清除float浮动

利用clear属性清除float浮动
(clear属性只会操作块标签，对内联标签不起作用)
嵌套排列:
1.固定宽高 : 不推荐，不能把高度固定死，不适合做自适应的效果。
2.父元素浮动: 不推荐，因为父容器浮动也会影响到后面的元素。
3.overfloat : hidden(BFC规范)，如果有子元素想溢出，那么会受到影响。
4.display : inline-block(BFC规范)，不推荐，父容器会影响到后面的元素。
5.设置空标签: 不推荐，会多添加一个标签。
6.after伪类: 推荐，是空标签的加强版，目前各大公司的做法。
上下排列: clear属性，表示清除浮动的，left、right、both

<style>
        /* #box1{ width: 100px; height: 100px; background: red; float: left;}
        #box2{ width: 200px; height: 200px; background: blue; clear: left;} */
        /* #box1{ width: 100px; height: 100px; background: red; float: right;}
        #box2{ width: 200px; height: 200px; background: blue; clear: both;} */
        /* #box1{ width: 200px; height: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid; float: left;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid; overflow: hidden;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}*/
        /* #box1{ width: 200px; border: 1px black solid; display: inline-block;}
        #box2{ width: 100px; height: 200px; background: red; float: left;} */
        /* #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear{ clear: both;} */
        #box1{ width: 200px; border: 1px black solid;}
        #box2{ width: 100px; height: 200px; background: red; float: left;}
        .clear:after{ content: ''; clear: both; display: block;}
    </style>
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->
    <!-- <div id="box1">
        <div id="box2"></div>
        <div class="clear"></div>
    </div>
    aaaaaaa -->
    <div id="box1" class="clear">
        <div id="box2"></div>
        </div>
    bbbbbbb
</body>

十、float制作页面小结构

 <style>
        *{ margin: 0; padding: 0;}
        ul{ list-style: none;}
        img{ display: block;}
        a{ text-decoration: none; color: #666;}
        h1,h2,h3{ font-size: 16px;}
        .l{ float: left;}   
        .r{ float: right;}
        .clear:after{ content: ""; display: block; clear: both;}
        #main{ width: 366px; margin: 20px auto;}
        #main.title{ height: 23px; line-height: 23px; font-size: 12px; font-weight: bold; padding-left: 30px;
            background:url(./img2/bg_title.png) no-repeat 6px 4px , url(./img2/bg_line.png) repeat-x;}
        #main ul{ overflow: hidden; margin-top: 13px;}
        #main li{ margin-bottom: 22px;}
        #main .pc{ width: 99px; border: 1px solid #c8c4d3; margin-left: 5px;}
        #main .pc img{ margin: 2px;}
        #main .content{ width: 240px; margin-left: 13px;}
        #main .content h2{ font-size: 12px; line-height: 24px;}
        #main .content p{ font-size: 12px; line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2>外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="img.gif" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="img.gif" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l pic">
                    <a href="#">
                        <img src="img.gif" alt="">
                    </a>
                </div>
                <div class="l content">
                    <h2>测试标题测试标题</h2>
                    <p>
                        测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
                        <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>

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

十一、relative相对定位

position定位
1.position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、bottom、left属性则决定了该元素的最终位置。
2.position取值
static(默认)
relative
absolute
fixed
sticky
relative相对定位
1.如果没有定位偏移量，对元素本身没有任何影响
2.不使元素脱离文档流
3.不影响其他元素布局
4.left、top、right、bottom是相对于当前元素自身进行的偏移的

<style>
        /* #box1{width: 100px; height: 100px; background: red;}
        #box2{width: 100px; height: 100px; background: blue; margin-left: 100px; margin-top: 100px;}
        #box3{width: 100px; height: 100px; background: yellow; margin-top: -100px;} */

        #box1{width: 100px; height: 100px; background: red;}
        #box2{width: 100px; height: 100px; background: blue; position: relative; left: 100px; top: 100px;}
        #box3{width: 100px; height: 100px; background: yellow;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>

十二、absolute绝对定位

absolute绝对定位
1.使元素完全脱离文档流
2.使内联元素支持宽高(让内联具备块特性)
3.使块元素默认宽根据内容决定(让块具备内联的特性)
4.如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)

<style>
        /* #box1{ width: 100px; height: 100px; background: red; position: absolute;}
        #box2{ width: 200px; height: 200px; background: blue;} */
        /* span{ width: 100px; height: 100px; background: red; position: absolute;} 
        div{ background: red; position: absolute; left: 100px; top: 100px;} */
        #box1{ width: 300px; height: 300px; border: 1px black solid; margin: 200px; position: relative;}
        #box2{ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0;}
    </style> 
</head>
<body>
    <!-- <div id="box1"></div>
    <div id="box2"></div> -->

    <!-- <span>这是一个内联的</span> -->
    <!-- <div>这是一个块</div> -->
    <div id="box1">
        <div id="box2"></div>
   </div>
</body>
404我只想睡觉
关注
web前端学习框架图.png
04-01
这是2020版最全的web学习框架，博主自己绘图，希望对你有帮助，助你在前端学习路上一臂之力，欢迎大家下载收藏，觉着有帮助的欢迎留言哦
Web前端学习
08-29
在"Web前端学习"中，框架和库的使用也是重要部分。React是Facebook推出的JavaScript库，用于构建用户界面，特别适合大型单页应用。它引入了组件化开发理念，让代码更易于管理和复用。Vue.js是一个轻量级的框架，它的...
大Web前端开发技术学习路线图
08-21
大Web前端开发技术学习路线图，从入门到架构师学习路线
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
web前端学习路线图
02-28
web前端学习路线图
06_实现watch
qq_53109172的博客
10-16 1159
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
xiaogang1226的博客
10-16 483
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端地图数据开发
shuxiaoxii的博客
10-13 394
基于Turf.js教你快速实现地理围栏的合并拆分。turf js 地理空间分析库，处理各种地图算法。如何拆分一个乡镇或区的地图。获取市级的行政区域划分。直接导入地图的json。高德地图查看市级区域。js实现地图区域合并。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1301
浏览器实现跨标签页通信的多种方式
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 871
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
计算机毕业设计 | SSM 校园线上订餐系统(附源码)
说书客
10-14 1209
本系统基于SSM实现了餐馆点餐系统。项目功能（用户点餐子系统）：登录注册，选座，商品购买，我的订单等。（后台管理子系统）：用户管理，餐桌管理，菜品管理，菜系管理，订单管理等
vue elementui table编辑表单时，弹框增加编辑明细数据
weixin_45616483的博客
10-16 336
elementui 弹框增加编辑明细数据
react 中的hooks中的useState
m0_61265297的博客
10-16 285
有两种方式,第一种方式直接写值，第二种方式（第一个参数是原来的值，第二个参数返回一个新的值）
TryHackMe 第8天 | Web Fundamentals (三)
最新发布
weixin_43831376的博客
10-19 469
依然是 Web hacking 的部分漏洞。
08_实现 reactive
qq_53109172的博客
10-17 999
本章主要实现了 reactive 对 Object 和 Array 的数据代理
JavaScript函数
学无止境
10-14 749
和变量类似，函数必须先定义然后才能使用。使用 `function` 关键字定义函数。> function：函数、功能。
使用Rollup.js快速开始构建一个前端项目
胖蔡叨叨叨
10-14 783
Rollup 是一个用于 JavaScript 项目的模块打包器，它将小块代码编译成更大、更复杂的代码，例如库或应用程序。Rollup 对代码模块使用 ES6 模块标准，它支持 Tree-shaking（摇树优化），可以剔除那些实际上没有被用到的代码，从而生成更小的文件，这意味着它非常适合于现代 JavaScript 项目。
若依-医疗系统
m0_70812512的博客
10-14 1165
在门诊模块中我们要解决的问题是，对患者建档以及建卡，在挂号时收取对于的挂号费，在医生工作站中就可以对患者进行接诊，那医生工作站也设计到了员工排班当天值班的员工和员工的调休，设计到了这些还需要对他的部门和职位方面进行分配管理，那么在挂号选择值班医生时，就为当天值班的医生。现在继续来到医生工作站接诊，医生工作站里面我们可以对患者进行接诊，候诊，诊断，转住院，检查，检验等操作，这里开药就又要涉及到药品信息中的药房药库管理，开出去的药，减少对应的药品库存。人员管理，部门管理，角色管理等等等....
WebGl 如何给页面绑定点击事件
dlmyrt的博客
10-14 364
在WebGL中给页面绑定点击事件，可以通过为WebGL的绘图上下文所在的元素添加事件监听器来实现点击事件的处理。
"Web前端开发学习笔记：HTML5 CSS3 JavaScript详解
本文将对Web前端开发的内容进行详细的说明和总结，包括HTML5、CSS3和JavaScript的学习笔记。 1. Web 1.1 浏览器 1.2 Web标准 1.3 HTML - HTML语法规范 1.4 HTML基本结构标签 1.5 网页开发工具：VS Code - 史...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值