小米布局（浮动）common.css: 12345678910111213141516171819202122.mi_wrapper { width: 1226px; margin: 0 auto;}.kl_wrapper { width: 1100px; margin: 0 auto;}.clear_fix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden;}.clear_fix { *zoom: 1;} reset.css: 12345678910111213body, h1, h2, h3, ul, li { margin: 0; padding: 0;}a { text-decoration: none; color: #333;}ul, li { list-style: none;
...

认识flexbox Flexbox翻译为弹性盒子: 弹性盒子是一种用于按行或按列布局元素的一维布局方法 ; 元素可以膨胀以填充额外的空间, 收缩以适应更小的空间; 通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout); flex布局是目前web开发中使用最多的布局方案： flex 布局（Flexible 布局，弹性布局）; 目前特别在移动端可以说已经完全普及; 在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局; 为什么需要flex布局呢? 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举; flex布局的重要概念 两个重要的概念： 开启了 flex 布局的元素叫 flex container flex container 里面的直接子元素叫做 flex item **当flex container中的子元素变成了flex item时, 具备一下特点: ** flex item的布局将受 ...

margin-padding位置调整 在标准流中，可以使用margin、padding对元素进行定位 其中margin还可以设置负数 比较明显的缺点是 设置一个元素的margin或者padding，通常会影响到标准流中其他元素的定位效果 不便于实现元素层叠的效果 如果我们希望一个元素可以跳出标准量,单独的对某个元素进行定位呢? 我们可以通过position属性来进行设置; 认识position属性 利用position可以对元素进行定位，常用取值有5个: 默认值: static：默认值, 静态定位 使用下面的值, 可以让元素变成 定位元素(positioned element) relative：相对定位 absolute：绝对定位 fixed：固定定位 sticky：粘性定位 静态定位 - static position属性的默认值 元素按照normal flow布局 left 、right、top、bottom没有任何作用 相对定位 - relative 元素按照normal flow布局 可以通过left、right、top、bottom进行定位 定位参 ...

列表的实现方式 事实上现在很多的列表功能采用了不同的方案来实现: 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表) 方案二: 使用列表元素, 使用元素语义化的方式实现; 事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局: 原因是列表元素默认的CSS样式, 让它用起来不是非常方便; 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等; 虽然我们可以通过重置来解决, 但是我们更喜欢自由的div; HTML提供了3组常用的用来展示列表的元素 有序列表：ol、li 无序列表：ul、li 定义列表：dl、dt、dd 有序列表 – ol – li ol（ordered list） 有序列表，直接子元素只能是li li（list item） 列表中的每一项 无序列表 – ul - li ul（unordered list） 无序列表，直接子元素只能是li li（list item） 列表中的每一项 列表的练习 12345678910111213141 ...

background-image background-image用于设置元素的背景图片 会盖在(不是覆盖)background-color的上面 如果设置了多张图片 设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面 注意：如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 background-repeat background-repeat用于设置背景图片是否要平铺 常见的设值有 repeat：平铺 no-repeat：不平铺 repeat-x：只在水平方向平铺 repeat-y：只在垂直平方向平铺 background-size background-size用于设置背景图片的大小 auto：默认值, 以背景图本身大小显示 cover：缩放背景图，以完全覆盖铺满元素,可能背景图片部分看不见 contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比 ：百分比，相对于背景区（background positioning area） length：具体的大小，比如100px background-position backgr ...

盒子模型(Box Model) HTML中的每一个元素都可以看做是一个盒子，如右下图所示，可以具备这4个属性 内容（content） 元素的内容width/height 内边距（padding） 元素和内容之间的间距 边框（border） 元素自己的边框 外边距（margin） 元素和其他元素之间的间距 因为盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边: 内容 – 宽度和高度 设置内容是通过宽度和高度设置的: 宽度设置: width 高度设置: height 注意: 对于行内级非替换元素来说, 设置宽高是无效的! 另外我们还可以设置如下属性: min-width：最小宽度，无论内容多少，宽度都大于或等于min-width max-width：最大宽度，无论内容多少，宽度都小于或等于max-width 移动端适配时, 可以设置最大宽度和最小宽度; 下面两个属性不常用: min-height：最小高度，无论内容多少 ...

CSS的属性继承 CSS的某些属性具有继承性(Inherited): 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性; 当然, 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性(不管继承过来的属性权重多高); 如何知道一个属性是否具有继承性呢? 常见的font-size/font-family/font-weight/line-height/color/text-align都具有继承性; 这些不用刻意去记, 用的多自然就记住了; 另外要多学会查阅文档, 文档中每个属性都有标明其继承性的: CSS属性的层叠 CSS的翻译是层叠样式表, 什么是层叠呢? 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性会被一层层覆盖上去; 但是最终只有一个会生效; 那么多个样式属性覆盖上去, 哪一个会生效呢? 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级; 判断二: 先后顺序, 权重相同时, 后面设置的生效; 那么如何知道元素的权重呢? ...

通用选择器 通用选择器（universal selector） 所有的元素都会被选中; 一般用来给所有元素作一些通用性的设置 比如内边距、外边距; 比如重置一些内容; 效率比较低，尽量不要使用; 简单选择器 简单选择器是开发中用的最多的选择器: 元素选择器（type selectors）, 使用元素的名称; 类选择器（class selectors）, 使用 .类名 ; id选择器（id selectors）, 使用 #id; ** id注意事项 ** 一个HTML文档里面的id值是唯一的，不能重复 id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识 最好不要用标签名作为id值 中划线又叫连字符（hyphen） 属性选择器(attribute selectors) 拥有某一个属性 [att] 属性等于某个值 [att=val] 其他了解的(不用记) [attr~=val]: 属性值包含val, 如果有其他值必须以空格和val分割; 123456789101112131415 < ...

font-size(重要) font-size决定文字的大小 常用的设置 **具体数值+单位 ** ✓ 比如100px ✓ 也可以使用em单位(不推荐)：1em代表100%，2em代表200%，0.5em代表50% 百分比 ✓ 基于父元素的font-size计算，比如50%表示等于父元素font-size的一半 font-family (重要, 不过一般仅设置一次) font-family用于设置文字的字体名称 可以设置1个或者多个字体名称; 浏览器会选择列表中第一个该计算机上有安装的字体; 或者是通过 @font-face 指定的可以直接下载的字体。 font-weight(重要) font-weight用于设置文字的粗细（重量） 常见的取值: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量 normal：等于400 bold：等于700 strong、b、h1~h6等标签的font-weight默认就是bold font-style(一般) **font-style用于设置文字的常规 ...

CSS属性 – text-decoration(常用) ** text-decoration用S于设置文字的装饰线** decoration是装饰/装饰品的意思; text-decoration有如下常见取值: none：无任何装饰线 ✓ 可以去除a元素默认的下划线 underline：下划线 overline：上划线 line-through：中划线（删除线） a元素有下划线的本质是被添加了text-decoration属性 text-transform(一般) text-transform用于设置文字的大小写转换 Transform单词是使变形/变换(形变); text-transform有几个常见的值: capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写 uppercase：(大写字母)将每个单词的所有字符变为大写 lowercase：(小写字母)将每个单词的所有字符变为小写 none：没有任何影响 实际开发中用JavaScript代码转化的更多 text-indent(一般) text-indent用于 ...