文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端三件套——我看HTML及CSS

    ，在我映像里初中的时候老师写的第一个网页就是用HTML写的，如今过去好多年了，我也用HTML写网页了 ，哈哈。...用英语来记忆的话就是，单词——head，意思是头部的，有几个特点是 标题默认加粗，字号变大 标题一般独自占一行 //用代码来看一下就是这样的 用代码来看一下就是这样的 2.段落和换行...用英文来解释的话是，div——division，表示分割分区，span意思是跨度，跨距 有一点的区别 div在h5中一行只能放一个，又称为大盒子 span可以放多个，所以可以称为小盒子 CSS 我不知道你们有没有见过化妆之前和化妆之后的女生...如果说按照名字和身份证来看id和class的话，我感觉就很可以，就比如说我叫码神，你也叫码神，那么我们就重名了，但是我的id：秋名山码神，而你是：华山码神，这样我们就区分开了，所以说id和class的区别就是 id定义一次只能调用一次...，而class定义一次可以调用多次 用代码实现就是 <!

    61110

    每天10个前端小知识 【Day 14】

    定义 行内元素：没有宽高不能换行，不可以改变宽高。 块级元素：有宽高能换行，可以改变宽高。 区别 1、默认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。...元素的外部显示类型将决定该元素在流式布局中的表现（块级或内联元素）； 元素的内部显示类型可以控制其子元素的布局（例如：flow layout，grid 或 flex）。...在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing:border-box;。...是什么 CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position...所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。 9. CSS中的 “flex:1;” 是什么意思？

    39210

    CSS Flexbox 布局完全指南 （一）：4000字，多示例讲解

    . - 如果你对 CSS 有些了解，完全不知道 Flexbox，我写了一篇综合指南（免费文章，阅读时间约为 46 分钟） - 如果你对 CSS 掌握得不是很好，我推荐你阅读 CSS 全面（实用）指南（74...10 张图片本身的宽高尺寸保持不变，在需要的时候自动换行，很好;) 现在，看下 Flexbox 的效果: .gallery { display: flex } 现在，图片的默认属性已经发生改变。...卡片是一种在弹性容器内组合相关信息的页面设计方式，视觉上很像一种玩的卡片。 有很多使用卡片的优秀案例，其中一个常用的就是价格表。 ? 价格表模型 让我们来建一个。...一行内有两个元素，其中一个是另一个的两倍大小。一行三个元素居中嵌套排列在较大的元素里 你可以在这里查看最终的布局效果。...你可以从 CSS 网格布局这份资料了解更多 CSS 网格布局的解决方案。 更多示例将在文章 Part 2 展示。

    6K20

    微前端学习笔记(5)：从import-html-entry发微DOMJSCSS隔离

    import-html-entry 是 qiankun 中一个举足轻重的依赖，用于获取子应用的 HTML 和 JS，同时对 HTML 和 JS 进行了各自的处理，以便于子应用在父应用中加载。...、css资源）；调用processTpl处理资源；调用getEmbedHTML对processTpl处理后的资源中链接的远程js、css资源取到本地并嵌入到html中从返回的结果中解析出以下内容：（解析过程在...Promise(resolve => schedule(0, success || resolve));    });}processTpl关于processTpl的代码，我不打算逐行进行分析，相反我会讲其中一个原本不应该是重要的点...\s 是匹配所有空白符，包括换行，\S 非空白符，不包括换行  *         匹配前面的子表达式零次或多次  +         匹配前面的子表达式一次或多次  正则表达式后面的全局标记 g 指定将该表达式应用到输入字符串中能够查找到的尽可能多的匹配...匹配除换行符 \n 之外的任何单字符    ? 匹配前面的子表达式零次或一次，或指明一个非贪婪限定符。    圆括号会有一个副作用，使相关的匹配会被缓存，此时可用 ?

    70910

    59道CSS面试题(附答案)

    如何居中一个浮动元素？ 确定容器的宽高，例如宽400px、高200px的div.设置层的外边距。...CSS Sprite其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“ background- image"“ background- repeat”“ background- position...内嵌式，即将CSS代码写在 style标签内。 行内式，即将CSS代码写在元素的 style属性中。 49、在CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？...pre表示不会合并空白符，渲染换行符，不会自动换行，相当于pre元素。 pre-wrap表示不会合并空白符，渲染换行符，自动换行pre-line表示合并空白符，渲染换行符，自动换行。...nowrap表示合并空白符，不会渲染换行符，不会自动换行。 normal表示默认值，按照文档流特点渲染，合并空白符，不会渲染换行符，自动换行。 54、常见的兼容性问题有哪些？

    6.4K50

    【CSS】CSS 选择器 ① ( CSS 选择器作用 | CSS 选择器分类 | 标签选择器 | 类选择器 | div 与 span 标签 | 多类名选择器 )

    style 样式 ; h3 { color: blue; font-size:20px; } CSS 选择器 作用 : 在 HTML 文件 中 选择 符合特定规则的 标签 ; 二、CSS...类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ; 标签内容 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 ; .name { color: blue; font-size...、代码示例 按照下图的颜色 , 将 Google 写出来 , 注意每个字母的颜色需要与图片中一致 ; 代码示例 : e 运行效果 : 4、div 与 span 标签 ① span 标签 span 标签 如果 没有使用 br 换行

    4K20

    深入了解盒子模型（box model）

    在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用CSS实现准确布局、处理元素排列的关键。 本文围绕 “盒模型” 为主题展开。...，在绝大数情况下意味着盒子会和父容器一样宽 每个盒子都会换行 width 和height属性可以发挥作用 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围...第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。 第二个是一个列表，布局属性是 display: flex。...正常情况下是 inline，但是其中一个加了block类，设置属性 display: block。 I am a paragraph.... 在第一段默认是内联元素所以不换行。 还有一个 设置为 display: inline-flex，使得在一些flex元素外创建一个内联框。

    1.4K30

    谈谈CSS中一些比较偏门的小知识 前面我写了：谈谈html中一些比较偏门的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！

    前面我写了：谈谈html中一些比较"偏门"的知识，现在这篇(主要)想谈谈个人所见的CSS一些小知识点，加深印象；同时也希望有需要的人能有收获！...: inline; /*块元素显示，但内容像内联元素显示*/ display: inline-block; /*块级表格显示，有换行...*/ display: table; /*内联表格显示，无换行*/ display: inline-table;...10.初始化CSS样式 原因：浏览器兼容问题，有些标签的默认值在不同浏览器下是不同的 缺点：对SEO有一定影响 *{padding: 0;margin:0;}：这是很常见的一种写法，强烈不建议（主流大网站基本都不会采用这种写法...，甚至在它们内部代码规范中禁止这种写法） 下面是淘宝样式初始化代码： 1 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd, 2 ul,ol,li,

    1.8K60

    前端开发必会的HTMLCSS硬知识

    多个行内块一起写，默认从左至右排列 2.5 行内元素特征 设置宽高无效 设置margin的上下无效，左右有效，设置padding上下左右都有效（并且会撑大空间） 不会自动换行 3 CSS 3.1 请说出...div没有padding\border\inlinecontent, 子级div的margin会向上查找边界塌陷的div，直到找到某个标签包括border\padding\inline content的其中一个...❝元素被当成行内元素排版时，元素直接的空白符会被浏览器处理，根据white-spack的处理方式（默认是normal,合并多余空白），Html代码在回车换行时被转成一个空白符，在字体不为0的情况下，空白符占据一定宽度...relative 相对定位 （相对元素在文档中的初始位置定位） absolute绝对定位（相对于定位元素定位，最顶级是body） fixed 固定定位 （相对窗口定位） static 文档流 7 CSS...「normalize.css是一个css reset的替代方案。」

    1.8K31

    放弃绝对定位重学flex,这两个游戏让你爱上使用flex

    flex-wrap换行方式 默认情况下，所有的子元素都排在一条线，可以通过flex-wrap改变子元素的换行方式。...nowrap是默认不换行 wrap是换行，当子元素的宽度之和超过父元素的宽度时，自动换行 3. wrap-reverse换行，第一行在下方。...justify-content主轴对齐方式 align-items次轴对齐方式 通过 css-tricks 这个网站可以很好地通过图文的方式学习flex布局的基础语法 更多更详细的介绍，大家可以看这个网站...https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 玩游戏学布局 http://flexboxfroggy.com/#zh-cn这个网站，就是通过使用...当你看完css-tricks网站的内容，就可以立刻来玩这个游戏，来加深对flex的理解 前几关还是比较容易的 通过游戏的方式，加深理解flex的各个属性的用法，而且每一关都有相应属性的介绍和提示

    84220

    HTML5常用的文本标签

    标签 描述 标题标签 HTML中一共有六级标题，标题按字号大小从大到小为H1、H2、H3、H4、H5、H6 用于定义HTML中的段落 和 标签用于插入一个简单换行符，...标签规定文本在什么时候适合添加换行符，作用是建议浏览器可以在标记处断行，但只是建议不一定是必定换行，还有根据整行文字的长度来定 和 用于描述文档和文档某个部分的细节...wbr>标签，软换行符；全称是 Word Break Opportunity(单词换行时机)，IE并不支持wbr；在浏览网页中，如果文本太长，浏览器会自动对文本换行，如果担心浏览器会在不恰当的位置换行，...常用属性：   normal 只在允许的断字点换行（浏览器保持默认处理）。   ...break-word 在长单词或 URL 地址内部进行换行 @font-face    允许你输入自己的字体出现在网站上，即使在特定的字体在访问者的计算机上没有安装。

    11.6K11

    JavaScript学习笔记013-正则表达式

    -- 网页标题 --> css' href='css/css1.css'/> 换行符（\r \n）之外所有的字符 ^ 字符串的起始 $ 字符串的结束 量词： 默认贪婪匹配：以最高次匹配，如果不成功依次降低，直到最低次 \d{最小次,最大次} // 两个值之间不能有空格 {...// 0到1次，可有可无，只有一次 非贪婪模式：以最低次匹配 \d{最小次,最大次}?...标识符： i // 忽略大小写，写在正则结束的正斜杠后面 g // 全局匹配，写在正则结束的正斜杠后面 m // 换行匹配 子集：子集里的内容默认被存起来捕获匹配 ( ) // 被圆括号包裹的部分属于一个整体...abc|def) // 大部分特殊符号出现在范围[]里，都不再具备特殊意义 [^1] // ^出现在中括号里代表不要^后面的值 \t 水平制表符 \v 垂直制表符 \f 换页符 \r 回车符 \n 换行符

    61710
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券