2019年05月_巧克力很苦

原创 CSS文本各种属性集合

1、字体属性font-weight 属性设置文本的粗细。normal 默认值。定义标准的字体。bold 定义粗体字体。bolder 定义更粗的字体。lighter 定义更细的字体。100-900定义由粗到细的字体。400 等同于 normal，而 700 等同于 bold。font-family 规定元素的字体系列。font-family 可以把多个字体名称作为一个“回退”系...

2019-05-31 20:20:26 796

原创 css粘性定位position：sticky是怎么工作的

浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。究其原因有两个：第一，受到浏览器的良好支持需要漫长的等待：浏览器的支持往往需要很长的时间才能完成，到时候它的功能已经被人们遗忘了。第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑，这就是我的切入点。我假设你们都知道什么事CSS定位，不过还是先简单回顾一下比较好：在3年前，有四种 CSS 定位： static...

2019-05-26 10:33:49 557 1

一、CSS mask遮罩的过往和现状CSS mask遮罩属性的历史非常久远了，远到比CSS3 border-radius等属性还要久远，最早是出现在Safari浏览器上的，差不多可以追溯到09年。不过那个时候，遮罩只能作为实验性的属性，做一些特效使用。毕竟那个年代还是IE浏览器的时代，属性虽好，但价值有限。但是如今情况却大有变化，除了IE和Edge浏览器不支持，Firefox，Chrome以...

2019-05-25 20:28:24 23438

原创 CSS3原生变量var

一、变量是个好东西在任何语言中，变量的有一点作用都是一样的，那就是可以降低维护成本，附带还有更高性能，文件更高压缩率的好处。随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行，CSS工作组迅速跟进CSS变量的规范制定，并且，很多浏览器已经跟进，目前，在部分项目中已经可以直接使用了。CSS变量var兼容性截图Chrome/Firefox/Safari浏览器都是绿油油的，兼容...

2019-05-21 13:11:05 3371

原创彻底搞懂CSS中单位px和em,rem的区别

css单位中分为相对长度单位、绝对长度单位。今天我们主要讲解rem、em、px这些常用单位的区别和用法。px（绝对长度单位）px特点IE无法调整那些使用px作为单位的字体大小；国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。px像素（Pixel）。相对长度单位。像素...

2019-05-19 10:17:08 543

原创项目属性：flex-basis属性、flex属性、align-self属性

flex-basis属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */}这定义了在分配剩余空间之前元素的默认大小。它可以是长度（例如2...

2019-05-02 17:22:23 2147

原创项目所属性：order属性、flex-grow属性、flex-shrink属性

order属性order属性定义项目的排列顺序。数值越小（包含负值），排列越靠前，默认为0。.item { order: <integer>; /* default is 0 */}默认情况下，Flex项目按源顺序排列。但是，该order属性控制它们在Flex容器中的显示顺序。案例 .flex{ display: flex; ...

2019-05-02 16:16:47 3399

原创 align-content容器属性

align-content容器属性align-content当横轴上有额外的空间时，属性会在flex容器内对齐flex容器的线，类似于justify-content在主轴内对齐各个项的方式。.container { align-content: flex-start | flex-end | center | space-between | space-around | stretch;...

2019-05-02 15:39:23 2267

原创 align-items容器属性

align-items容器属性align-items属性定义项目在交叉轴上如何对齐。.container { align-items: stretch | flex-start | flex-end | center | baseline;}这定义了如何沿当前行的横轴布置弹性项目的默认行为。可以将其视为justify-content横轴的版本（垂直于主轴）。它可能取5个值。具体的...

2019-05-02 15:17:24 19306 2

原创 justify-content容器属性

justify-content容器属性justify-content属性定义了项目在主轴上的对齐方式。.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;}这定义了沿主轴的对齐。当线路上的所有弹性项目都不灵活，或者灵活但已...

2019-05-02 14:24:52 37724 4

原创 flex-flow容器属性

flex-flow容器属性flex-flow属性含义及用法：flex-flow 属性是 flex-direction 和 flex-wrap属性的复合属性，用于设置或检索弹性盒模型对象的子元素排列方式flex-direction 属性：规定灵活项目的方向flex-wrap 属性：规定灵活项目是否拆行或拆列注意：如果元素不是弹性盒对象的元素，则 flex-flow 属性不起作用...

2019-05-02 13:55:50 2047

原创 flex-wrap容器属性

flex-wrap容器属性默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。默认情况下，flex项目都会尝试适合一行。您可以更改它并允许项目根据需要使用此属性进行换行。.container{ flex-wrap: nowrap | wrap | wrap-reverse;}它可能取三个值。（1）nowrap（默认）：不换...

2019-05-02 11:32:35 10124

原创 flex-direction容器属性

flex-direction容器属性flex-direction属性决定主轴的方向（即项目的排列方向）。.container { flex-direction: row | row-reverse | column | column-reverse;}这将建立主轴，从而定义Flex项目放置在Flex容器中的方向。Flexbox（除了可选包装）是单向布局概念。将flex项目视为主要布...

2019-05-02 10:53:32 19249 1

原创了解Flex布局和基本概念

了解Flex布局布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局背景在Flexb...

2019-05-01 19:33:57 503

巧克力很苦的小博客