随笔分类 -  HTML/CSS

浅谈FC
摘要：What's FC？一定不是KFC，FC的全称是：Formatting Contexts，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFCBFC(Block Formatting Context 阅读全文
posted @ 2020-09-22 16:04 KeyNG 阅读(436) 评论(0) 推荐(0)
HTML语义化
摘要：什么是HTML语义化？ <基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等> 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 为什么要语义化？ 为了在没有CSS的情况 阅读全文
posted @ 2020-06-13 13:29 KeyNG 阅读(164) 评论(0) 推荐(0)
flex弹性布局及其属性
摘要：CSS3 弹性盒子内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意： 弹性容器外及弹性子元素内是正常渲 阅读全文
posted @ 2020-06-12 22:18 KeyNG 阅读(350) 评论(0) 推荐(0)
块级元素与行内元素
摘要：1、块级元素 2、行内元素 3、块级元素与行内元素的区别 （1）块级元素会独占一行，其宽度自动填满其父元素宽度； 行内元素不会独占一行，相邻的行内元素会排列在同一行，直至一行排不下才会换行，其宽度随元素的内容而变化。 （2）块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。 （3）行内元 阅读全文
posted @ 2020-06-11 14:42 KeyNG 阅读(196) 评论(0) 推荐(0)
CSS中可以继承的元素(需要记住)
摘要：可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。 所有元素可继承：visibility和cursor。 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family 阅读全文
posted @ 2020-06-11 14:36 KeyNG 阅读(901) 评论(0) 推荐(0)
HTML新增的语义化标签及其作用
摘要：在html5中，新增了几个语义化标签：<article>、<section>、<aside>、<hgroup>、 <header>,<footer>、<nav>、<time>、<mark>、<figure> 和<figcaption>等。 1.什么是HTML语义化？ 通过标签判断内容语义，例如根据h 阅读全文
posted @ 2020-05-19 23:10 KeyNG 阅读(900) 评论(0) 推荐(0)
CSS sprites的定义及使用
摘要：定义：CSS sprites 其实就是把网页中的一些背景图片整合到一张图片文件中，再利用CSS的“background-image”、“background-repeat”、“background-position”的组合进行背景定位，background-position可以用数字精确地定位出背景 阅读全文
posted @ 2020-05-17 15:13 KeyNG 阅读(532) 评论(0) 推荐(0)
CSS盒子模型
摘要：1、盒模型：内容（content）、填充（padding）、边框（border）、边界（margin） 2、盒子模型分为两种：IE盒子模型、标准W3C盒子模型；区别就是IE盒子模型的content包括了padding和border 阅读全文
posted @ 2020-05-13 17:56 KeyNG 阅读(110) 评论(0) 推荐(0)
position两种绝对定位的区别
摘要：position绝对定有两种，分别为absolute和fixed 一、共同点： 1.改变行内元素的呈现方式，display被置为inline：block 2.让元素脱离普通流，不占据空间 3.默认会覆盖到非定位元素上 二、不同点： 1.absolute的“根元素”是可以设置的，而fixed的“根元素 阅读全文
posted @ 2020-05-13 17:49 KeyNG 阅读(355) 评论(0) 推荐(0)
position中的四种属性
摘要：Position有四个属性值，分别是static 、fixed、 relative 、absolute。 第一个属性值是static，这是position的默认属性，一般我们都不会用到它，所以也很少提到它，但是在特殊的情况下，它又有着不可替代的作用，比如，在媒体查询页面当中，正常页面当中需要给元素加 阅读全文
posted @ 2020-05-13 17:43 KeyNG 阅读(2535) 评论(0) 推荐(0)
CSS中link和@import的区别
摘要：1、link属于HTML标签，而@import是CSS提供的 2、页面被加载时link会同时被加载；而@import引用的CSS会等到页面被加载完再加载 3、@import只在IE5以上才能识别，而link是HTML标签，并不存在兼容问题 阅读全文
posted @ 2020-05-13 17:34 KeyNG 阅读(219) 评论(0) 推荐(0)
隐藏对应元素的办法
摘要：display：none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素也会合拢，就像不存在了一样 visibility：hidden 隐藏对应的元素，但是在文档布局中还是保留着空间，就像隐身（可见度为0）了一样 阅读全文
posted @ 2020-05-13 17:30 KeyNG 阅读(190) 评论(0) 推荐(0)