创建具有视频背景的网站| HTML和CSS 。使用HTML和CSS在您的网站上添加Glass效果。...为初学者学习HTML的简便方法 演示地址：https://wanghao221.github.io/video-background/ HTML代码 这是基本的HTML，对所有HTML文件都很重要。...我使用Google的样式在此HTML文件中导入Poppins，因为大多数人的设备上没有Poppins字体。 <head
CSS的作用是给 HTML 元素添加样式和布局，接下来利用CSS的 white-space 和 overflow 这两个属性让元素实现左右滑动，效果如下： ?...一、所有的菜单项单行显示，不换行 前端的默认布局方式是 流式布局 ，块级元素 在流式布局中独占一行，块级元素会自上而下的排列且在默认宽度是父类元素的100%而高度默认被内容撑开，例如 div。...从下面的注释可以知道我们要选择 scroll ，上下左右滑动可以通过 overflow-x 和 overflow-y 分别控制各个方向的具体表现。 /* 默认值。.../day6.js"> 利用CSS让元素可以左右滑动 点击滚动菜单 day6.css /*清除标签默认边距
12个HTML和CSS必须知道的重点难点问题 这12个问题，基本上就是HTML和CSS基础中的重点个难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？...PS：如果想要元素超出，可以设置margin属性 如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。...rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。 7.CSS 引入的方式有哪些?...src与href的区别 href是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。...因此，简单的图片下面留白行为表现，本质上，就是vertical-align和line-height背地里搞基造成的。 知道了问题的原因，我们就可以对症下药，准确搞定图片下面我们不希望看到的间隙。...结果会发现，上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。 下面问题来了：上面的间隙是如何产生的？下面的间隙是如何产生的？如果去除这些间隙呢？...很多时候，复杂问题是由简单问题组合而成的，实际上，这里的间隙现象的始作俑者和上面的简单现象一样，都是vertical-align和line-height搞基带来的不好的影响。...结果图片和图片之间的间隙是没有了，但是，图片和最后的占位元素之间依然有个几像素的间距，，啊啊啊啊，这究竟是什么鬼？ ? ? ? ?
在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点，这个假想又似乎存在的空白节点，我称之为“幽灵空白节点”。...因此，简单的图片下面留白行为表现，本质上，就是vertical-align和line-height背地里搞基造成的。 知道了问题的原因，我们就可以对症下药，准确搞定图片下面我们不希望看到的间隙。...为了便于大家看其究竟，我把占位i元素outline高亮下，于是，效果如下： ? ? ? ? 结果会发现，上面巨大的空隙是由占位i元素上面和下面的间隙共同组成的。 下面问题来了：上面的间隙是如何产生的？...很多时候，复杂问题是由简单问题组合而成的，实际上，这里的间隙现象的始作俑者和上面的简单现象一样，都是vertical-align和line-height搞基带来的不好的影响。...按照之前问题解决方法，我们可以直接来个line-height:0解决垂直间隙问题： div { line-height: 0; } 结果图片和图片之间的间隙是没有了，但是，图片和最后的占位元素之间依然有个几像素的间距
8、图片间隙问题如何解决 9、项目中你是如何做图片优化的？ 10、简述rem布局原理 11、解释下浮动和它的工作原理？清除浮动有哪些方式？ 12、什么是 BFC？...:before 和 :after 这两个伪元素，是在CSS2.1里新出现的。...这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。 8、图片间隙问题如何解决 两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。...这个办法不仅可以解决图片下面的小空白，也能解决图片与图片之间的小空白 缺点是让父元素里的文字的字号和行高都变成了0，文字看不见了，需要重新定义文字的字号和行高 .imgwrap{ font-size...3、link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.1才有的语法，故老版本浏览器（IE5之前）不能识别。
* 写css时要注意z-index的设置，一般来说 会给不同的元素 设置不同的区间，以防元素之间相互覆盖。...* CSS中BFC详解 https://www.cnblogs.com/chen-cong/p/7862832.html clear: both; 的作用是：保证该元素左右两侧 没有浮动元素...* 像文本一样 排列block元素 * 没有 清除浮动 等问题，简单易用 * 但是需要 处理间隙 多个inline-block之间的间隙 相当于 文字与文字 之间的间隙。...不管使用什么字体，两个字之间 始终是有间隙的。 所以 间隙就出现在了 inline-block上面。 解决办法： 1....把inline-block元素 之间的 空隙注释掉，就可以了。 还是推荐使用 设置字体 的方式，来处理inline-block之间的间隙。
2.元素分类 在css中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块状元素。...div{ display:inline; } 内联元素特点： 和其他元素都在一行上； 元素的高度、宽度及顶部和底部边距不可设置； 元素的宽度就是它包含的文字或图片的宽度，不可改变 解决行内元素间隙bug...问题 行内元素之间会产生间隙bug问题的场景： 1、当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。...inline-block元素特点： 和其他元素都在一行上； 元素的高度、宽度、行高以及顶和底边距都可以设置； 3.盒子模型 3.1什么是盒子模型 css中，盒子模型是关于元素的宽高的。如下图： ?...css内定义的宽width和高height指的是填充padding以内的内容。
目前为止我们已经探讨了很多CSS3中的新功能和新特征。...倒影偏移量 Offset属性值用来定义图片和倒影影像之间的间距。...参考下面的代码： img { -webkit-box-reflect: below 10px; } 上面的代码中，我们使图片和倒影影像之间相聚10px； 给倒影增加消隐效果 在现实生活中，倒影的出现通常是上半部比较清晰...因为所有的属性都是来实现倒影的，而且这些属性都有火狐浏览器独有的前缀，和Webkit的倒影不冲突，所以在代码在可以把两个版本倒影方法都写上，保证两种浏览器里都有效果。...CSS倒影技术在火狐浏览器中的小问题 有时，火狐浏览器生成的渐变色图形会比背景元素稍微小一些，导致有一些间隙线出现。
） 1.4 标签之间的换行间隙被解析（问题） （得到内联元素的属性） 1.5 ie6 ie7 不支持块级元素的 inline-block（问题...important 1.7 li里子元素都浮动，各个li之间在IE6、7下方会产生4px间隙问题 解决办法：给li加上 *vertical-align...: top; 1.8 文字复制问题：两个浮动元素中间，有内联元素或者注释，并且和父级元素宽度相差不超过3px-->会出现小尾巴（文字自动被复制到内联元素中） 解决办法1：两个浮动元素中间避免出现内联元素或注释...） 1.4 标签之间的换行间隙被解析（问题） （得到内联元素的属性） 1.5 ie6 ie7 不支持块级元素的 inline-block（问题...important 1.7 li里子元素都浮动，各个li之间在IE6、7下方会产生4px间隙问题 解决办法：给li加上 *vertical-align
一个静态页面绝大部分由以下4种元素组成： 文字 图片 超链接 音频、视频 所以，想要开发一个页面，就得认真学习用来展示这些内容的标签。... （3）二者区别 p标签会导致段与段之间有一定的间隙，而使用br标签则不会。 br标签是用来给文字换行的；p标签是用来给文字分段的。...> 粗体标签.png 去除后，两个加粗字体在同一行显示，且之间有一定的间隙。...> 斜体标签.png 去除后，两个斜体字体在同一行显示，且之间有一定的间隙。...八、块元素和行内元素 块元素、行内元素，是 HTML 中极其重要的概念，同时也是 CSS 的重要基础。
的缩写，引入的文件与html本身的关系，样式表 type:告知浏览器这段代码需要解析 href:需要引入的css的路径 特点:书写方便，复用性强， 3.css选择器 (1...:是否让标签元素显示 属性:none(消失),block(显示),inline(覆盖) (7)浮动元素 div是行元素 float:浮动方向 left,right 缺点：会对父元素和相邻元素没有设置浮动的...造成不可预测的后果 属性：clear:both /left/right 清除浮动 5.css的盒子模型 border:盒子的边框 padding:盒子内部的间隙 margin...可以动态的修改(增删)html及 css的代码 可以动态的校验数据 3.js的历史及组成？...：length 方法:indexOf():检索字符串 lastIndexOf():从后检索 split():分割为字符串数组 substring():提取两个指定索引号之间的字符
3）max-width：none之外的不论什么值 在IE6中由于布局而常出现的问题包含： 1）拥有布局的元素不会收缩：即是假设元素设定了尺寸，而元素内容超过元素尺寸时，通常是内容溢出到元素外，而IE6...3）相对定位的元素没有布局 4）在拥有布局的元素之间外边距不会叠加 5）在没有布局的块级链接上，单击区域仅仅覆盖文本 6）在滚动中。...列表项上的背景图片间歇性的显示和消失 2、hack和过滤器 1）IE条件凝视 a）适用于IE5及其更高版本号 <!...两个元素之间会自己主动加入一个3像素的间隙 修复：方法一：将非浮动元素设置为浮动；方法二：为非浮动元素设置规则：_zoom: 1; margin-left: value; _margin-left: value...修复：方法一：去掉父元素的背景颜色或图片；方法二：避免清除浮动元素与浮动元素接触；方法三：给父元素指定一个行高；方法四：将浮动元素和父元素的position属性设置为relative。
结果和上图一致； {# 这个标签的class属性有两个值div2 div3 #} 四 伪类 伪类是对选择器添加特效 <!...#} letter-spacing: 10px; {# 文本中每个字母的间隙 #} word-spacing: 10px; {# 文本中每个单词的间隙 #} text-transform: capitalize...; {# 文本中单词首字母大写 #} 5.外边距和内边距 在html中一切皆盒子。...margin是盒子与盒子之间的距离，border是盒子的边界，padding是盒子边界距离内容的距离 注意：当指定一个CSS元素的长度和宽度时，指定的是内容区域的长宽，要指定完全体的长宽，还需指定边宽和边距
带着问题去看书学习，不失为一种好的方式。...HTML5（纯文本类型的语言）、CSS3（层叠样式表）和JavaScript（网页设计的一种脚本语言） 1-2 概述HTML5文件的基本结构。 一个HTML5文件由一些元素和标签组成。...元素是HTML5文件的重要组成部分，例如title（文件标题）、img（图片）及table（表格）等。元素名不区分大小写，HTML5用标签来规定元素的属性和它在文件中的位置。...4、块状元素的高度，行高及其外边距和内边距都可以通过CSS属性来控制和调整！ 5、在不设置宽度的情况下，块级元素的宽度则和它的父级元素的宽度一致。...1、内联块状元素和其他相邻元素同在一行， 但它们之间存在间隙，间隙大小为字体大小； 2、内联块状元素的高度、宽度、行高以及顶和底边距都可设置。
flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范。 5、响应式布局。 float 布局 是 CSS 中一种比较麻烦的属性，涉及到 BFC 和清除浮动（面试的重点）。...inline-block 布局 对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。 思路：像文本一样去排列 block 元素，没有清除浮动等问题。 存在的问题：需要处理间隙。... ? 上面的代码，存在两个问题。 问题一：如果设置div2的宽度为 200px 之后，div2 掉下来。...问题二：div1和div2设置为 inline-block之后，这两个盒子之间存在了间隙。这是因为，此时的 div1和div2 已经被当成文本了。文本和文本之间，本身就会存在间隙。...办法2：在写法上，去掉div1和div2之间的换行。
CSS第二天 ---- 选择器进阶： 选择器 作用 格式 示例 ⭕后代选择器 找后代 选择器之间通过 空格 分隔 .nav .mark { css } 子代选择器 找儿子 选择器之间通过 > 分隔 .nav...> .mark { css } ⭕并集选择器 找到多类元素 选择器之间通过 ，分隔 div,p,span { css } 交集选择器 找同时满足多个选择器的元素 选择器之间紧挨着 p.mark { css...语法：通过简写语法，快速生成代码 HTML篇： 快速生成标签带有类名的标签 p .one 快速生成多个类名 .one + .two 快速生成带有类名的div .one 快速生成类名里面包含类名的div...… ②行内元素：display：inline 一行显示多个 默认宽度/高度是内容的高度和宽度 不能设置高度和宽度 注意：a元素不能包含a元素，a链接可以放任何块级元素 代表标签：a、span 、b、u、...、button、select…… 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline 默认有一个间隙，那个间隙是写代码换行的那个间隙，你把代码排成一排，就没有间隙了
更新数组中的最小值, 加上添加的元素的高和间隔 */ 代码参考 $(function() { // 1....获取父元素和子元素, 以及他们的宽高 var $box = $(this); var $items = $box.children(); var boxWidth = $box.width(...// left: 最小值索引 * ( 元素宽度 + 间隙 ) // 设置位置 $(this).css({ top: min + space, left:...那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。...跨域 【演示跨域问题.html】 jsonp( 无兼容性问题 ) JSONP(JSON with Padding)、可用于解决主流浏览器的跨域数据访问的问题。
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning, 虽然这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。...3.网格布局 (Grid) 描述: CSS 网格是一个用于 web 的二维布局系统，Grid 网格布局设计用于同时在两个维度上把元素按行和列排列整齐, 为啥会出现网格布局？...、行间隙 描述: gap、grid-gap 属性是用来设置网格行与列之间的间隙（gutters），该属性是 row-gap 和 column-gap 的简写形式，建议在开发中使用gap而不是grid-gap.../* 参数 */ : 网格线之间的间隙宽度。 : 网格线直接的间隙宽度，相对网格容器的百分比。...grid 布局 display: grid, 并使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道，最后使用grid-gap定义网格间隙
第1条跳过，对根元素应用外边距不在情理之中 第2条引入了一个新概念，叫“间隙”，英文名clearance，看样子与clear属性有关，实际符合直觉，是指clear属性导致元素位置移动形成的间隙，见CSS...隐含两个关键点： 具有clear属性 并且（clear属性）让元素位置发生移动了 如果满足这两个条件，就说一个元素带有间隙 注意：如果应用了clear属性，元素的实际位置不变，比如通过margin-top...两个兄弟盒之间的垂直距离由’margin’属性决定 也就是说，如果没人建立新的BFC，那么就处于当前BFC。...就是说这两个外边距没被“墙”隔开，“墙”分3种： 种族：双方必须都是流内块级盒 信仰：处于同一个块格式化上下文 地域：二者之间没有行框（line box），空隙，内边距和边框 到这里，“相邻”已经很清楚了...：问题评论很有价值，有助于理解行内格式化上下文 Margin collapse and clearance：clearance的示例 带有间隙的外边距合并示例：要用Firefox看，因为Chrome和Safari
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
