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 定位对齐

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。值越小，越透明。