HTML详解连载（7）-程序员宅基地
HTML详解连载（7）
专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。
开始喽
结构伪类选择器
作用
根据元素的结构关系查找元素
| 关键字 | 含义 |
|---|---|
| E:first-child | 查找第一个E元素 |
| E:last-child | 查找最后一个E元素 |
| E:nth-child（N） | 查找第N个元素(第一个元素N值为1) |
:nth-child（公式）
作用
根据元素的结构关系查找多个元素
举例
偶数 2n
奇数 2n-1,2n+1
5的倍数 5n
5个以后 n+5
5个以前 -n+5
伪元素选择器
作用
创建虚拟元素（伪元素），用来摆放装饰性的内容
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素
注意：
必须设置content：“”属性，用来设置伪元素的内容，如果没有内容，则引号留空即可
不写伪元素失效
伪元素默认是行内显示模式
权重和标签选择器相同
PxCoook
像素大厨是一款切图设计工具软件，支持PSD文件的文字、颜色、距离自动智能识别
开发面板（自动智能识别）
设计面板（手动测量尺寸和颜色）
盒子模型-组成
作用
布局网页，摆放盒子和内容
盒子模型-重要组成部分
内容区域-width & height
内边距-padding（出现在内容和盒子边缘之间）
边框线-border
外边距-margin（出现在盒子外面）
盒子模型-边框线
属性名
boder(bd)
属性值
边框线粗细 线条样式 颜色（不区分顺序）
常用线条样式
| 关键字 | 含义 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
设置单方向边框线
属性名
border-方位名词（bd+方位名词首字母）
属性值
边框线粗细，线条样式 颜色（不区分顺序）
盒子模型-内边距
作用
设置内容与盒子边缘之间的距离
属性名
padding/padding-方位名词
盒子模型-尺寸计算
默认情况
盒子尺寸=内容尺寸+border尺寸+内边距尺寸
结论
给盒子加border/padding会撑大盒子
解决方法
手动做减法，减掉border/padding的尺寸
内减模式：box-sizing:border-box
盒子模型-外边距
作用
拉开两个盒子之间的距离
属性名
margin
清除默认样式
示例
默认的内外边距
盒子模型-元素溢出
作用
控制溢出元素的内容的像是方式
属性名
overflow
属性值
| 关键字 | 含义 |
|---|---|
| hidden | 退出隐藏 |
| scroll | 溢出滚动（无论是否溢出，都显示滚动条位置） |
| auto | 溢出滚动（溢出才显示滚动条） |
外边距问题-合并现象
场景
垂直排列的兄弟元素，上下margin会合并
现象
取两个margin中的较大值生效
外边距问题-塌陷问题
场景
父子级的标签，子级的添加上外边距会产生塌陷问题
现象
导致父级一起向下移动
解决方法
取消子集margin，父级设置padding
父级设置overflow：hidden
父级设置border-top
行内元素-内外边距问题
场景
行内元素添加margin和padding，无法改变元素垂直位置
解决方法
给行内元素添加line-height可以改变垂直位置
盒子模型-圆角
作用
设置元素的外边框为圆角
属性名
border-radius
属性值
数字+px/百分比（取值最大为50%）
注意
属性值是圆角半径
多值
从坐上叫顺时针赋值，没有对应的角与对角值相同
常见应用-正圆形状
给正方形盒子设置圆角属性值为宽高的一半/50%
常见应用-胶囊形状
给长方形盒子圆角属性值为盒子高度的一半
盒子模型-阴影
作用
给元素设置阴影效果
属性名
box-shadow
属性值
X轴偏移量 Y轴偏移量 模糊半径 扩展半径 颜色 内外阴影
注意：
X轴偏移量和Y轴偏移量必须书写
默认是外阴影，内阴影需要添加inset
标准流
也叫文档流，指的是标签在页面中默认的排布规则
举例
块元素独占一行，行内元素可以一行显示多个
浮动
作用
让块元素水平排列
属性名：float
属性值
| 关键字 | 含义 |
|---|---|
| left | 左对齐 |
| right | 右对齐 |
特点
顶对齐，具备行内块显示模式特点
浮动的盒子会脱标
智能推荐
彻底扒光 通过智能路由器拆解看其本质-程序员宅基地
文章浏览阅读1.7k次。可以看到很多联发科的MT芯片摘自：https://net.zol.com.cn/531/5312999.html彻底扒光 通过智能路由器拆解看其本质2015-07-23 00:40:00[中关村在线 原创] 作者：陈赫|责编：白宁收藏文章 分享到 评论(24)关注智能路由器拆解的朋友们注意啦！我们已经将这五款产品彻底扒开，将主板的真容展现在了大家的眼前。网友们可以看见这些智能路由器主板的做工和用料，我们还为网友们展示了主要的电子元器件，供大家品评观赏。..._路由器拆解
Java--深入JDK和hotspot底层源码剖析Thread的run()、start()方法执行过程_jdk的源码hotspot跟jdk是分开的-程序员宅基地
文章浏览阅读2.1k次，点赞101次，收藏78次。【学习背景】今天主要是来了解Java线程Thread中的run()、start()两个方法的执行有哪些区别，会给出一个简单的测试代码样例，快速理解两者的区别，再从源码层面去追溯start()底层是如何最终调用Thread#run()方法的，个人觉得这样的学习不论对面试，还是实际编程来说都是比较有帮助的。进入正文~学习目录一、代码测试二、源码分析2.1 run()方法2.2 start()方法三、使用总结一、代码测试执行Thread的run()、start()方法的测试代码如下：public_jdk的源码hotspot跟jdk是分开的
透视俄乌网络战之一：数据擦除软件_俄乌网络战观察(一)-程序员宅基地
文章浏览阅读4.4k次，点赞90次，收藏85次。俄乌冲突中，各方势力通过数据擦除恶意软件破坏关键信息基础设施计算机的数据，达到深度致瘫的效果，同时窃取重要敏感信息。_俄乌网络战观察(一)
Maven私服仓库配置-Nexus详解_nexus maven-程序员宅基地
文章浏览阅读1.7w次，点赞23次，收藏139次。Maven 私服是一种特殊的Maven远程仓库，它是架设在局域网内的仓库服务，用来代理位于外部的远程仓库（中央仓库、其他远程公共仓库）。当然也并不是说私服只能建立在局域网，也有很多公司会直接把私服部署到公网，具体还是得看公司业务的性质是否是保密的等等，因为局域网的话只能在公司用，部署到公网的话员工在家里也可以办公使用。_nexus maven
基于AI的计算机视觉识别在Java项目中的使用 (四) —— 准备训练数据_java ocr ai识别训练-程序员宅基地
文章浏览阅读934次。我先用所有的样本数据对模型做几轮初步训练，让深度神经模型基本拟合(数万条记录的训练集，识别率到99%左右)，具备初步的识别能力，这时的模型就是“直男”。相较于训练很多轮、拟合程度很高的“油腻男”，它的拟合程度较低，还是“直男愣头青”。..............._java ocr ai识别训练
hibernate 数据库类型 date没有时分秒解决_hibernate解析時間只有年月日沒有時分秒-程序员宅基地
文章浏览阅读688次。一、问题现象： 在数据库表中日期字段中存的日期光有年月日，没有时分秒。二、产生原因：三 解决办法 检查表的相应映射xml文件。 <property name="operateDate" type="Date">如果同上面所写，那问题出在 type类型上了正确写法 ：<property name="operateDate" type="java.util..._hibernate解析時間只有年月日沒有時分秒
随便推点
springbbot运行无法编译成功，找不到jar包报错：Error:(3, 46) java: 程序包org.springframework.context.annotation不存在-程序员宅基地
文章浏览阅读1k次，点赞2次，收藏2次。文章目录问题描述：解决方案：问题描述：提示：idea springbbot运行无法编译成功，找不到jar包报错E:\ideaProject\demokkkk\src\main\java\com\example\demo\config\WebSocketConfig.javaError:(3, 46) java: 程序包org.springframework.context.annotation不存在Error:(4, 46) java: 程序包org.springframework.conte_error:(3, 46) java: 程序包org.springframework.context.annotation不存在
react常见面试题_recate面试-程序员宅基地
文章浏览阅读6.4k次，点赞6次，收藏36次。1、redux中间件中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer 。这种机制可以让我们改变数据流，实现如异步 action ，action 过滤，日志输出，异常报告等功能。常见的中间件：redux-logger：提供日志输出redux-thunk：处理异步操作..._recate面试
交叉编译jpeglib遇到的问题-程序员宅基地
文章浏览阅读405次。由于要在开发板中加载libjpeg，不能使用gcc编译的库文件给以使用，需要自己配置使用另外的编译器编译该库文件。/usr/bin/ld:.libs/jaricom.o:RelocationsingenericELF(EM:40)/usr/bin/ld:.libs/jaricom.o:RelocationsingenericELF(EM:40)...._jpeg_utils.lo: relocations in generic elf (em: 8) error adding symbols: file
【办公类-22-06】周计划系列（1）“信息窗” （2024年调整版本）-程序员宅基地
文章浏览阅读578次，点赞10次，收藏17次。【办公类-22-06】周计划系列（1）“信息窗” （2024年调整版本）
SEO优化_百度seo resetful-程序员宅基地
文章浏览阅读309次。SEO全称为Search Engine Optimization，中文解释为搜索引擎优化。一般指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准..._百度seo resetful
回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测_猎食者优化算法-程序员宅基地
文章浏览阅读438次。回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测_猎食者优化算法