选择器
- 标签悬着器 div{}
- 类选择器 .div{}
- ID选择器 #div{}
选择器语法
- 并列选择器
.div1, .div2{
}
类.div1和.div2都具有的CSS
- 派生选择器
.div1 .div2{
}
类.div1中.div2具有的CSS
元素的类型
-
block
块级元素，如<p div>前后换行，自动填充全宽 -
line
行级元素，如<a> <span>前后不换行，不指定宽度，高度为基线之间的距离 -
line-block
行块级元素，如<img>前后不换行，可以指定宽度
类型的转换
.div1 {
display:black;
}
盒模型
盒模型概念
-
border边框 在内外边框之间的是边框 -
margin外边距 边框之外的，分上下左右 -
padding内边距 边框之内的，分上下左右 -
height高度 内边距里面的元素的高度 -
width宽度 内边距里面的元素的宽度 -
element元素 内边距里面的元素
示例
image
CSS 元素高度
四线谱，面试重点
-
Top Line顶线 -
Midder Line中线 -
Base Line基线 -
Button Line底线
示例
image
核心概念
- 行高
line-heigth基线之间的距离，基线是英文字符x的下端 - 行距 上面的基线与下面的顶线
CSS 定位对齐
| param | means |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
Vertical-align:
| param | means |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
对齐示例
![]()
image
image
隐藏 display 与 visibility
当html元素被设置为display:none后，浏览器不会解析该元素，none就是没有，消失了，所以他不会再文档流中占位。而visibility:hidden仅仅是视觉上消失了，hidden也就是隐藏了，但是它所在的位置仍然还在.
CSS定位
1. 文档流 默认
- 行<a>，按顺序水平摆放，放不下出现滚动条
- 块<img>，按顺序垂直摆放，放不下出现滚动条
2. 相对定位
原来在文档流中的位置不变，当前位置是相对于原始位置偏移后的结果
.class1{
position:relative;
top:5px;//向上加5px
left:55px;//向左加55px
}
3. 绝对定位
从文档流中删除其中原来的位置，就好像元素从来没有出现过。
他当前所在的位置会覆盖本来的元素，这就是CSS中层的概念。
常常用来做两边的广告
- 定位情况一，父元素未定位，相对于HTML容器做左上角开始定位
- 定位情况二，父元素已经定位，相对于最靠近父容器开始定位
4. 浮动
脱离文档流，向上浮起一层，所有同一容器内的浮动元素更具float属性值按顺序排列，例如如果都是float：left，就按照从左到右开始顺序排列。也会遮盖住文档中未浮动的元素。
透明化
.class{
opacity:0.4;
filter:alpha(opacity=40);
}
.class:hover{
opacity:1;
filter:alpha(opacity=100);
}
- IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
- IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。
