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 | 右对齐 |
特点
顶对齐，具备行内块显示模式特点
浮动的盒子会脱标
智能推荐
dell服务器uefi启动不了系统安装系统安装,新版戴尔bios设置UEFI引导的方法-程序员宅基地
文章浏览阅读2.2w次，点赞5次，收藏38次。新版新版戴尔大部分已经不支持传统引导了，因此如果有用户用传统模式安装的话容易导致安装失败。下面小编就给大家介绍下新版戴尔bios设置UEFI引导的方法。戴尔开启UEFI模式注意事项1、UEFI+GPT安装系统只适用于64位系统2、UEFI模式开启后分区形式需要采用GPT分区，我们可以用Diskgenius分区工具快速分区时选择GUID(GPT)分区3、UEFI模式在安装win7时注意开启"兼容模式..._dell装uefi系统bios设置
【人工智能初学】人工智能学习体验感悟，初学必看全局把握！！！（自己的一点小见解+应用体验＜语音，图画，文本等应用＞）_人工智能学习感想-程序员宅基地
文章浏览阅读150次。人工智能的研究一般是以知识表示，知识的获取和知识的应用为归依。虽然不同的学科致力于发现不同领域的知识，但我们应该承认所有学科都是为了发现知识为目标，而人工智能希望发现可以不受领域限制，适用于任何领域的知识，包括知识表示，知识获取以及知识应用的一般规律，算法和实现方式等。但大多数人只是浅尝辄止的知道人工智能很厉害可以使计算机或者计算机控制的机器人代替部分简单的工作，知道一些生活中的兴起的事务与人工智能这门学科息息相关，但并没有系统性的了解过人工智能，所以今天在这里我们来浅聊人工智能。_人工智能学习感想
linux devkmem 源码,linux dev/mem dev/kmem实现访问物理/虚拟内存-程序员宅基地
文章浏览阅读451次。dev/mem: 物理内存的全镜像。可以用来访问物理内存。/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。调试嵌入式Linux内核时，可能需要查看某个内核变量的值。/dev/kmem正好提供了访问内核虚拟内存的途径。现在的内核大都默认禁用了/dev/kmem，打开的方法是在 make menuconfig中选中 device drivers --> ..._dev/mem 源码实现
vxe-table 小众但功能齐全的vue表格组件-程序员宅基地
文章浏览阅读7.1k次，点赞2次，收藏19次。vxe-table，一个小众但功能齐全并支持excel操作的vue表格组件_vxe-table
（开发）bable - es6转码-程序员宅基地
文章浏览阅读62次。参考：http://www.ruanyifeng.com/blog/2016/01/babel.htmlBabelBabel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item..._让开发环境支持bable
FPGA 视频处理 FIFO 的典型应用_fpga 频分复用 视频-程序员宅基地
文章浏览阅读2.8k次，点赞6次，收藏29次。摘要：FPGA视频处理FIFO的典型应用，视频输入FIFO的作用，视频输出FIFO的作用，视频数据跨时钟域FIFO，视频缩放FIFO的作用_fpga 频分复用 视频
随便推点
宜兴市计算机中等学校,重磅！江苏省陶都中等专业学校正式揭牌！-程序员宅基地
文章浏览阅读559次。原标题：重磅！江苏省陶都中等专业学校正式揭牌！ 昨天下午，江苏省陶都中等专业学校揭牌仪式在原丁蜀中专举行。原来的丁蜀中专、和桥中专、张渚中专三校资源，整合成江苏省陶都中等专业学校，施行“一校三区”的办学格局。整合后，原来的三校分别为：陶都中专丁蜀校区、陶都中专和桥校区、陶都中专张渚校区，分处三镇。 新诞生的省陶都中专有哪些亮点？今后将如何发展？小兴带你一探究竟！据了解，目前学校共有全日制学历教..._宜兴电大和陶都中等专业学校哪个好
【蓝桥杯省赛真题39】python输出最大的数 中小学青少年组蓝桥杯比赛 算法思维python编程省赛真题解析-程序员宅基地
文章浏览阅读1k次，点赞26次，收藏8次。第十三届蓝桥杯青少年组python编程省赛真题一、题目要求（注：input（）输入函数的括号中不允许添加任何信息）1、编程实现给定一个正整数N，输出正整数N中各数位最大的那个数字。例如:N=132，则输出3。2、输入输出输入描述：只有一行，输入一个正整数N输出描述：只有一行，输出正整数N中各数位最大的那个数字输入样例：
网络协议的三要素-程序员宅基地
文章浏览阅读2.2k次。一个网络协议主要由以下三个要素组成：1.语法数据与控制信息的结构或格式，包括数据的组织方式、编码方式、信号电平的表示方式等。2.语义即需要发出何种控制信息，完成何种动作，以及做出何种应答，以实现数据交换的协调和差错处理。3.时序即事件实现顺序的详细说明，以实现速率匹配和排序。不完整理解：语法表示长什么样，语义表示能干什么，时序表示排序。转载于:https://blog.51cto.com/98..._网络协议三要素csdn
The Log: What every software engineer should know about real-time data's unifying abstraction-程序员宅基地
文章浏览阅读153次。主要的思想，将所有的系统都可以看作两部分，真正的数据log系统和各种各样的query engine所有的一致性由log系统来保证，其他各种query engine不需要考虑一致性，安全性，只需要不停的从log系统来同步数据，如果数据丢失或crash可以从log系统replay来恢复可以看出kafka系统在linkedin中的重要地位，不光是d..._the log: what every software engineer should know about real-time data's uni
《伟大是熬出来的》冯仑与年轻人闲话人生之一-程序员宅基地
文章浏览阅读746次。伟大是熬出来的 目录 前言 引言 时间熬成伟大：领导者要像狼一样坚忍 第一章 内圣外王——领导者的心态修炼 1. 天纵英才的自信心 2. 上天揽月的企图心 3. 誓不回头的决心 4. 宠辱不惊的平常心 5. 换位思考的同理心 6. 激情四射的热心 第二章 日清日高——领导者的高效能修炼 7. 积极主动，想到做到 8. 合理掌控自己的时间和生命 9. 制定目标，马..._当狼拖着受伤的右腿逃生时,右腿会成为前进的阻碍,它会毫不犹豫撕咬断自己的腿, 以
有源光缆AOC知识百科汇总-程序员宅基地
文章浏览阅读285次。在当今的大数据时代，人们对高速度和高带宽的需求越来越大，迫切希望有一种新型产品来作为高性能计算和数据中心的主要传输媒质，所以有源光缆（AOC）在这种环境下诞生了。有源光缆究竟是什么呢？应用在哪些领域，有什么优势呢？易天将为您解答！有源光缆（Active Optical Cables，简称AOC）是两端装有光收发器件的光纤线缆，主要构成部件分为光路和电路两部分。作为一种高性能计..._aoc 光缆