层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、MathML、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。下面记录一下CSS的“奇技淫巧”。
使用伪元素创建向右箭头 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .targetDiv::after{ content: " "; display: inline-block; height: 8px; width: 8px; border-width: 2px 2px 0 0; border-color: #b2b2b2; border-style: solid; transform: matrix(.71,.71,-.71,.71,0,0); position: relative; top: -2px; position: absolute; top: 50%; margin-top: -5px; left:90%; right: 0; }
CSS3 框大小 CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
默认情况下,元素的宽度与高度计算方式如下:
width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度
但是,如果在元素上设置了CSS3 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也将包含在 width 和 height 中。
CSS writing-mode 文字竖排 writing-mode 属性定义了文本在水平或垂直方向上如何排布。
语法格式如下:
1 writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom
vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left
vertical-lr:垂直方向内内容从上到下,水平方向从左到右
sideways-rl:内容垂直方向从上到下排列
sideways-lr:内容垂直方向从下到上排列
CSS 箭头和三角形 CSS画箭头和三角形都是利用div标签的边框属性,例如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 // 三角形 <div class="box"></div> // css代码 .box { width: 0; height: 0; border: 100px solid red; border-color: red transparent transparent transparent; } // 箭头 <div class="box"></div> // css代码 .box { margin-top: 50px; width: 100px; height: 100px; border-top: 10px solid red; border-right: 10px solid red; transform: rotate(45deg); }
height:100%不生效问题 浏览器按照从上到下,从外到内的顺序渲染DOM内容。因此当父元素没有设置高度值或者设为绝对定位,则子元素的height:100%不会不生效。
div的高度是由什么决定?是由它文档流中元素的高度的总和。
什么是文档流(Normal Flow):指的是元素排版布局过程中,内联元素会默认自动从左往右,块级元素从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。
脱离文档流(常见):
float:left;
position: absolute;
position:fixed;
单行缩略..以及多行缩略 html单行缩略方法:
1 2 3 4 5 .oneline { white-space: nowrap; //强制文本在一行内输出 overflow: hidden; //隐藏溢出部分 text-overflow: ellipsis; //对溢出部分加上... }
CSS尺寸单位 % px em rem 在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位。相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位。字体相对单位有:em、ex、ch、rem;视窗相对单位有:vw、vh、vmin、vmax几种。绝对长度单位则是固定尺寸,它们采用的是物理度量单位:cm、mm、in、px、pt以及pc。但在实际应用中,我们使用最广泛的则是em、rem、px以及百分比(%)来度量页面元素的尺寸。
px:为像素单位。它是显示屏上显示的每一个小点,为显示的最小单位。它是一个绝对尺寸单位,是不能变动的;
em:它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位,可以变动。一般浏览器字体大小默认为16px,则2em == 32px;
rem:它是描述相对于当前根元素字体尺寸,除了描述对象与em不同其余都和em一样。
%: 百分比,它是一个更纯粹的相对长度单位,可以变动。它描述的是相对于父元素的百分比值。如50%,则为父元素的一半。
CSS使网站黑白灰效果的代码 使用如下CSS即可:
1 2 3 4 5 6 7 8 html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); -webkit-filter: grayscale(1); }
代码释义:filter 是滤镜的意思,filter:gray 的意思就是说给页面加上一个灰度的滤镜,所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 Chrome 和 Safari 浏览器是无效的,所以下面会有一行 -webkit-filter: grayscale(100%); 这个样式是专属于使用 webkit 内核的浏览器的,意思和 filter: gray; 差不多,只是写法不同罢了。
CSS打印时隐藏输入框占位符 1 2 3 4 5 6 7 8 9 10 11 12 13 14 @media print { ::-webkit-input-placeholder { /* WebKit browsers */ color: transparent; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: transparent; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: transparent; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: transparent; } }
CSS float属性 CSS 的 Float(浮动)使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止。
文档流是是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了。
当元素设置float浮动后,该元素就会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素,浮动元素会造成父元素高度塌陷。
清除浮动的影响的方法有:
设置父标签合适的高度,前提必须确定子布局的高度,来计算父布局的合适高度,包裹住子布局。
给受影响的div加clear,清除浮动的影响
父级标签的样式里面加: overflow:hidden;
在最后一个浮动的盒子的后面,新添加一个标签。然后设置clear清除浮动。
为父标签添加伪类After,设置空的内容,并且使用clear:both;
CSS width属性 css的三大特性分别是 继承性,层叠性,和优先级。
css的继承性指的被包在内部的标签拥有外部标签的样式性,子元素可以继承父元素的属性。但也不是所有的css属性都有继承性的。
只有块元素才可以默认“继承”其父元素的width.
浮动元素和定位元素也是不默认(不自动)“继承”其父元素宽度的。
参考链接
CSS(层叠样式表) ,by mozilla.
CSS3 框大小 ,by runoob.com.
不让padding影响元素的宽度 ,by DecemberCafe.
改变CSS世界纵横规则的writing-mode属性 ,by 张鑫旭.
重新认识Pixel、DPI / PPI 以及像素密度 ,by Leon.
CSS画三角形,箭头 ,by 麦西的西.
如何用 CSS 画三角形和箭头 ,by 前端技术.
深入理解CSS系列(二):为什么height:100%不生效? ,by ChessZhang.
height:100%失效解决办法 ,by 当然我没扯淡.
css之单行缩略..以及多行缩略 ,by 秋天的故事.
CSS尺寸单位 % px em rem 详解 ,by HDWK.
如何修改placeholder样式 ,by 风火星辰.
一行 CSS 代码实现整个网站网页变黑白灰的效果 ,by 老唐.
CSS hide placeholder on print [duplicate] ,by stackoverflow.
深入理解float浮动属性 ,by 知乎用户1sIGTn.
css的继承之width属性(容易忽略) ,by 秋天的鱼.