CSS
LesterWeng
CSDN目前很少更新了,主要更新
Blog: https://github.com/LesterWeng/blog
展开
-
块级元素、行内元素的水平、垂直居中方法总结
行内元素div { /*div内的行内元素水平居中*/ text-align: center; /*div内的行内元素垂直居中(即line-height设置为与height相同,若不设置height则默认等于line-height,故也可只设置line-height)*/ height: 50px; line-height: 50px;}// ...原创 2018-08-18 00:51:53 · 3350 阅读 · 0 评论 -
浮动元素详解
为什么需要浮动元素?1. 行内元素(包括文字、input、button等等)环绕浮动元素,这也是float设计之初的目的,可以实现文字环绕图片等效果2. 较早时期用来进行页面布局,现在有了inline-block、flex、grid等等更方便的方法浮动元素布局原理浮动元素会根据属性值向左或向右浮动,浮动元素会脱离标准文档流,进入浮动流,浮动流内的浮动元素可以左右移动,直至外边缘碰到包含块或...原创 2019-03-24 21:14:45 · 3500 阅读 · 1 评论 -
开启CSS3硬件加速
1. 何为硬件加速就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。2. 如何开启硬件加速Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速,只要使用特定的CSS语句就可以开启硬件加速:/**使用3d效果来开启硬件加速**/.speed-up { ...转载 2019-03-06 10:59:18 · 1356 阅读 · 0 评论 -
BFC
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。下列方式会创建块格式化上下文:根元素或包含根元素的元素 浮动元素(元素的float不是none) 绝对定位元素(元素的position为absolute或fixed) 行内块元素(元素...原创 2019-01-22 10:36:13 · 934 阅读 · 0 评论 -
文本溢出处理
1.单行文本溢出el{ width: xxx; /* 溢出省略...三件套 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}2.多行文本溢出处理后端返回合适的文本(固定字数、符号等) 前端进行截断el{ /* 只显示五行 */ height: 100px; ...原创 2019-01-13 22:20:03 · 961 阅读 · 0 评论 -
position: inherit、static、relative、absolute和fixed
inherit:规定应该从父元素继承 position 属性的值。static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明,z-index只对relative、absolute、fixed有效,默认为0)。relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"lef...原创 2018-11-13 16:12:53 · 2966 阅读 · 1 评论 -
可被子元素继承的属性
文本color(颜色,a元素除外) direction(方向) font(字体) font-family(字体系列) font-size(字体大小) font-style(用于设置斜体) font-variant(用于设置小型大写字母) font-weight(用于设置粗体) letter-spacing(字母间距) line-height(行高) text-align(用于...转载 2018-09-16 22:27:20 · 1075 阅读 · 0 评论 -
display: inline、block和inline-block
inline:使元素变成行内元素(内联),拥有行内元素的特性,即1. 与其他行内元素共享一行2. 不能修改width、height属性,大小由内容撑开3. padding属性 top、right、bottom、left设置都有效;margin属性只有left、right设置有效block:使元素变成块级元素,拥有块级的特性,即1.独占一行,在不设置自己的宽度的情况下,...原创 2018-08-16 17:16:54 · 15487 阅读 · 3 评论 -
各种百分比的指向
相对于父级宽度(static、relative的元素计算时不包含父级padding,absolute、fixed的元素会加上父级的padding)的:max-width、min-width、width、left、right、text-indent、padding、margin、grid-template-columns、grid-auto-columns、column-gap 等;相...原创 2018-08-18 10:20:07 · 823 阅读 · 0 评论