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 | 右对齐 |
特点
顶对齐，具备行内块显示模式特点
浮动的盒子会脱标
智能推荐
240320俄罗斯方块java,JAVA游戏编程之三----j2me 手机游戏入门开发--俄罗斯方块_2-程序员宅基地
文章浏览阅读202次。packagecode;//importjava.awt.*;//importjava.awt.Canvas;//importjava.awt.event.*;//importjavax.swing.*;importjava.util.Random;importjavax.microedition.lcdui.*;//写界面所需要的包/***//***俄罗斯方块*高雷*2007年1..._240×320java游戏
在线电影院售票平台(源码+开题报告)-程序员宅基地
文章浏览阅读779次，点赞14次，收藏19次。然后，实现系统的数据管理和服务功能，包括用户的注册与登录、电影的分类与展示、电影信息的查询与推荐、座位的选择与预订、在线支付与电子票生成等。此外，随着在线视频平台的兴起，越来越多的人选择在线观看电影，这对传统电影院产生了巨大的冲击。研究意义： 开发在线电影院售票平台对于提升用户的观影体验、优化电影院的运营效率、促进电影产业的发展具有重要的意义。该系统旨在通过技术手段解决传统电影院售票中的问题，提供一个集成化的电影信息展示、座位选择、在线支付和用户评价平台，同时也为电影院和电影制作方提供有效的工具。
程序员熬夜写代码，用C/C++打造一个安全的即时聊天系统！_基于c++的即时聊天系统设计-程序员宅基地
文章浏览阅读509次。保护我们剩下的人的通话信息安全，使用TOX可以让你在和家人，朋友，爱人交流时保护你的隐私不受政府无孔不入的的偷窥.关于TOX：其他牛逼的软件因为一些细化服务问你要钱的时候， TOX分文不取 . 你用了TOX， 想干嘛就干嘛.网友评论：项目源码展示：源码测试效果：最后，如果你学C/C++编程有什么不懂的，可以来问问我哦，或许我能够..._基于c++的即时聊天系统设计
linux Java服务swap分区被占用内存泄露问题故障及解决方法_linux swap占用很高-程序员宅基地
文章浏览阅读584次。鱼弦：CSDN内容合伙人、CSDN新星导师、全栈领域创作新星创作者 、51CTO(Top红人+专家博主) 、github开源爱好者（go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen）当Java服务在Linux系统中运行时，可能会出现swap分区被占用的内存泄露问题，导致系统性能下降或者崩溃。下面是该问题的故障及解决方法、底层结构、架构图、工作原理、使用场景详解和实际应用方式、原理详细描述、相关命令使用示例以及文献材料链接。_linux swap占用很高
word中利用宏替换标点标点全角与半角-程序员宅基地
文章浏览阅读662次。Alt+F11，然后插入-模块：复制下面代码到编辑窗口：Sub 半角标点符号转换为全角标点符号()'中英互译文档中将中文段落中的英文标点符号替换为中文标点符号 Dim i As Paragraph, ChineseInterpunction() As Variant, EnglishInterpunction() As Variant Dim MyRange..._替换半角宏
Android WebView使用总结_android webview真正加载完成-程序员宅基地
文章浏览阅读2.8k次。#.简介： WebView是Android提供的用来展示展示web页面的View，内部使用webkit浏览器引擎（一个轻量级的浏览器引擎），除了展示Web页面外，还可与Web页面内的JS脚本交互调用。WebView内部的WebSetting对象负责管理WebView的参数配置； WebViewClient负责处理WebView的各种请求和通知事件，在对应事件发生时会执行WebViewClient的对应回调； ChromeWebviewClient辅助Webview处理与JS一些交互......_android webview真正加载完成
随便推点
bitcoin 调试环境搭建-程序员宅基地
文章浏览阅读1.6k次。_bitcoin 调试环境搭建
曲线生成 | 图解B样条曲线生成原理(基本概念与节点生成算法)-程序员宅基地
文章浏览阅读4.3k次，点赞93次，收藏94次。为了解决贝塞尔曲线无法局部修正、控制性减弱、曲线次数过高、不易拼接的缺陷，引入B样条曲线(B-Spline)。本文介绍B样条曲线的基本概念：节点向量、支撑性、次数阶数、加权性质、节点生成算法等，为后续曲线计算打下基础。_样条曲线生成
CDH安装宝典之ClouderaManager_/opt/cloudera/cm-agent/service/mgmt/mgmt.sh: line -程序员宅基地
文章浏览阅读902次。配置本地repo库下载我的阿里云盘文件文件放置#创建目录mkdir -p /opt/cloudera/parcel-repo/mkdir -p /opt/cloudera/cm/yum install createrepoCDH 6.2.0 的三个文件放到/opt/cloudera/parcel-repo/中，并且注意把sha256后缀的文件名修改为sha#执行createrepo命令生成rpm元数据 最终/opt/cloudera/parcel-repo/会多一个repodata目录_/opt/cloudera/cm-agent/service/mgmt/mgmt.sh: line 76: /usr/java/jdk1.8.0_181
uni.canvasToTempFilePath在app正常，微信小程序报错: fail canvas is empty-程序员宅基地
文章浏览阅读943次，点赞2次，收藏2次。uni.canvasToTempFilePath_uni.canvastotempfilepath
SDRAM笔记_sdram 干扰-程序员宅基地
文章浏览阅读3.1k次。SRAM ：静态RAM，不用刷新，速度可以非常快，像CPU内部的cache，都是静态RAM，缺点是一个内存单元需要的晶体管数量多，因而价格昂贵，容量不大。DRAM：动态RAM，需要刷新，容量大。SDRAM：同步动态RAM，需要刷新，速度较快，容量大。DDR SDRAM：双通道同步动态RAM，需要刷新，速度快，容量大。........................_sdram 干扰
Excel转SQL语句_excel数据怎么生成sql语句-程序员宅基地
文章浏览阅读7.3k次。假设表格有A、B、C、D四列数据，希望导入到你的数据库中表格table，对应的字段分别是col1、col2、col3、col4。_excel数据怎么生成sql语句