flex布局
上节复习
| 选择器进阶: |
| 伪类选择器: 当满足特定条件时,激活对应的样式 |
| 元素:hover{} 当鼠标经过元素时,激活样式 |
| 伪元素选择器: 创建一个虚假的元素.不能被选中.不存在网页dom中(安全性/性能) |
| 元素::before{content:'内容'} 在元素前面添加内容 |
| 元素::after{content:'内容'} 在元素后面添加内容 |
| 结构选择器: 选择一个结构中的指定元素 |
| 元素:nth-child(n){} |
| 元素:first-child{} |
| 元素:last-child{} |
| |
| 表单(form) |
| 写一些提供用户进行交互的窗口 |
| |
| 工具: |
| input |
| textarea |
| button |
| select |
| option |
| |
| input有很多种类型 |
| text |
| password |
| radio |
| checkbox |
| file |
| submit |
| reset |
| |
| # 浮动布局与定位布局 |
| 学习编程的诀窍 |
布局方式
| 传统布局方式: |
| 1.文档流布局: 网页元素从上往下,从左往右进行布局. 主要用块元素布局,块元素独占一行 |
| 2.浮动布局: 让一个元素可以在父级元素的区域内,向左/右浮动.一直到边界/其他浮动元素为止 |
| 3.定位布局: 让一个元素在一个指定的位置显示 |
| 绝对定位: 基于父级坐标进行移动 |
| 相对定位: 基于本身进行移动 |
| |
| 目前比较新,比较主流的布局方式为flex(弹性盒模型) |
| flex |
浮动篇(float)
| 浮动一开始是用来实现一些图文环绕效果. |
| 后续延伸出了布局的功能 |
| (以前的水平布局方式是通过把块元素转为行内块.但这样会有缺陷: 1.性能比较差 2.如果盒子内容超出了宽高,排版会崩塌) |
| |
| 基本上所有标签都可以添加float样式. |
| float主要两个属性: |
| 1.left 向左浮动 |
| 2.right 向右浮动 |
| |
| tips: |
| 1.元素在浮动时会从原来的布局范围脱离.在文档中不在占位 |
| 2.浮动会一直到边界/遇到其他浮动元素为止 |
| 3.清除浮动: |
| 如果父级元素没有设置高度,盒子会随着内容延伸. 如果给里面的元素设置了浮动,它就会脱离原来的位置.这种情况下父级不会撑大 |
| 解决方式就是给父级元素设置溢出处理: |
| overflow: hidden; |
定位篇(position)
| 通过定位来指定元素在网页中出现的位置 |
| 理论上来说可以用定位实现一个网页的所有布局 -- 不推荐.性能低 |
| |
| 绝对定位(absolute): 让元素基于父级,在一个指定的位置出现. 让一个标签,出现在距离父级上下左右XX的位置 |
| - 绝对定位在移动后会脱离文档流.在文档中不再占位 |
| - 绝对定位的参照对象是基于父级进行移动.如果没有专门父级.默认父级为body(整个网页) |
| |
| 相对定位(relative): 让元素基于自身位置.在原来位置的基础上进行移动.在原来位置里向上下左右移动XX |
| - 不会脱离文档流.移动后不影响其他的元素.只是自身位置改变 |
| - 不会改变元素的性质 |
| - 比较适合小范围的移动 |
| |
| 定位的四个方向: |
| top: ↑ |
| right: → |
| bottom: ↓ |
| left: ← |
| 单独写个定位样式是没用的.要结合四个方向来设置距离 |
| |
| 父相子绝: |
| 父元素为相对定位,子元素为绝对定位. 子元素会根据移动后的父元素来显示. |
| |
| z-index: |
| 当元素产生上下堆叠的时候.通过z-index调整位置.值越大,越靠上 |
| |
拓展补充:
| 内存: |
| 运行内存. 程序在运行的时候都是放在内存里运行的.如果你要运行的软件很多,那对内存的要求也就越大. |
| 一般内存:8g 16g 32g |
| 如果你的电脑8g不到. 要么升级加个内存条 / 或者换了吧 |
| |
| 主流16g 起步8g |
| |
| 程序数据是保存在硬盘里. 要运行时会取出来放到内存里运行.再通过cpu去处理 --> 运行软件速度 硬盘/内存/cpu |
| |
| 电脑产商: |
| 一线: 联想 戴尔 华硕 惠普 苹果 |
| 二线: 小米 华为 宏碁 微星 机械革命 |
| 三线: 神舟 雷神 机械师 火影 |
| 一般情况下来说优先买一线(价格会稍微高点). 但是相对来说, 品控/品质性能/售后 |
| |
| 主流机型: |
| 联想: 游戏本拯救者 轻薄本 小新 / thinkbook / thinkpad 个人推荐thinkbook (thinkbook14plus r7核显版) |
| 游戏本: |
| 天选3 暗影精灵 暗影骑士 蛟龙 极光pro --> |
| |
| 购买平台: |
| 购买时机: 6.18 (双11对于pc来说优惠不是特别大.清库存) |
| 平台: |
| 京东 -- 价格贵点 / 售后好点 |
| pdd -- 价格便宜点 / 售后较差 / 翻车率较大 |
| |
| 购买电脑后.请参考这个流程来.最好录制开箱视频.避免纠纷 |
| https://www.bilibili.com/video/BV1QR4y1E7Br?share_source=copy_web |
| https://www.bilibili.com/video/BV1X64y1t7aM?share_source=copy_web |
| |
| 视频博主推荐 |
| 嗨我是熊猫:https://space.bilibili.com/479927880 |
| 小石:https://space.bilibili.com/154058118 |
| 中正评测:https://space.bilibili.com/178047796 |
| 笔吧评测室:https://space.bilibili.com/367877 |
| |
| 要买笔记本电脑: |
| https://mp.weixin.qq.com/s/Q7ZcKNRvUCuAhaAzk17rwg |
| 关注公众号搜索最新的 |
| |
小黄鸭代码调试法
| 在你电脑旁边放一只小黄鸭.遇到问题的时候,把问题和它说一遍.可能就会解决了. |
| |
| 旁观者清.把你的代码思路/流程和对方说了一遍 |
| |
| 你程序出现了个问题,bug/功能未实现 |
| 二价亚铁.我的程序要做XXX. 但是现在在准备XXX的时候. 一拍大腿 |
阿里图标
| 免费将图标以字体的形式加载页面 |
| |
| 使用步骤: |
| 1. 打开阿里图标官网:https://www.iconfont.cn/ |
| 2. 注册/登录 |
| 3. 选择需要的图标加入购物车 |
| 4. 下载代码 |
flex布局(弹性盒模型)
| http://c.biancheng.net/css3/flex.html |
| |
| flex是当前较为主流的布局方式 --> 它布局起来更方便,可以取代float --> float一开始不是用来布局用的,有一些小缺陷 |
| |
| 用flex布局的元素称为flex容器. 它里的内容称为容器项目/flex项目 父级:容器 子级:项目 |
| |
| flex布局原理: 就是通过两条轴.把网页分割成一行行/一列列 |
| flex主轴是从左往右. 副轴从上往下. 默认情况下是左右水平布局 |
| |
| flex的使用三要素: |
| 1.主轴的方向(你是要左右水平布局 / 上下垂直布局) |
| 2.主轴的对齐方式 |
| 3.副轴的对齐方式 |
| |
| flex的使用: |
| display: flex; |
| |
| display样式说明 |
| 设置主轴方向(决定左右/上下布局): flex-direction |
| row; |
| column; |
| row-reverse; |
| column-reverse; |
| |
| 设置主轴对齐方式: justify-content |
| flex-start; |
| flex-end; |
| space-around; |
| space-between; |
| |
| 设置副轴对齐方向: align-items |
| center; |
| flex-start; |
| flex-end; |
| |
| 设置换行(如果主轴装不下内容): flex-wrap |
| no-wrap; |
| wrap; |
| |
| flex项目属性: |
| order: 项目的顺序.数值越小,排序越靠前.默认为0 |
百度壁纸背景
拓展
| qq消息轰炸器 : 好玩.拓展用的. |
| 需要用到一个叫pywin32的模块 |
| pip install pywin32 |
| |
| 1.使用时.只能打开一个窗口 |
| 2.对特殊QQ不起作用(企业QQ) |
| 3.该原理.对微信不起作用 |
| |
| 尽量正常用pyc敲py代码 |
| |
| 编程源自于生活 |
| |
| 正常情况下,我想给一个人发消息应该怎么做: |
| 1.找到要发送的人(聊天窗口) |
| 2.准备发送的内容 |
| 3.发送 |
本文作者:二价亚铁
本文链接:https://www.cnblogs.com/xw-01/p/17549030.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步