css
文章平均质量分 76
baibaider
这个作者很懒,什么都没留下…
展开
-
脱离文档流,position与z-inex的关系
文档流:从上至下,从左至右的布局符合html中标签本身含义的布局,比如某些标签独占一行,有些标签属于行内元素等。脱离文档流:将元素从普通文档流中去掉,其他元素在排版的时候会当作这个元素不存在去排版。什么会导致元素脱离文档流:float:脱离文档流,但其他的元素文字会找到该元素的文字位置。position:absolute:脱离文档流,其他元素完全无视该元素。它的定位取决于它的父元素有没有定位(po...原创 2018-04-07 19:55:05 · 2487 阅读 · 0 评论 -
css 变量
。。。原创 2018-05-16 17:06:22 · 731 阅读 · 0 评论 -
css的各种单位
我常用的单位无非px,rem,deg等等,但今天看到了vw,vh,vm这样的单位,遂决定总结一下。关于单位的相关来自张鑫旭大神,在我的理解上做了些补充~单位含义em相对于父元素的字体大小,若父元素font-size为16px,那么1em就为16pxex相对于小写字母"x"的高度gd一般用在东亚字体排版上,这个与英文并无关系rem相对于根元素字体大小,若根元素font-size为16px,那么1em...原创 2018-04-09 23:05:01 · 1374 阅读 · 1 评论 -
target伪类实现tab选项卡
样式<style type="text/css"> #first{ background-color: #f00; } #second{ background-color: #0f0; } #third{ background-color: #00f; } ...原创 2018-02-25 00:10:04 · 621 阅读 · 0 评论 -
浅谈两栏式布局+三栏式布局(自适应)
两栏式布局(侧边栏固定宽度,主体内容部分自适应)法1:(侧边栏左/右浮动,主体部分margin-left/margin-right为侧边栏宽度)<style type="text/css"> .pra{ height: 500px; } .aside{ width:300px; t原创 2017-12-08 22:47:07 · 758 阅读 · 0 评论 -
BFC
盒子类型:block-level box: display 属性为 block, list-item(作为列表显示), table(块级表格)的元素,会生成 block-level box。并且参与 block fomatting context;inline-level box: display 属性为 inline, inline-block, inlin转载 2017-12-07 21:26:27 · 182 阅读 · 0 评论 -
display属性
display的属性:inline 默认。此元素会被显示为内联元素,元素前后没有换行符。none 此元素不会被显示。(在页面中没有位置与大小,而visibility:hidden内容虽然不可见,但是在页面中仍然有位置与大小。)block 此元素将显示为块级元素,此元素前后会带有换行符。inline-block 行内块元素。(CSS2.1 新增的值)inheri转载 2017-12-07 22:11:01 · 405 阅读 · 0 评论 -
css3的flex布局
1.Flexible boxes盒子按照宽高分出了以下 8 点:水平的主轴:main axis; 垂直的纵轴:cross axis;纵轴的开始位置和边框的交点:cross start;纵轴的结束位置和边框的交点:cross end;主轴的开始位置和边框的交点:main strat;主轴的结束位置和边框的交点:main end;单个项目占据主轴的空间距离:main axis;单个项目占据纵轴的空间距...转载 2018-02-22 20:29:35 · 609 阅读 · 0 评论 -
纯css画菱形,三角形,梯形,平行四边形
菱形: display: inline-block; width:100px; height:100px; background-color: #c685d9; transform: rotate(45deg); margin:50px;三角形: width: 0...原创 2018-02-26 15:24:21 · 14468 阅读 · 0 评论 -
scss,less等css方案
目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。它们有个统一的名字——css预处理器。这些预处理器解决了css的一些缺憾:· 语法不够强大,不能够嵌套书写,不利于模块化开发· 没有变量和逻辑上的复用机制,导致在css的属性值中只能使用字面量形式,以及不断重复书写重复的样式,导致难以维护。css预处理器给出了非常可行的解决方案:1. 变量:就像其他编程语...原创 2018-03-17 13:39:07 · 2014 阅读 · 0 评论 -
浏览器自带的滚动条样式
通常只适用于chrome:<div class="parent"> <div class="child"></div></div>.parent{ overflow: auto; width:100px; background-color: #ffcccc;...原创 2018-08-09 00:06:48 · 4096 阅读 · 0 评论