CSS
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
CSS工程化
CSS工程化主要包括 组织,优化,构建和维护。这里主要介绍两个工具:PostCSS和PostCSSpost是 后面,后置 的意思,它跟预处理器的概念是相对的。预处理器是把不是css的语言 经过处理后 变成css,也就是先有预处理语言再有css。postcss是把css变成css,是先有css再对代码进行处理。这里需要说明的是,前面提到postcss是先有css然后postcss再处理转换变...原创 2019-12-06 13:56:16 · 519 阅读 · 0 评论 -
CSS预处理器
它是基于CSS的另一种语言,也就是说它并不是纯粹的CSS语法。可以类比JS,现在有ES6语法,通过babel预处理器可以将ES6新的语法编译成浏览器能够运行的代码。这里同样可以通过工具将新的语法编译成CSS供浏览器解析。CSS预处理器添加了很多CSS不具备的特性,它能提升CSS文件的组织方式。常见的CSS预处理器主要有 less(基于nodejs写的) 和 sass(它后面有新的版本是scss)...原创 2019-12-04 17:18:40 · 547 阅读 · 0 评论 -
CSS中非布局样式(三)滚动、粗体,斜体,下划线 装饰性的样式,其它
滚动跟页面和布局一点点关系。当内容比容器大,容器装不下内容时,就需要滚动。常见的主要有四种情况分别对应四种值:蓝色区块是容器,黑色部分是内容,此时内容大于容器visible值 会把内容直接显示出来撑出容器。hidden值 会把超出容器部分的内容隐藏掉。scroll值 允许用户滚动显示超出容器那部分的内容。auto值 也会将超出容器部分的内容进行滚动,当每超出容器时滚动条不会显示。...原创 2019-12-03 11:11:56 · 897 阅读 · 0 评论 -
常用布局方法
table表格布局早期以table为主,早期的表格解析并不是流式的,如果表格很长 浏览器会把整个表格的代码都下载完后再渲染解析,这样会造成用户等待的时间过长。事实上现在的浏览器性能都很高了,也可以对表格布局进行流式的加载,这种问题不是很突出了,所以现在表格的布局也没有很明显的缺点,除了语义化不够明确。表格有一些好的特性,表格本来就是方框的,它的横向和竖向的格子天生就有的,不需要我们去想办法并...原创 2019-12-03 11:02:33 · 298 阅读 · 0 评论 -
CSS中非布局样式(二)背景,边框
CSS布局是一块非常重要的内容,这里单独介绍非布局样式。非布局样式有下面几种分类(还有其它分类看系列文章):背景跟盒子相关的样式。渐变色背景 和 多背景叠加旧的写法是:background: -webkit-linear-gradient(left, red, green);新的写法(也是标准写法)是:background: linear-gradient(to right, red, ...原创 2019-12-01 11:03:23 · 252 阅读 · 0 评论 -
CSS中非布局样式(一)
CSS布局是一块非常重要的内容,这里单独介绍非布局样式。非布局样式有下面几种分类(还有其它分类看系列文章):字体,字重,颜色,大小,行高这些是跟文字相关的样式。字体族族,顾名思义,就是一堆的东西,字体族就是一堆的字体,具体可以分为五个字体族:serif 是衬线字体,字体周围会有一些装饰性的小勾角,英文解释就是:a short line at the top or bottom of s...原创 2019-11-30 18:07:45 · 243 阅读 · 0 评论 -
CSS选择器分类和权重
CSS全称“Cascading Style Sheet”,叫做层叠样式表。CSS样式就像透明的层一样一层一层叠加起来 来修饰一个元素。分类和权重分类元素选择器 a{}伪元素选择器 ::before{}类选择器 .link{}属性选择器 [type=radio]{}伪类选择器 :hover{}ID选择器 #id{}组合选择器 [type=checkbox] + babel{}否...原创 2019-11-29 16:04:05 · 320 阅读 · 0 评论 -
HTML元素分类和默认样式的处理方法
HTML元素分类按默认样式分block 块级:独占一整行,可以设置自己的宽高。inline 行内元素,设置宽高无效。inline-block 内联块级元素,可以和行内元素在同一行显示,可以设置自己的宽高。按内容分HTML元素嵌套关系块级元素可以包含行内元素块级元素不一定能包含块级元素,比如 p 标签里面不能再包含 div 元素行内元素一般不能包含块级元素,比如在span里...原创 2019-11-29 13:45:47 · 394 阅读 · 0 评论 -
视口(viewport)相关概念(二)
两个视口(layout viewport &visual viewport)因此视口太窄,不能作为CSS布局的基础。显而易见的解决办法是扩大视口。然而,这要求将其分为两个部分:可视视图和布局视图。George Cummins 在 Stack Overflow上解释了 可视视图 和 布局视图 的基本概念:布局视图 就像一个大小形状固定的大图像。可视视口就像你手里拿着一个不透明遮挡你部分...翻译 2019-11-23 17:09:59 · 533 阅读 · 0 评论 -
视口(viewport)相关概念(一)
这系列文章将解释 视口和各种重要元素的宽度是如何工作的,比如<html>元素,以及窗口和屏幕。(how viewports and the widths of various important elements work, such as the element, as well as the window and the screen.)概念:设备像素和CSS像素(device...翻译 2019-11-20 11:17:18 · 2065 阅读 · 0 评论 -
网格布局中 justify-content align-content 和 place-content
有时,整个网格大小可能小于其 网格容器(grid container) 大小。 如果网格轨道( grid tracks)使用固定的单位设置 大小(比如 px),就可能出现这种情况。在这种情况下,可以设置网格容器内的网格的对齐方式。Sometimes the edges of the grid do not correspond to the edges of the grid containe...原创 2019-11-06 11:09:41 · 3891 阅读 · 0 评论 -
网格布局中 justify-self align-self 和 place-self
justify-self沿着 行轴线(水平方向) 对齐网格项中的内容(justify the content within individual grid items),此值适用于单个网格项内的内容(applying the justify-self property to the grid item itself)。值:stretch :默认值,填满 网格区域 的宽度(This is t...原创 2019-11-06 10:08:07 · 14984 阅读 · 0 评论 -
网格布局中 grid-column-start, grid-column-end 和 grid-row-start, grid-row-end
grid-column-start, grid-column-end 和 grid-row-start, grid-row-end通过指定特定网格线(grid lines) 来确定 网格项(grid item) 在网格中的位置和大小。 grid-column-start / grid-row-start 是网格项开始的网格线,grid-column-end / grid-row-end 是网格项...原创 2019-11-05 19:23:49 · 4181 阅读 · 1 评论 -
网格布局中 justify-items 和 align-litems
justify-items 和 align-litems 是从整体上来调整 网格项(grid items)中的内容 在 **网格区域(grid area)**中的位置的。也可以单独调整 某个网格项(grid items)中的内容,在这个网格项上使用 justify-self 和 align-self 属性。justify-items网格容器( grid container) 的属性,设置 网...原创 2019-11-05 17:36:12 · 21633 阅读 · 1 评论 -
网格布局中 grid-template
grid-template是 grid-template-areas, grid-template-rows 和 grid-template-columns 三个属性的简写,用以定义网格中的 分区、行和列 。取值:none:将 grid-template-rows , grid-template-columns , grid-template-areas 三个属性设置为关键字 no...原创 2019-11-05 15:25:35 · 3148 阅读 · 0 评论 -
网格布局中 grid-template-columns / grid-template-rows 和 grid-template-areas 属性
grid-template-columns / grid-template-rows使用空格分隔的值列表,用来定义网格的 列 和 行。值表示 网格轨道(Grid Track) 大小,值之间的空格 表示网格线。.container { grid-template-columns: <track-size> ... | <line-name> <track-si...原创 2019-11-05 11:33:31 · 18652 阅读 · 1 评论 -
CSS Grid 二维布局系统认知(一)
CSS Grid布局(又称为 “网格布局” ),是一个基于网格的二维布局系统。一开始我们用表格(table),然后是浮动(float),再是定位(postion)和内嵌块(inline-block)来布局页面,但是所有这些方法本质上都是只是 hack 而已,并且遗漏了很多重要的功能(例如垂直居中)。Flexbox 很大程度上改善了我们的布局方式,但它只是解决了更简单的一维布局,而不是复杂的二维布...原创 2019-11-04 19:12:41 · 565 阅读 · 0 评论 -
webkitAnimationEnd事件与webkitTransitionEnd事件
在CSS 3中,可以通过使用keyframe样式属性与animation样式属性实现animation动画,使用transition样式属性实现transition动画。在WebKit引擎的浏览器(包括Chrome浏览器与Safari浏览器)中,存在与这两种动画功能相关的webkitAnimationEnd事件与webkitTransitionEnd事件,本文对这两个事件进行详细介绍。本文中不...转载 2015-09-26 20:52:27 · 2561 阅读 · 0 评论 -
flex弹性布局(所有孩子设置宽度计算后超过父亲时)
html部分:<div class="container container1"> <div class="flex-item flex-item1">1 1</div> <div class="flex-item flex-item2">1 2</div> <div class="flex-item flex-item3">1 3</div></div><div cla原创 2017-10-18 16:33:22 · 6552 阅读 · 0 评论 -
flex中的flex-direction
html部分:<div class="container container1"> <div class="flex-item flex-item1">1 1</div> <div class="flex-item flex-item2">1 2</div> <div class="flex-item flex-item3">1 3</div></div><div cla原创 2017-10-18 17:15:12 · 890 阅读 · 0 评论 -
flex 中的flex-basis
概述flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。语法/* Specify <'width'> */flex-basis: 10em;flex-basis: 3px;flex-basis: auto;/* In原创 2017-10-18 19:33:47 · 3710 阅读 · 0 评论 -
flex简单的页面布局
这个栗子里面的含金量自己去挖掘,拖动看在不同的分辨率下的显示,思考为啥会出现这种情况。有点儿意思。哈哈哈哈哈哈哈哈~~ https://jsbin.com/pigacukubu/edit原创 2017-10-18 19:37:01 · 509 阅读 · 0 评论 -
移动web开发----高效移动web布局
flexbox弹性盒子布局 混个划分:父元素用display:webkit-flex;说明使用弹性布局,它的子元素有一个元素是固定宽度width:100px的,剩下的元素就按照剩余宽度等比划分。小技巧: 不定宽高的水平垂直居中//第一种方法:绝对定位配合translate(-50%,50%)方法.myoff-wrapper{ position:absolu...原创 2018-09-07 10:31:15 · 614 阅读 · 0 评论 -
移动web开发----像素知识
PixeliPhone5对外宣称的640*1136是指它的物理像素,而我们实际开发中用的px是指逻辑像素px: css pixels逻辑像素,浏览器使用的抽象单位,可以根据不同的设备和关系变大变小的。dp,pt: device independent pixels设备无关像素,就是说我这个设备的物理像素是固定的,不像抽象像素那样可大可小,它在物理世界这么大就这么大。它们两者的关系是...原创 2018-09-06 14:42:34 · 285 阅读 · 0 评论 -
解决在sass中使用calc不能包含变量的问题
写sass的时候,发现在sass中使用calc包含一个变量,不会产生效果,看代码:font-size: calc($min-font-size + (2 - 1.4) * ((100vw - $min-screen) / (1200 - 800)));代码运行效果:要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$min-font-size}),代码改成这样...原创 2019-10-14 09:57:14 · 1421 阅读 · 0 评论 -
移动web开发----特殊样式处理
以下是Retina屏幕下的问题。高清图片:在移动web页面上渲染图片,为了避免图片产生模糊,图片的宽高应该用物理像素单位渲染,即100*100的图片应该使用100dp*100dp。 width:(w_value/dpr)px; height:(h_value/dpr)px;ipx边框:左边是没有1像素的,右边有1像素。 同样是Retina屏幕问题,根本原因是:1px使...原创 2018-09-07 11:21:32 · 155 阅读 · 0 评论 -
元素垂直居中
要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中,...原创 2018-08-23 15:19:02 · 199 阅读 · 0 评论 -
元素水平居中N种方法
元素主要分为块级元素和行内元素,所以对元素进行水平居中也分这两种情况来讨论。一. 行内元素常用行内元素为a/img/input/span 等,标签内的HTML文本也属于此类。对于此类情况,水平居中是通过给父元素设置 text-align:center来实现的。这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居...原创 2018-08-23 11:39:29 · 2358 阅读 · 0 评论