笔记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: static; /*z-index: 3;*/ } #div2{ width: 200px; height: 200px; background-color: yello left: 50px; top: 30px; position: relative; /*z-index: 2;*/ } #div3{ width: 200px; height: 200px; background-color: yello left: 100px; top: 60px; position: relative; /*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参照父容器，会随着屏幕而移动

 总结

定位比较难，有好多种类型，margin，position之类的很烦，什么相对啊，绝对啊，就需要好好学了。 隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。 背景 {MOD}一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。