随笔分类 - HTML、CSS相关
摘要：html, body { height: 100%; } 或 .element { height: 100vh; }
阅读全文
摘要：.clearfix::after { content: ''; display: table; clear: both; } .clearfix { *zoom: 1; /* 兼容 IE 低版本 */ } 或 .parent { overflow: hidden; }
阅读全文
摘要：元素设置了display: none，不占据空间
阅读全文
摘要：采用transform: scale()的方式，该方法用来定义元素的2D 缩放转换： .child { transform: scale(0.5, 0.5); }
阅读全文
摘要：一、使用flex布局，要考虑兼容性问题： .parent { display: flex; justify-content:center; align-items:center; } 二、绝对定位 + transform: translate，要考虑兼容性问题： .parent { position
阅读全文
摘要：一、分类： CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型 二、组成： 盒模型都是由四个部分组成的，由外向内分别是margin、border、padding和content 三、标准盒模型和IE盒模型的区别： 标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同
阅读全文
摘要：一、块状元素（display: block/table，特点是独占一行）： div、p、h1、table、form、ul、ol、dl 二、内联元素（display: inline/inline-block，特点是不会独占一行，会挨着往后排，直到浏览器的边缘换行为止）： span、a、input、te
阅读全文
摘要：一、<style>标签： 1.答案：<style>标签应该放在<head>标签里面。 2.原因：因为浏览器解析HTML文档是自上而下的，这样<style>标签里的样式就会作用到body里的元素上。如果<style>标签写在<body>标签下面，在这之前的元素的样式就不会生效，会导致页面结构出来了，而
阅读全文
摘要：HTML： <div id="container"> <div id="child1">...</div> <div is="child2">...</div> </div> CSS： #container{ display: flex; flex-flow: column; } #child1{
阅读全文
摘要：双飞翼布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta
阅读全文
摘要：html { font-size: 20px; } label { width: 5rem; height: 2rem; display: block; margin: 0 auto; line-height: 2rem; text-align: center; }
阅读全文
浙公网安备 33010602011771号