zoukankan      html  css  js  c++  java
  • html css的冷门相关基础知识整理

    1.行内元素的margin和padding可以在水平位置上进行设置;

    2.base标签可以用来统一修改页面内部的链接跳转方式(打开新的页面)

    <base target="_blank"> 

    3.css选择器的继承

         继承来的样式权重最低(可继承父元素的样式有:text-开头的 font- 开头的 line-height color)

         默认的样式权重次之(例如 a标签的有自己的yanse)

         通配符的最低

    其他常用选择器权重按常规处理

    4.只要脱离标准流的元素都会变成块元素(浮动,绝对定位),此外flex布局也会使元素变成block;

    5.清楚浮动的方法:(1)overflow:hidden(触发了BFC)(2)在所有浮动元素的后面添加一个空的div设置其高度为0,用clear:both清除浮动  (3)可以使用伪元素进行清除浮动;

    6.定位:子绝父相   如果给元素为设置left top 则它默认在当前元素的左上角位置;

    7.vertical-align属性的默认值为baseline以基线对齐。所以会出现图片下方的小空白区域。

    8.伪元素选择器:文本类:P::first-letter  文本的第一个字  P::first-line 文本你的第一行 p::selection 用户选中的文本    P::before P::after

    9.iframe的作用是将一个网页用过此框架引入至当前的页面。

    10.列表的三种方式

    <_-- 无须列表-->
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ul>
    <--有序列表 -->
    <ol>
      <li>列表项1</li>
      <li>列表项2</li>
      <li>列表项3</li>
      ......
    </ol>
    <--自定义列表-->
    <dl>
      <dt>名词1</dt>
      <dd>名词1解释1</dd>
      <dd>名词1解释2</dd>
      ...
      <dt>名词2</dt>
      <dd>名词2解释1</dd>
      <dd>名词2解释2</dd>
      ...
    </dl>

    11.font-family可以设置多个字体,浏览器其会优先选择自身支持的字体样式。(有两种书写方式。1.直接书写字体名 2.unicode编码)

    方案一: 你可以使用英文来替代。 比如 font-family:"Microsoft Yahei"。
    
    方案二: 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
    
    font-family: "5FAE8F6F96C59ED1",表示设置字体为“微软雅黑”。

     12.只有文字才能组成段落:所以p标签h1 -  h6里不能包含快元素;行内元素a里可以放置块元素;

    13.css的三大1特性:层叠性  继承性 优先级

    14.因为img的行内块元素特性,所以导致其默认于父级盒子的极限对齐,出现图片下方小空隙的问题;解决方法:vertical-align:middle|top      display:block;

    15.精灵图在线制作网址:https://www.toptal.com/developers/css/sprite-generator/

    16.清除浮动最常用的方法

    .clearfix:after { 
               content: ""; 
               display: block; 
                height: 0; 
                clear: both;
                 visibility: hidden;
                                      }
    
    .clearfix {*zoom: 1;} /* IE6、7 专有 */        

    BFC形成条件

    • 根元素

    • float 属性不为 none

    • position 为 absolute 或 fixed

    • display 为inline-block, table-cell, table-caption , flex, inline-flex

    • overflow 不为 visible ( hidden auto scroll )。

    BFC的主要用途

    清除浮动影响

    处理外边距穿透&合并

    实现两栏|三栏自适应布局

  • 相关阅读:
    浏览器中包含什么?三个常驻线程?
    TCP粘包和拆包
    TCP有限状态机
    TCP的拥塞控制
    TCP滑动窗口实现流量控制
    http状态码及意义
    OSI七层结构
    浏览器的event loop
    history api
    表单提交的方式
  • 原文地址:https://www.cnblogs.com/crazy-rock/p/13789324.html
Copyright © 2011-2022 走看看