CSS
文章平均质量分 69
柒青衿
前端
展开
-
CSS-float浮动与流体布局(1)
1 引言float设计的初衷仅仅是实现文字环绕效果。所以当内部块级元素设置为float:left时,其兄弟的文字出现环绕效果: Float的设计初衷仅仅是:实现文字环绕效果效果如下:换成图片: 效果:原创 2015-12-11 10:52:23 · 833 阅读 · 0 评论 -
CSS-float浮动与流体布局(2)
2 float特性2.1 包裹性未浮动: hi效果:浮动后: hi效果:结论:未设宽度的块级元素浮动后展示效果如果内联元素,会自动收缩包裹其内容。具有相同特性的css样式还有:display:inline-block/talbe-cellposition:absolute/fixedoverflow:hidden/scroll2.2原创 2015-12-11 11:13:17 · 2070 阅读 · 0 评论 -
Bootstrap-栅格系统自适应布局
1 container顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px padding值,这样container与浏览器窗口之间就存在一定距离。2 rowrow指container的一行,每行理想状态包含12个col,这些col在不同屏幕大小时行为不同,见下图:你也原创 2015-12-20 09:51:31 · 32297 阅读 · 0 评论 -
Bootstrap-栅格布局实例
下面是某管理系统的Bootstrap实现XXXXX系统 body { padding-top: 50px; padding-bottom: 40px; color: #5a5a5a; }/* 下面是左侧导航栏的代码 */.sidebar {原创 2015-12-20 10:16:47 · 7044 阅读 · 0 评论 -
CSS-float 特性及应用总结
1. float的结果包裹、坚挺、隔绝、破坏2. 清除浮动带来的影响方法:浮动元素底部加 clear:both 的空div(margin重叠) 父元素BFC化(无margin重叠) .clearfix:after{ content:’’;原创 2015-12-26 14:54:28 · 1600 阅读 · 0 评论 -
CSS-overflow特性及总结
1. overflow-x与overflow-y如果两值不同,其中一值为visible,另一值为 hidden、scroll、auto,则visible被重置为auto,自动重置。所以给一个宽高都大于容器的内容div设置overflow-x:hidden; 会使得其x方向隐藏,y方向出现滚动条。2. 滚动条一般17px。3. 如果设置内容器宽度为100%,原创 2015-12-27 19:41:24 · 1682 阅读 · 0 评论 -
CSS-absolute特性及应用
1. absolute的特性(1) 可以超越overflow滑动滑块,关闭按钮不动(2) 无依赖的absolute1) 折翼的天使、去浮动、位置跟随此种情况,如果先给第二张照片设置float再设absolute与只设置absolute效果一样。说明absolute具有去浮动性。inline或inline-block的元素浮动后效果如上图,block的元素浮原创 2015-12-26 14:56:39 · 738 阅读 · 0 评论 -
Sass-Ruby及Sass、Compass在Windows下安装
1. ruby环境安装在http://rubyinstaller.org/downloads/选择合适版本下载,选择安装目录,并勾选Add Ruby executables to your PATH,后面用到命令行,所以需要勾选此项。安装完成后,进入windows命令提示符,输入 ruby –v,返回安装版本,则ruby安装成功。2. 修改ruby源默认的ruby源原创 2016-01-18 21:16:58 · 584 阅读 · 0 评论 -
CSS-合理使用z-index控制盒子视轴高度,解决z-index失效
z-index只控制某些特殊盒子,比如绝对定位的盒子。不管特殊盒子还是普通盒子,它们都有z轴高度(视轴高度),那么当这些盒子重合排列时,哪个盒子在上哪个盒子在下呢,z-index又是如何影响盒子的上下排列的,为什么有时候z-index会“失效”呢。这些都是需要我们理解z-index原理,合理使用。原创 2016-06-18 14:32:39 · 6782 阅读 · 3 评论