不是第一

caniuseopen in new window

css style sheet

LAYUI

BOOTSTRAP

HPLUS

box 全屏

/* 
使用CSS根元素
使用CSS根元素可以使div全屏幕占比，达到全屏的效果。 
*/

    
      html, body, .fullscreen-div {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

flex

grid

css常用单位

TIP

px 绝对单位
em 相对单位, 根据目前容器的大小来设定 再根据目前em 相乘,可以理解为倍数
rem 相对单位,相对于 根root 元素的大小来设定的
vw&vh 设定值在 1~100 之间决定 viewport width viewport height 指的是我们当前所看到的 视图窗口;

vmin & vmax 多适用于Media Query 响应式

css 权重

.app{
    width:100px !important;
}

@media

如果文档宽度小于 300 像素则修改背景颜色(background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

css 文本

word-spacing　　letter-spacing

前者调节 单词之间的间隙，后者调节字符之间的间隙

参数：

　　normal：默认的

　　　　　　直接用 px  就可以。可以接受负值。

text-indent

设置文本内容的 缩进 可以填px  也可以填 %，一般 都填 2em


columns：

　　　除table外的非替换块级元素, table cells, inline-block这些元素外，可以使用

第一个值：设置每列的宽度。

第二个值：设置列数。
 设置了  columns：300px 3；  也就是 成3列出现， 每列 300px，但是你仔细观察，在改变窗口大小的时候， 也并不是会一直固定的， 会随着 窗口的大小而压缩，拉伸宽度， 和列数

column-width:

　　跟上面的值是一样的，不过他是设置 宽和 列，这个只是单独设置 宽。


 column-count:

　　单独设置 列数，设置好的列数，并不会随着父元素的宽的改变而改变， 是几列，就一直几列

 column-gap:

　　设置每列与每列之间的间隙


column-rule:

　　这个属性吧，跟border：  一模一样。 也是设置边框的。只不过人家 设置的是多列的边框。

　　column-rule：1px solid #000； (下面三个属性的缩写)

　　border: 1px solid #000;

还有 column-rule-width:  对应   border-width：

　　 column-rule-style:　对应    border-style:

　　 column-rule-color:　对应　border-color:


 column-span：

　　除浮动和绝对定位之外的块级元素， 也就是说 行级标签能用。

参数：默认是 none， 

只有一个值可以填，  all


text-shadow
 跟  box-shadow 差不多

浏览器的渲染过程？

  1. 将获取的html解析成dom树
  2. 处理css，构成层叠样式表模型CSSOM
  3. 将dom树和CSSOM合并为渲染树
  4. 根据CSSOM将渲染树的节点布局计算
  5. 将渲染树节点样式绘制到页面上
  • 注意
    • 在渲染的过程中是自上而下渲染，
    • js会阻塞页面的渲染，优先等js执行完成
    • 如果在渲染的过程中改变了样式，会造成回流需要重新渲染

src与href的区别？

  1. href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
  2. src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。