要注意整体布局;
链接样式;(当用css定义链接的各种状态时,要注意书写的顺序)
伪类和选择符的配合使用;(将伪类和类组合起来用,就可以在同一个页面中做几组不同的链接效果了)
所有样式名全都小写尽量用英文为保证日后能一目了然,尽量不缩写;
一些代码的使用方试;
浮动:float((1、对于内部全为浮动的元素,记得清除浮动。2、元素内部的子元素尽量不要全部浮动,最好保留最边上的一个设置margin,这样便不会出现因浏览器窗口缩放导致的浮动元素被挤到下一行,使页面错乱的情况。)
定位:
相对定位:relative(外边距合并情况,仅当父元素与子元素都是默认定位(relative),或指定为relative,且父元素合并边没有border时才会发生)
绝对定位:absolute(1、所有父类元素都没指定position时,相对于body绝对定位。2、父类中有指定position的元素时,相对于从下往上遍历的第一个指定了position的父类元素绝对定位。)
div{widht:100pxheight:100pxborder-width:2px}
上面这样的设置 div 在页面中实际站位是 104px,如果不注意很容易造成页面错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’box-sizing: content-box’,它在页面中实际宽度 = width+border( 该公式仅针对上面例子)。
border-image-source背景图片源
border-image-slice需要展示出来图片的尺寸,如果这个量等于图片的尺寸就都相当于整个图片展示出来
border-image-width图片边框的宽度。
border-image-outset边框图像区域超出边框的量。
border-image-repeat图片的填充形式
这个属性的兼容性不是很好,所以在正常的前端开发工作中很难用到,但是在不考虑兼容性的情况下,它无疑的一个很强大的属性,因为它可以自定义漂亮的边框,而不在是单调的线条。
这个属性使用并不太难,不过其中的border-image-slice属性在使用的时候有一个小技巧,就是当想要其中 image 不失真即不拉伸,slice 要和 width 一样。
例如:
.demo{border-width:20pxborder-image-slice:20}
.demo2{
width: 100px
height: 100px
background: #ccc
border-width: 20px
border-style: solid
border-image-source: url(./../img/border-image.jpg)
border-image-slice:20
border-image-outset:22px
border-image-repeat: repeat
}
order-image 使用时候一定要设定 border-style 虽然这个属性没什么用,但是如果不设定它 border-image 就不生效。
border-image-slice 如果设定数值当 px 用时候直接写数字就可以 如果加上 px 反而会不生效。
border-width 用来设定边框的宽度,它决定图片边框展示的厚度(即围绕宽度)。
不要让 border-radius 的 % 值大于 50,因为如果两个相邻的半径和超过了对应的盒子的边的长度,那么浏览器要重新计算以保证它们不重合。虽然表面上看没有问题但是这样会对性能有影响。
如果用 rem、em 单位在移动端用border-radius 画圆,在部分机型里面是椭圆的问题,可以通过 50% 来解决 ,或者使用 px 配合缩放 scale 来实现 rem 单位的效果。
在内联元素span这类标签使用这个属性的时候同样有效但是记得不要使用%这样会导致一些span 标签的圆角不一样因为 % 是参考长和宽计算的。
border-radius 圆角并不会隐藏标签内部元素的内容,如果有内容溢出的情况记得增加overflow:hidden
任何元素都可以使用这个属性,包括视频、音频标签等。
一般情况下不推荐 border-top-left-radius 这类的写法除非是需要在某种交互过程中需要改变其中一个的圆角值而其它的保持不变。因为这类的标签会影响浏览器渲染的性能。
使用这个属性可以让页面更有立体感,给元素添加一个阴影,使得元素看起来是悬浮在原来的位置,下面就看看它的用法吧。
效果如下图
它主要用来告诉浏览器怎么计算元素的展示宽高的。
推荐大家设置 box-sizing 为border-box 这样方便我们写样式不必在去减去 padding 也不会造成 IE 和 Chorme 这类浏览器展示不同的 bug 。如果不设置 box-sizing 不同浏览器会有不同的计算方式。