随笔分类 -  HTML/CSS

• Containing Block
  摘要：【Containing Block】 确定一个元素的包含块的过程完全依赖于这个元素的 position 属性： 1、如果 position 属性为 static 或 relative ，包含块就是由它的最近的祖先块元素 2、如果 position 属性为 absolute ，包含块就是由它的最近的 阅读全文
  posted @ 2018-12-13 11:01 Tekkaman 阅读(120) 评论(0) 推荐(0)
• Data URL
  摘要：【Data URL】 Data URLs are composed of four parts: a prefix (data:), a MIME type indicating the type of data, an optional base64token if non-textual, an 阅读全文
  posted @ 2017-09-16 01:32 Tekkaman 阅读(187) 评论(0) 推荐(0)
• justify-content & align-items & align-content
  摘要：【justify-content & align-items & align-content】 三个属性均作用于container。 justify-content用于控制main-axis。 align-items用于控制元素在单选中cross-axis中的位置。 align-content用于控 阅读全文
  posted @ 2017-09-11 15:43 Tekkaman 阅读(364) 评论(0) 推荐(0)
• Flex Basis与Width的区别
  摘要：【Flex Basis与Width的区别】 Flex Items的应用准则 Flex Items的应用准则 content –> width –> flex-basis (limted by max|min-width)也就是说， 如果没有设置flex-basis属性，那么flex-basis的大小 阅读全文
  posted @ 2017-09-11 13:43 Tekkaman 阅读(537) 评论(0) 推荐(0)
• flex-direction
  摘要：【flex-direction】 The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction 参考 阅读全文
  posted @ 2017-09-11 13:11 Tekkaman 阅读(291) 评论(0) 推荐(0)
• flex-grow
  摘要：【flex-grow】 指定宽度所占比，如一个flex中有三个item，这三个item的flex-grow均为1，则每个item占比为33.33%，如果一个是1，两个为2，则占比为20%,40%,40%。 参考：https://developer.mozilla.org/en-US/docs/Web 阅读全文
  posted @ 2017-09-11 12:55 Tekkaman 阅读(215) 评论(0) 推荐(0)
• CSS Transition
  摘要：【CSS Transition】 CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect 阅读全文
  posted @ 2017-08-24 22:36 Tekkaman 阅读(175) 评论(0) 推荐(0)
• CSS3动画
  摘要：【CSS3动画】 首先通过@keyframe创建动画 或 然后通过animation属性来指定动画 【animation-fill-mode】 参考： 1、http://www.w3school.com.cn/css3/css3_animation.asp 2、http://www.w3school 阅读全文
  posted @ 2017-08-24 22:01 Tekkaman 阅读(119) 评论(0) 推荐(0)
• JavaScript Drag处理
  摘要：【JavaScript Drag处理】 在拖动目标上触发事件 (源元素): ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发 释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内 阅读全文
  posted @ 2017-08-10 23:35 Tekkaman 阅读(615) 评论(0) 推荐(0)
• CSS同时选择器
  摘要：【CSS同时选择器】 同一个div拥有多个class时，我们可以作多个class作为组合来选择对象。方法就是将多个.className直接连接在一起（中间不能有空格）。 参考：http://www.w3school.com.cn/css/css_selector_class.asp 阅读全文
  posted @ 2017-06-26 23:40 Tekkaman 阅读(830) 评论(0) 推荐(0)
• 给tbody加垂直滚动条的具体思路
  摘要：【给tbody加垂直滚动条的具体思路】 给tbody加垂直滚动条的思路就是把tbody设置成display:block，然后就对其高度设置一个固定值，overflow设置成auto即可 参考：http://www.jb51.net/css/135898.html 阅读全文
  posted @ 2017-06-24 01:23 Tekkaman 阅读(1721) 评论(0) 推荐(0)
• block、inline、inline-block
  摘要：【block、inline、inline-block】 1、block元素可以设置width,height属性。 inline元素设置width,height属性无效。 2、inline元素的margin和padding属性只有左右方向有效。 3、inline-block，能够设置height、ma 阅读全文
  posted @ 2017-06-16 13:39 Tekkaman 阅读(180) 评论(0) 推荐(0)
• box-sizing
  摘要：【box-sizing】 content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )此属性表现为 阅读全文
  posted @ 2017-06-14 09:52 Tekkaman 阅读(147) 评论(0) 推荐(0)
• CSS属性选择器
  摘要：【CSS属性选择器】 CSS 2 引入了属性选择器。 1、如果您希望把包含标题（title）的所有元素变为红色，可以写作： 2、为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写： 3、属性与属性值必须完全匹配 如果写成 p[class="important 阅读全文
  posted @ 2017-06-02 00:31 Tekkaman 阅读(311) 评论(0) 推荐(0)
• 媒体类型 & 媒体查询
  摘要：【媒体类型 & 媒体查询】 @media 规则允许在相同样式表为不同媒体设置不同的样式。 在下面的例子告诉我们浏览器屏幕上显示一个14像素的Verdana字体样式。但是如果页面打印，将是10个像素的Times字体。请注意，font-weight在屏幕上和纸上设置为粗体： 如果文档宽度小于 300 像 阅读全文
  posted @ 2017-05-31 12:24 Tekkaman 阅读(623) 评论(0) 推荐(0)
• DOCTYPE
  摘要：【DOCTYPE】 HTML5文档类型 document.compatMode： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。 这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么 阅读全文
  posted @ 2017-05-30 23:25 Tekkaman 阅读(232) 评论(0) 推荐(0)
• display:none vs visibility:hidden
  摘要：【display:none vs visibility:hidden】 设置元素的display为none是最常用的隐藏元素的方法。 将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。 设置元素的visibili 阅读全文
  posted @ 2017-05-01 15:59 Tekkaman 阅读(270) 评论(0) 推荐(0)
• CSS Media Query
  摘要：【CSS Media Query】 CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to app 阅读全文
  posted @ 2017-04-25 17:26 Tekkaman 阅读(192) 评论(0) 推荐(0)
• css定位
  摘要：【css定位】 1、div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 2、在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本 阅读全文
  posted @ 2017-04-23 21:04 Tekkaman 阅读(187) 评论(0) 推荐(0)
• css display属性
  摘要：【css display属性】 通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。 参考：http://www.w 阅读全文
  posted @ 2017-04-23 20:48 Tekkaman 阅读(255) 评论(0) 推荐(0)