CSS 常见知识点整理

Vitta
252 阅读4分钟

...持续更新中...

DIV+CSS布局的好处

  • 代码精简，且结构与样式分离，易于维护
  • 代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户的体验
  • 对SEO搜索引擎更加友好，且H5又新增了许多语义化标签更是如此
  • 允许更多炫酷的页面效果，丰富了页面
  • 符合W3C标准，保证网站不会因为网络应用的升级而被淘汰

缺点：不同浏览器对web标准默认值不同，更容易出现对浏览器的兼容性问题

盒模型

页面渲染时， dom元素所采用的布局模型。 可通过box-sizing进行设置。

  • content-box：W3C标准盒模型； 盒子的宽度 = css 中设置的 width + border + padding
  • border-box：IE盒模型； 盒子的宽度 = css 中设置的 width（其中width包含了border+padding+content三部分的宽度）
  • padding-box
  • margin-box: 浏览器未实现

CSS position 属性 - 4种不同类型的定位

  • static： 元素框正常生成。块级元素生成矩形框，行内元素则会创建一到多个行框，置于其父元素中。
  • relative（相对定位）： 元素框偏移某个位置。元素仍保持其未定位前的形状， 它原本所占的空间仍保留。
  • absolute： 元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  • fixed： 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

注意： 相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。

BFC

块级格式上下文 - 是一个独立的渲染区域，让处于BFC内部的元素与外部元素相互隔离， 使内外元素的定位不会互相影响。
触发条件：

  • position： absolute/fixed
  • display：inline-block/table
  • float元素
  • overfolw ！== visible
  • 根元素

flex 布局

  • flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
  • 父项常见属性
    • flex-direction - 设置主轴的方向
    • justify-content - 设置主轴上的子元素排列方式
    • flex-warp - 设置子元素是否换行
    • align-content - 设置侧轴上的子元素的排列方式（多行）
    • align-items - 设置侧轴上的子元素排列方式（单行）
    • flex-flow - 复合属性，相当于同时设置了 flex-direction 和 flex-wrap
  • flex布局子项常见属性
    • flex子项目占的份数 - flex:1;
    • align-self控制子项自己在侧轴的排列方式 - align-self: flex-end;
    • order属性定义子项的排列顺序（前后顺序）; 数值越小，排列越靠前，默认为0。 - order: 1;

居中布局

  • 水平居中
    • 行内元素： text-align: center;
    • 块级元素： .centerDIV{width: 200px; margin: auto 0; }
    • absolute + transform (先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。)
    • flex + justify-content: center;
  • 垂直居中
    • line-height: height
    • absolute + transform
    • flex +align-items: center
    • table (利用表布局的vertical-align: middle 可以实现子元素的垂直居中)
  <div class="parent">
    <p class="child">The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.
    The more technology you learn, the more you realize how little you know.</p>
</div>
<style>
    .parent {
        display: table;
        height: 140px;
        border: 2px dashed #f69c55;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
</style>

解决a标签点击后hover事件失效的问题

只需要改变a标签css属性的顺序即可： link→visited→hover→active

.alink a{
            color: red;
        }
.alink a:hover{
            color: blue;
        }        
.alink a:visited{ /* visited在hover后面，这样的话hover事件就失效了 */
            color: green;
        }
/**HTML 代码**/
<div class="alink">    
        <a href="#">怎么解决a标签点击后hover事件失效的问题呐</a>
        <span>解决方案：调整一下事件的代码顺序 link→visited→hover→active </span>
 </div>

移动端中不同手机html默认的字体大小都是一样的吗？

如果没有认为改变根元素字体大小的话，默认是1rem=16px; 根元素默认的字体大小是16px。

avatar
文章
阅读
粉丝