css学习笔记

2016-11-01 本文已影响1人亲爱的孟良

table元素
- border-collapse:collapse 去掉默认边框
- align属性，这个属性是div的属性，并不是css的样式,可以让div中的内容进行对齐
```
<div align='center'>
<input type="text" />
<br/>
<input type="text" />
</div>
```

background详解

background-image,背景图片可以有多个，“，”隔开，多个图片由上向下显示

background-image:url(top-image.jpg),url(bottom-image.jpg);

background-clip,控制背景图片的‘位置‘

background-clip:border;//背景在border边框下开始显示
background-clip:padding;//背景在padding下开始显示，而不是border
background-clip:content;//背景在内容区域开始显示
background-clip:no-clip;//默认属性

background-attachment,定义背景图片随滚动轴的移动方式

background-attachment:scroll;//，默认值，随页面的滚动背景图片也移动
background-attachment:fixed;//不随页面滚动而移动
background-attachment:inherit;//继承

background-position,背景图片的起始位置，有个前提background-attachment:fixed;

//前提别忘记
background:x y;
//分别是水平距离和垂直移动距离，记住左上角才是顶点，假设（0，0）的话，那就是左上角对齐，假设（100px,100px）那就是水平向右移动100px，垂直向下移动100px
//值可以是百分数
//值还可以是top right bottom left
//假设值为（right，top），也就是说明图片的右上角和标签的右上角重合
//假设值为（left，top），也就是说图片的左上角和标签的左上角重合，这就是所谓的“对应点”

background-size,大小

background-size:contain;//缩小背景图片以适应标签元素
background-size:cover;//放大充满整个标签元素
background-size:100px 100px;//固定大小
background-size:百分比；//根据内容标签元素大小，来缩放
图片尺寸大小

z-index,仅仅在绝对定位、相对定位、固定定位的前提下才有效
替换元素

替换元素指的<input>,<textarea>,<select>,
<img>等元素，这些元素往往没有实际的能容，即一个空元素，浏览器会根据元素的标签类型和属性来显示这些元素。

不可替换元素

不可替换元素指的是其内容直接表现给用户端的（比如浏览器）元素。

隐藏元素
- visibility:hidden元素虽然不可见，但是仍然在文档流中，仍然占据原来的位置，就像存在一样，只不过看不见。
- display:none,元素不在文档流中，真正的消失，对其他元素也没有任何影响。
- opcity:0,与visibility一样，虽然表面上看不见了，其实还是存在的。
块级元素
- 水平格式化（以下的前提都是块级元素⚠️）
水平属性,margin-left,border-left,
padding-left,width,padding-right,
border-right,margin-right七个，七个之和必须是包含块的宽度。只有width和左右外边距的值可以设置为auto。
- auto的意义在于自动计算，使七个值的总和加起来是包含块的宽度。
  - 假设包含块的总宽度为400，然后外边距和宽度都设置为100px，（加起来是300，并不是400），那么此时用户代理将会将右外边距重置为auto，表现的结果就是左外边距100px，width100px，然后右外边距为200px。
  - 假设只有width有具体的宽度，左外边距右外边距设置为auto，那么就会等分，表现出来就是居中啦😍！！！！
  - 如果width和左右外边距都设置为auto，那么左右外边距都会被解释成0，然后width会尽可能的宽。

垂直格式化（以下的前提都是块级元素⚠️）
- 元素的默认高度由其内容决定。
- 垂直属性也是有七个，和上面的水平属性一样，这七个之和加起来等于height。只有height和上下外边距可以设置为auto。
- 如果正常流中的块元素的margin-top或margin-bottom设置为auto，它会自动计算为0。如果值为0，就不能很容易的将正常流元素在其包含块中垂直居中。这也说明，如果将一个元素的上、下外边距设置为auto，实际上它们都会重置为0，使元素框没有外边距。（但是对于定位元素，上下外边距为auto时，其处理有所不同）height必须设置为auto或者是某种类型的非负值。
- 👉百分数高度。如果一个块级正常流元素的height设置为一个百分数，这个值则是包含块height的一个百分数（包含块的高度是具体的值，不是auto）❗️；如果包含块的高度是auto，然后子元素的高度是百分数，那么子元素的百分数高度会被重置为auto，表现出来的就是父高度与子高度相同。
- auto高度。如果块级正常流元素设置为height：auto，分两种情况->
  - 子元素为内联元素时，显示时的高度正好足以包含其内联内容。
  - 子元素只有块级元素，其高度为从最高块级子元素的外边框边界到最低块级子元素外边框边界之间的距离。
placeholder的颜色

::-webkit-input-placeholder { /* WebKit browsers */ 
color: #ccc; 
} 
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
color: #ccc; 
} 
::-moz-placeholder { /* Mozilla Firefox 19+ */ 
color: #ccc; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
color: #ccc; 
}

目标伪类选择器 :target 很酷！！！

用来匹配页面的URI中的某个标志符的目标元素。比如可以做到不通过js代码来实现tab切换。参考链接：http://www.w3school.com.cn/tiy/t.asp?f=css_sel_target

css学习笔记

猜你喜欢

热点阅读