CSS核心重点

选择器

1. 标签悬着器 div{}
2. 类选择器 .div{}
3. ID选择器 #div{}

选择器语法

1. 并列选择器

.div1, .div2{
    
}

类.div1和.div2都具有的CSS

2. 派生选择器

.div1 .div2{
    
}

类.div1中.div2具有的CSS

---

元素的类型

1. block
   块级元素，如<p div> 前后换行，自动填充全宽
2. line
   行级元素，如<a> <span> 前后不换行，不指定宽度，高度为基线之间的距离
3. line-block
   行块级元素，如<img> 前后不换行，可以指定宽度

类型的转换

.div1 {
    display:black;   
}

---

盒模型

盒模型概念

1. border 边框 在内外边框之间的是边框
2. margin 外边距 边框之外的，分上下左右
3. padding 内边距 边框之内的，分上下左右
4. height 高度 内边距里面的元素的高度
5. width 宽度 内边距里面的元素的宽度
6. element 元素 内边距里面的元素

示例

image

---

CSS 元素高度

四线谱，面试重点

1. Top Line 顶线
2. Midder Line 中线
3. Base Line 基线
4. Button Line 底线

示例

image

核心概念

1. 行高line-heigth 基线之间的距离，基线是英文字符x的下端
2. 行距 上面的基线与下面的顶线

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

隐藏 display 与 visibility

当html元素被设置为display:none后，浏览器不会解析该元素，none就是没有，消失了，所以他不会再文档流中占位。而visibility:hidden仅仅是视觉上消失了，hidden也就是隐藏了，但是它所在的位置仍然还在.

---

CSS定位

1. 文档流 默认

1. 行<a>，按顺序水平摆放，放不下出现滚动条
2. 块<img>，按顺序垂直摆放，放不下出现滚动条

2. 相对定位

原来在文档流中的位置不变，当前位置是相对于原始位置偏移后的结果

.class1{
    position:relative;
    top:5px;//向上加5px
    left:55px;//向左加55px
}

3. 绝对定位

从文档流中删除其中原来的位置，就好像元素从来没有出现过。
他当前所在的位置会覆盖本来的元素，这就是CSS中层的概念。
常常用来做两边的广告

1. 定位情况一，父元素未定位，相对于HTML容器做左上角开始定位
2. 定位情况二，父元素已经定位，相对于最靠近父容器开始定位

4. 浮动

脱离文档流，向上浮起一层，所有同一容器内的浮动元素更具float属性值按顺序排列，例如如果都是float：left，就按照从左到右开始顺序排列。也会遮盖住文档中未浮动的元素。

---

透明化

.class{
    opacity:0.4;
    filter:alpha(opacity=40);
}
.class:hover{
    opacity:1;
    filter:alpha(opacity=100);
}

1. IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。
2. IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。