HaiMianDanKe的博客

响应式：针对某些设备的某些特征可以由不同的样式，通过媒体查询对页面进行重构。流动网格、弹性图片和媒介查询是响应式互联网设计的三大技术成分。响应式网站是一个设计理念，它是多想技术的综合体。媒体查询在CSS2中<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"><link rel="stylesheet"

浮动float的设计初衷仅仅是文字环绕效果float具有包裹性和破坏性。具有包裹性的其他属性 display : inline-block / table-cell / .. position : absolute / fixed / sticky overflow : hidden / scroll 破坏性的表现形式为，浮动元素的父级元素高度塌陷具有破坏性的其他属性 display : none

有时候标签设置了：display:inline-block时，标签之间会产生莫名的间隙，即使设置了margin:0，间隙仍然存在。例如html代码：<ul> <li><a href="#">11</a></li> <li><a href="#">22</a></li> <li><a href="#">33</a></li> <li><a href="#">44</a>

margin可以改变容器的尺寸margin改变可视尺寸前提条件： 适用于没有设定width/height的普通block 水平元素。（对于float元素，absolute/fixed元素，inline水平，table-cell元素无效） 只适用于水平方向尺寸 图中实线部分可理解为可视尺寸，虚线部分可理解为占据尺寸。 应用一侧定宽的自适应布局<img width="150" style="flo

绝对定位和浮动两者均具有包裹性和破坏性。绝对定位生效时，浮动无效。绝对定位和relative注意：relative和absolute是分离的、对立的。而且，如果absolute不依赖relative（不将绝对定位的父级元素设置relative），则absolute更强大不受relative限制的absolute定位，行为表现上不使用top/right/bottom/left任何一个属性或使用auto

最近意识到自己的css布局基础不太扎实，然后突发奇想给自己定个简单的题目，实现完后查阅资料，无意中找到一篇简单又很详细的好文章。首先题目是： 左侧固定宽度，右侧自适应屏幕宽； 左右两列，等高布局； 左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高） 要求不用JS或CSS行为实现； 一、两列布局：左边固定宽度，右边自适应宽度方法一：浮动布局采用左侧浮动+宽度，右侧