好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人经验总结,假设认为实用请点赞 留言!    JS前端实用开发QQ群 :147250970  欢迎添加~! 怎样看待 CSS 中 BEM 的命名方式? BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种CSS Class 命名方法. 相似于:…
今天主要谈一谈CSS中的各种居中的办法. 首先是水平居中,最简单的办法当然就是 margin:0 auto; 也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果. 那么其他的办法呢?容我一一道来: line-height 首先介绍文字的水平居中方法: <div class="wrap">刘放</div> 利用line-height设为height的一样即可: .wrap{  line-height: 200px;/…
PS:测试浏览器均为chrome. 首先说下负margin的影响. 正常html页面在显示时,默认是根据文档流的形式显示的.文档流横向显示时,会有一个元素横向排列的基准线,并且以最高元素的vertical-align设置为基准线,此元素的高度也为本行的高度.当横向空间不够,或者元素为block时,文档流会换行显示. 除去绝对定位.固定定位的元素,文档中的每一个元素在文档流中是占据一定空间的,此空间包括margin.border.padding.content.根据元素的display.line-…
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚,于是自己决定试一试 1.需要先了解块级元素和行间元素 块级元素有:div(div默认是块级元素),p标签,h1-h6等: 行间元素有:a标签,img标签等 两者区别就是,块级元素可以独占一行,之后的默认存在换行符,行间元素可以多个处于一行内,只有超过外部边框的时候会换行. 2.问题的引出 <!DO…
1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black  显示 display:none  隐藏 3.visibility 隐藏占据原来的文档,不会让出原来所占的空间. visibility:hidden 隐藏 visibility:visible 显示…
单位主要用在规定元素的数值性css属性的,这里主要讨论应用的比较多的是width height  padding margin font-size,而单位中应用最广泛就是%.px.em 百分比 百分比,关键就是参考的父元素,在正常流和浮动时,就是包裹着当前元素的元素:在相对定位.绝对定位时,就是当前元素相对于的定位的元素,其实这个很好理解,在这种情况下元素框从文档流完全删除,和原来的文档流没有关系,其包含块可能是文档中的另一个元素或者是初始包含块.下文中提到的父元素都是基于这些知识上,因此不再强…
1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性决定,box的类型分为block-level box 和inline-level box(不包括css3的时候).不同类型的box参与不同类型的formatting context布局. Block-level elements are those elements of the source do…
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者position:fixed或者使用float属性时,width和height的设置能起作用. 因为在以上三种情况下,行内元素的display从inline变为block <style> span{ background-color:red; width:100px; height:100px; float…
css中颜色的表示方式: 图片来源http://www.w3school.com.cn…
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属性,所以叫它盒子模式.那么内容就是盒子里装的东西(content):而填充(padding)就是怕 盒子里装的东西(贵重的)损坏而添加的泡沫或者其它抗震的辅料:边框(border)就是盒子本身了:至于边界(margin)则说明盒子摆放的时候的不 能全部堆在一起,要留一定空隙保持通风,同时也为了方便取…