其实应该跟HTML5一起说的,但是想着更好的整理资料,所以两边都会更新,最近慢慢把自己的笔记从本子上搬上来着实心累!以前都是习惯性的记在我的笔记本上,因为还可以练练字哈哈哈(很丑),但是放到社区上,就会有种想要写好一点,自己再去看多几遍,万一有人看了,以免误导别人,有错误的话一定要指出来噢,共勉!
有部分资料参考自Github上点击查看
CSS中使用列布局是什么?
看看样子先
再看看代码,就知道是什么了
<style type="text/css">
.magazine{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:200px; /* Firefox */
-webkit-column-gap:200px; /* Safari and Chrome */
column-gap:200px;
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style>
1.要划分多少列,对于Chrome和firefox分别需要”webkit”和“moz-column”
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
2.两列之间需要多少差距
-moz-column-gap:200px; /* Firefox */
-webkit-column-gap:200px; /* Safari and Chrome */
column-gap:200px;
3.想要在这列之间画一条线的话,要多宽
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
然后就给盒子赋上class就行啦
说一些CSS3中的文本效果
- text-shadow: y-shadow,x-shadow,blur,color;
y-shadow:必需,水平阴影的位置,允许负值
x-shadow:必需,水平阴影的位置,允许负值
blur:可选,模糊的距离
color:可选,阴影的颜色
<style type="text/css">
.special{
text-shadow: 10px 5px 5px navy;
}
</style>
看看效果
2.word-wrap的自动换行功能,有两个值
normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或 URL 地址内部进行换行
看看效果
我能想到的比较长的单词了......
页面导入样式时，使用link和@import有什么区别？
1.link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用,而@import是CSS提供的,只能用于加载CSS
2.页面被加载时,会同时加载link,而@import引入的CSS要等到页面家湾在之后才加载
3.import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题
visibility中的collapse
collapse的作用跟hidden一样,但是很有意思的是,collapse与hidden不同的是,在chrome和Firefox下展示是不一样的.
<body>
<table cellspacing="0" class="table">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Rocks</th>
</tr>
<tr>
<td>Apple</td>
<td>Celery</td>
<td>Granite</td>
</tr>
<tr>
<td>Orange</td>
<td>Cabbage</td>
<td>Flint</td>
</tr>
</table>
<p><button>collapse行1</button></p>
<p><button>hide行1</button></p>
<p><button>重置</button></p>
<script type="text/javascript">
var btns = document.getElementsByTagName('button'),
rows = document.getElementsByTagName('tr');
btns[0].addEventListener('click', function () {
rows[1].className = 'vc';
}, false);
btns[1].addEventListener('click', function () {
rows[1].className = 'vh';
}, false);
btns[2].addEventListener('click', function () {
rows[1].className = '';
}, false);
</script>
</body>
这里说一下addEventListener里的false,默认false,在冒泡阶段执行事件,如果设置为true是在捕获阶段执行事件
看看运行效果
在chrome下,我点击collapse行1的时候是跟hidden效果一样的!!
但是再Firefox下运行是这样的,效果跟display:none效果是一样的
那么在Firefox下点击hidden呢?效果也是想在chrome下一样的!
这就是collapse和hidden的区别
盒模型
首先,盒模型有两种,IE盒模型和标准盒模型
盒模型包括:content+padding+margin+border
我们先看看标准盒模型:
再看看IE盒模型
由此可以看出,标准盒模型的content是不包括其他部分的,但是IE盒模型的content包括padding和border的
下面安利一个很好用的画流程图画什么鬼图都好用的plugin
chrome的plugin---Gliffy Diagrams
长这样的↓
CSS中有哪些可以inherit的attribute
常用的可inherit的有:
(1)font-size
(2)color
(3)font-family
...好了还有很多,常用的也就这几个吧我觉得
看看不能inherit的有哪些
(1)width
(2)height
(3)border
(4)padding
(5)margin
CSS中优先级是如何计算的?
我们先看看按照选择器权重来排序的选择器链是怎么样的
!important>行内样式>ID>Class>标签选择器>通配符选择器(*)>继承
那么现在再来看优先级如何计算的
去掉第一个最牛逼!important,剩下的看下面
- 行内元素=1,0,0,0
- ID=0,1,0,0
- Class=0,0,1,0
- 标签选择器=0,0,0,1
这时候应该明白什么意思了,举个栗子🌰
body div #box{color:hotpink;}
上面有两个标签选择器,有一个ID选择器,那么优先级运算是这样的
0,1,0,2
好了,这么算应该都明白了.我们都是读过小学的
用css实现小三角
.triangle{
width:0;
height:0;
border-wdth:20px;
border-style:solid;
border-color:red transparent transparent transparent;
}
这样子
解决border的问题
方法一:
用outline代替border;outline的边框是在元素内绘制,border的边框是在元素外绘制.
但是outline不能像border一样指定上下左右(border-left...),outline是设置四个边的
方法二:
设置box-sizing:border-box;
border-box是在宽高内进行绘制边框,还解决了padding自适应问题.
还有一个值是content-box,这是在宽高之外绘制边框
