笔记7-13

1. css

1. 背景相关的颜 {MOD}

Background-color：背景 {MOD} Background-image：设定背景图片，需要设置图片的url地址 Background-repeat：选择是否复制，repeat-x，水平复制；repeat-y，垂直复制 Background-position：选择位置 也可以直接将这一组属性值封装到一个background中，书写顺序：背景 {MOD}，背景图，是否复制，图片位置，这样令代码更加简洁 background: red url("../pic/photo.jpg") no-repeat right;  

2. 尺寸相关属性

Height：高度 Width：宽度 div{
    height: 100px;
    width: 100px; } Max-height： Min-height： Max-width： Min-width：

3. 隐藏属性的方法

Visibility：后面接hidden，表示仅仅隐藏了内容，却还是存在的 Display：后面接none，把内容都搞没了，且不占位置 Display可以设置元素的显示模式 Inline：可以将块集元素以内联形式显示，且width和height无效，其空间大小取决于元素的内容。 Inline-black：可以将块集元素以内联形式显示，同时兼具块集元素的某些特征，比如使用width和height属性设置大小 i. 块集元素可以转换为内联元素，转换方式是定义display=inline-black; ii. 内联元素可以转换为块集元素，转换方式是定义display= black; li{ display: inline-block; width: 300px; height: 300px; background-color: green; } span{ width: 200px; height: 200px; display: block; background-color: blue; }
 

4.盒子模型

1. Margin： 外边距 Margin-top、margin-right、margin-bottom、margin-left 使用方式 1) margin：30px，代表了上下左右外边距都是30px； 2) Margin-left：30px，单独设置上下左右边距 3) Margin：10px 20px 30px 40px；分别设置上右下左四个边距为10px 20px 30px 40px； 2. Padding：内边距 属性与margin一样，它有的，它也有 3. Border： 边界边框 Border-width；边框宽度 Border-style：边框线条类型 Border-color：边框颜 {MOD} 也可以使用优化的书写方式 border: 50px groove blue; 4. Outline 轮廓线，用法同border

3.定位

定位的方式有：static、fixed、relative、absolute Static：静态定位（默认） 无定位，元素正常出现了流中，不受上下左右属性影响
Fixed：动态定位 #div1{ width: 200px; height: 200px; background-color: blue; /*left: 50px;*/ /*top: 50px;*/ position: fixed; /*z-index: 3;*/ } #div2{ width: 200px; height: 200px; background-color: yellow; left: 50px; top: 30px; position: fixed; /*z-index: 2;*/ }
从结果看出，fix定位可以将div从流中取出来，重新定位取决于left、top。重新定位之后会出现重叠，可以用z-index来实现谁在上面，大的在上。 Relative：相对的 #div1{ width: 200px; height: 200px; background-color: blue; /*left: 50px;*/ /*top: 50px;*/ position: fixed; /*z-index: 3;*/ } #div2{ width: 200px; height: 200px; background-color: yellow; left: 50px; top: 30px; position: fixed; /*z-index: 2;*/ }
相对定位可以跳出流，不会影响别的定位 Absolute：绝对的 #div1{
    width: 200px;
    height: 200px;
    background-color: blue;
    /*left: 50px;*/
    /*top: 50px;*/
    position: static;
    /*z-index: 3;*/
}
#div2{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 50px;
    top: 30px;
    position: absolute;
    /*z-index: 2;*/
}
#div3{
    width: 200px;
    height: 200px;
    background-color: yellow;
    left: 40px;
    top: 20px;
    position: absolute;
    /*z-index: 2;*/
} 从结果看出，绝对定位的元素可以从流中被拿出来，依靠left属性进行定位。 与fixed类似，但与参照物不同 Fixed参照根元素 Absolute参照父容器   2.选择器 所谓选择器，指的就是施加样式目标的方式

2.1元素选择器

用标签名作为选择器，选中所有的相应的元素

元素选择器的使用

元素选择器的使用1

元素选择器的使用2

2.2  Id选择器

是根据id来选择元素，其样式定义形式为 #idname{ ........ }

id选择器的使用

id选择器的使用

显示结果：

2.3类选择器

根据class属性来选择元素，其样式定义形式为： className{ ......... }

id选择器的使用

id选择器的使用

id选择器的使用

  显示结果： 从结果上看，.old{。。。}会施加到所有的class=”old”的元素上，可以使用在p上

2.4属性选择器

1.根据属性名来选择

3

  运行结果： 结果看出，所有具有title属性的div元素都可以适用，别的还不知道 2.根据属性值来选择

1

2

3

4

5

运行结果：
结果看出，只有div2应用了格式，因为是title=div2   Title~=”div”：选中属性值包含指定完整单词的元素

1

2

3

4

5

运行结果： Title^=””div：选中以div开头的title     Title$=”div”:选中以div元素结尾的title   Title*=”div”:选中属性值包含“div”的元素