HTML详解连载(7)-程序员宅基地

技术标签: 前端  前端总结  html  

专栏链接 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 右对齐

特点

顶对齐,具备行内块显示模式特点
浮动的盒子会脱标

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_74888502/article/details/132263129

智能推荐

平均曲率流(MCVF)-程序员宅基地

文章浏览阅读1.2w次。写在前面的话:今天听了一天的电,上午学习英语,下午在那里看《云革命》(Charles Babcock)著,挺不错的,让我对“云”这个晕的概念有了一定了解,关于读后感已经写在了笔记本上,就不再抄录。借此能上网的机会,学习一下平均曲率流。Alvarez等人提出了平均曲率流扩散方程:U被定义为灰度值函数,u0表示t=0时刻输入的灰度值函数。div(.)代表了图像上相等灰度值像素所组成的曲线的_平均曲率流

matlab仿真进程迁移,GUIDE 迁移策略-程序员宅基地

文章浏览阅读658次。将用 GUIDE 开发的 App 迁移到 App 设计工具将使用 GUIDE 创建的 App 迁移到 App 设计工具后,您可以继续以交互方式设计 App 的布局。您还可以利用增强的 UI 组件集和自动调整布局选项等功能,使您的 App 能够响应屏幕大小的变化。您还可以创建 App 并将其作为 Web App 进行共享(需要 MATLAB Compiler)。GUIDE to App Desig..._guide to app designer migration tool for matlab

计算机视觉课程 安装VSCode+python+opencv环境_vscode中怎么安装python opencv-程序员宅基地

文章浏览阅读4.2k次,点赞6次,收藏37次。计算机视觉课程(一)安装VSCode+python+opencv环境整个系统我配置了大约3个小时才基本搞定,由于在写博客前就已经安装完成,所以有的出错的地方无法截图展示。先声明一下,我安装的是VSCode+python+opencv,至于是否还有其他未知的兼容问题还需要我日后使用过程中慢慢总结。主要流程参考这个网址:https://blog.csdn.net/qq_21400315/artic..._vscode中怎么安装python opencv

arm ds开发基于iTOP4412开发板的纯汇编LED流水灯_开发版,汇编-程序员宅基地

文章浏览阅读621次。前言arm ds软件作为arm公司发布的ADS、DS5软件的延续,具备前两款软件的所有功能。同时将Keil MDK单片机开发软件的功能直接整合到了arm ds软件中。现在arm ds就相当于DS5+MDK两款软件的集合体。优点:能够快速开发Cortex-M单片机程序,同时具备开发高端Cortex-A/R系列芯片的能力。亿道电子作为国内最大的arm工具代理商提供了全面而优质的软件售前/售后服务!..._开发版,汇编

时域分析——无量纲特征值含义一网打尽_脉冲因子定义-程序员宅基地

文章浏览阅读9.3k次,点赞11次,收藏97次。上一篇文章中我们讲到了有量纲的特征值含义。(Mr.括号:时域分析——有量纲特征值含义一网打尽)然而在信号表征时,有量纲指标虽然对信号特征比较敏感,但也会因工作条件(如负载)的变化而变化,并极易受环境干扰的影响,具有表现不够稳定的缺陷。相比而言,无量纲指标能够排除这些扰动因素的影响,因而被广泛应用于特征提取的领域当中。无量纲指标主要包括峰值因子,脉冲因子,裕度因子,峭度因子,波形因子以及峭度因子..._脉冲因子定义

微信小程序跳一跳辅助之路(ios版)_微信挑一挑辅助线苹果-程序员宅基地

文章浏览阅读2.1w次。注意:ios的测试环境只能在Mac电脑上,windows上不能测试(黑苹果除外),因为需要安装xcode,而Xcode没有windows版本本次是针对部分程序员所写不适用于新手 !!! 测试环境是python3 + Mac +苹果7(ios11.1.2操作系统)安卓版本请移动:安卓版本跳一跳辅助ios直接改分版本戳这里 飞机票 在安装蟒蛇的前提下,执行如下几步1:先去..._微信挑一挑辅助线苹果

随便推点

oracle转 mysql (数据库-语法篇)_oracle start with connect by 转化成mysql-程序员宅基地

文章浏览阅读1.2k次。oracle数据库 转 mysql 数据库1、rownum2、START WITH CONNECT BY PRIOR3、decode4、to_date1、rownumoracle:select u.name from u from wo where u.login_name = wo.APPLY_USER and rownum = 1 mysql: select u.name from u from wo where u.log_oracle start with connect by 转化成mysql

swiper轮播图的动画_swiper轮播动画-程序员宅基地

文章浏览阅读1.2k次。1. indicator-dots:是否显示小圆点,默认为false2. autoplay: 是否自动轮播3. interval:间隔时间多长4. duration: 动画时间5. circular:是否采用衔接滑动,也就是无缝滑动。6. vertical:是否纵向滑动,默认是横向滑动。7. display-multiple-items:同时显示的滑块数量,默认是1个。这里会出现一个问题,如果把值..._swiper轮播动画

CF1436 E. Complicated Computations MEX性质分析+权值线段树维护区间种类_线段树维护区间的种类-程序员宅基地

文章浏览阅读225次。思维量比较大的一道题,如果之前做过类似的就很简单,但没做过的话真的有点难想。。首先一个比较容易想到的点:从1枚举到n+1,用某种方法计算最终的MEX序列是否出现i。对于一个子数组[L,R],若其MEX等于x,则其必须满足:区间内不包含x,且区间内包含所有1 - x-1的数。关键点在于这里如何进行维护。我们可以这样做:对于区间不好含x这个限制我们可以每次取区间:(lst[a[i]],i),这样区间一定不包含a[i],而包含1 - x-1的数可以考虑用权值线段树维护:从左往右.._线段树维护区间的种类

机器学习白板推导(2)_白板推导 逻辑回归-程序员宅基地

文章浏览阅读1k次。4.Bayesian Network-具体模型Bayesian Network{ 单一:Naive Nayes⟶P(x∣y)=∏i=1pp(xi∣y=1)混合:GMM时间:{Markov ChainGuassian Process(无限维高斯分布)}动态模型 连续:Guassian Bayesian NetworkBayesian \ Network\begin{cases}\ \ 单一:Naive _白板推导 逻辑回归

VM中Windows server 2012 R2系统安装SQL SERVER 2012的安装步骤-程序员宅基地

文章浏览阅读955次。一、WINDOWS SERVER 2012 R2 的系统需要安装SQL SERVER 2012 以上的系统。(标红色的为注意事项)二、开始安装第一步:打开虚拟机设置,将下好的SQL2012的映像文件导入。(需要在选项中设置共享物理机的硬盘,即可导入文件)第二步:检查虚拟机中的驱动器是否连接第三步:打开控制面板中的程序(启用或关闭WINDOWS功能)第..._server 2012r2 sql 2012

解决卸载nvidia闭源驱动致Manjaro无法启动问题_arch n卡 starting hostname-程序员宅基地

文章浏览阅读1.8k次。  因在Manjaro上折腾KDE和GNOME双桌面系统时无法登录GNOME on wayland,怀疑是nvidia闭源驱动的问题,便卸载该闭源驱动,本以为video-linux驱动会自动起作用,谁曾想无法启动。  问题表现主要是停留在自检阶段,即停在Starting Hostname Service...,重启动选择回滚,也只多走了三步,即停在下图这个节点不动。  显然,问题出在nvidia驱动程序上,试着重新安装驱动程序。Ctrl+Alt+F3,可以进入tty3,看来还有希望。登录后._arch n卡 starting hostname