随笔分类 -  CSS

css 系统自学笔记2017-12-04
摘要：一、几个常用的可以连写的样式属性 1、backgroud: 背景连写：没有先后顺序，都是可选的。 2、font字体属性连写： font: 二、元素分类 块级元素：div p h1~h6 ul li ol dl dt dd table等 特点：1、宽度：没有定义默认为父元素的宽度 2、高度：默认为0， 阅读全文
posted @ 2017-12-04 16:48 谷樵 阅读(173) 评论(0) 推荐(0)
CSS3
摘要：弹性布局：父元素： display:box;子元素：box-flex:1;盒子的排列：给父元素指定box-orient:horizontal ； verticalperspective 透视transition 过度animation 动画检测浏览器是否支持css3和html5，以及支持哪些项... 阅读全文
posted @ 2015-02-04 00:34 谷樵 阅读(169) 评论(0) 推荐(0)
前端样式实践出真知系列（二）
摘要：1、overflow 属性规定当内容溢出元素框时发生的事情。当属性值为hidden时，元素内容会被修剪，并且其余内容是不可见的。哪些元素会被修剪：超出元素边框的部分（不管它是内容本身过多导致的 还是通过定位（相对或绝对）导致的 ）都将隐藏。2、maring外边距祥解：一个元素的margin影响了父元... 阅读全文
posted @ 2014-12-09 12:29 谷樵 阅读(199) 评论(0) 推荐(0)
前端样式实践出真知系列（二）
摘要：1、CSS 继承是指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性。一般只有文字文本一些样式具有继承特性，如文字大小、文字加粗、文字颜色、字体等。其它大多数样式属性不会被继承下来常见继承css属性：font 、color；2、很多html标签有自己默认的属性，这样有时... 阅读全文
posted @ 2014-12-02 00:26 谷樵 阅读(159) 评论(0) 推荐(0)
前端样式新属性学习系列（一）
摘要：1、text-overflow:clip | ellipsis （要想隐藏溢出内容同时又想让过多内容以省略号样式显示）clip : 不显示省略标记（...），而是简单的裁切 ;ellipsis: 当对象内文本溢出时显示省略标记（...），备注：必须配合使用nobr标签，强制让内容不换行，才有... 阅读全文
posted @ 2014-12-01 21:57 谷樵 阅读(221) 评论(0) 推荐(0)
对css中的定位属性postion刨根解牛
摘要：定位的基本思想很简单:它允许你定义元素框相对于其正常位置应该出现的位置（relative），或者相对于父元素(absolute)、另一个元素甚至浏览器窗口本身的位置(fixed)。显然，这个功能非常强大，也很让人吃惊。一切皆为框:div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一... 阅读全文
posted @ 2014-11-29 20:30 谷樵 阅读(600) 评论(0) 推荐(0)
居中之美之水平居中系列
摘要：1、这种方法主要使用margin: auto配合元素的width来实现水平居中的效果content.horizontal { width: 200px; margin: 0 auto;} （备注：因为不设置宽度的话，块级元素默认的宽度为父元素的宽度，子元素和父元素一样宽，那就没有水平... 阅读全文
posted @ 2014-11-29 18:30 谷樵 阅读(169) 评论(0) 推荐(0)
居中之美之垂直居中系列
摘要：参考自：http://www.w3cplus.com/collective-5.html元素垂直居中1、元素内容是单行，并且其高度是固定不变的，你只要将其“line-height”设置成和“height”值一样就Ok了。（必须单行文本，且高度一定）html：content csss: .vertic... 阅读全文
posted @ 2014-11-28 15:16 谷樵 阅读(274) 评论(0) 推荐(0)
好的前端花园
摘要：1、前端国内技术博客http://www.w3cplus.com/2、 W3C标准 http://www.w3cschool.cc/3、CSS专攻 http://www.divcss5.com/4、js秘密花园http://bonsaiden.github.io/JavaScript-Garden/... 阅读全文
posted @ 2014-11-25 22:56 谷樵 阅读(103) 评论(0) 推荐(0)
前端样式学习心得篇
摘要：1、前端样式，重在实践，不能死学css语法，实践出真知，有时知道效果，比知道为什么更重要，不能纠结，达到效果就行啦 阅读全文
posted @ 2014-11-19 23:31 谷樵 阅读(228) 评论(0) 推荐(0)
前端样式实践出真知系列（一）
摘要：1、float:对前面的元素不会有影响，无论是块级元素还是行内元素的float，对后面的元素的影响都是：先假设当前元素不存在，后面元素的位置应该是什么样子的，然后再考虑下，float后的元素的大小是其真正的大小（即使是块级元素，大小=内容+padding+border+margin），这个大小会对后... 阅读全文
posted @ 2014-11-19 23:28 谷樵 阅读(460) 评论(0) 推荐(0)
css
摘要：7、CSS 组合选择符CSS组合选择符包括各种简单选择符的组合方式。在 CSS3 中包含了四种组合方式:后代选取器(以空格分隔)子元素选择器(以大于号分隔）相邻兄弟选择器（以加号分隔）普通兄弟选择器（以破折号分隔）相邻兄弟选择器相邻兄弟选择器（Adjacent sibling selector）可选... 阅读全文
posted @ 2014-10-15 18:11 谷樵 阅读(242) 评论(0) 推荐(0)
CSS定位（postion）和移动(float)
摘要：5、定位和移动：Positioning(定位)CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定... 阅读全文
posted @ 2014-10-14 17:50 谷樵 阅读(2910) 评论(0) 推荐(0)