zoukankan      html  css  js  c++  java
  • 前端笔记

    • Bootstrap 框架的网格系统工作原理如下:
      1 、数据行 (.row) 必须包含在容器( .container )中,以便为其赋予合适的对齐方式和内距 (padding) 。
    <div class=" container ">
          <div class=" row "></div>
          </div>
    

    2 、在行 (.row) 中可以添加列 (.column) ,但列数之和不能超过平分的总列数,比如 12 。

    <div class="container">
             <div class="row">
             <div class="col-md- 4 "></div>
             <div class="col-md- 8 "></div>
    

    3 、具体内容应当放置在列容器( column )之内,而且只有列( column )才可以作为行容器 (.row) 的直接子元素
    4 、通过设置内距( padding )从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距( margin )来抵消内距 (padding) 的影响

    vertical-align是设置设置元素的垂直对齐方式。没有text-vertical;

    垂直居中对齐的标签定义是:<vertical-align:center>

    UTF-8(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言(如英文,日文,韩文)。
    GBK是汉字编码,是双字节码,可表示繁体字和简体字。
    ISO8859-2 字符集,也称为 Latin-2,收集了东欧字符。

    hover -> focus -> active
    悬停 -> 聚焦 -> 响应

    Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局。它的目的是使用常见的布局模式,比如说三列布局,可以非常简单的实现。
    一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 伸缩容器(flex containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

    当定义border:none时,表示无边框样式,浏览器并不会对边框进行渲染,也就没有实际的宽度;

    display:none在隐藏元素的时候,将其占位空间也去掉;而visibility:hidden只是隐藏了内容而已,其占位空间仍然保留。

    display:none与visibility:hidden都可以用来隐藏某个元素

    浏览器 的内核引擎,基本上是四分天下:1)Trident: IE 以Trident 作为内核引擎;2)Gecko: Firefox 是基于 Gecko 开发;3)WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器;4)Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini

    .屏幕的尺寸标准

    | 超小屏幕(手机) | 小屏幕(平板) | 中等屏幕(桌面) |大屏幕(桌面)
    | -------- | -----: | :----: |
    | <768px | >=768 | >=992 |>=1200
    | .col-xs- | .col-sm- | .col-md- |.col-lg-

    1,@import url()机制是不同于link的,link是在加载页面前把css加载完毕,而@import url()则是读取完文件后在加载,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
    2,@import 是css2里面的,所以古老的ie5不支持。
    3,当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
    4,link除了能加载css外还能定义RSS,定义rel连接属性,@import只能加载css

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

    W3C标准定义的阻止事件向父容器传递: e.stopPropagation()
    
    DOM中的事件对象:(符合W3C标准)
    

    preventDefault() 取消事件默认行为
    stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用。
    stopPropagation() 取消事件冒泡对当前节点无影响。
    IE中的事件对象:
    cancelBubble() 取消事件冒泡
    returnValue() 取消事件默认行为

    栅格系统的工作原理中有,为了创建列(colume)之间的间隔 需要设置padding,而且需要设置margin为负值,消除第一个和最后一个之间padding的影响。

    float有四个值left,right,none(默认值)和inherite(从父类继承而来的浮动)。

  • 相关阅读:
    k8s 集群节点重启后etcd Unhealthy 解决
    no matches for kind “Deployment” in version "extensions/v1beta1 问题解决
    go web 读书笔记 (go 与 web 应用)
    Linux设置ssh超时时间
    C++中继承方式
    C++中类中范围解析运算符::和点运算符(.)
    C++ 中类与结构体的区别
    C++中. 与 -> 运算符的区别
    C++之字符串
    C++之数组
  • 原文地址:https://www.cnblogs.com/code-charmer/p/4842816.html
Copyright © 2011-2022 走看看