css样式-盒子、定位、背景色、尺寸

笔记7-13

1. css

1. 背景相关的颜色

<style>
    body{
        background-color: red;
        background-image: url("../pic/photo.jpg");
        background-repeat:no-repeat;
        /*background-position: inherit;*/
    }
</style>

 

Background-color：背景色

Background-image：设定背景图片，需要设置图片的url地址

Background-repeat：选择是否复制，repeat-x，水平复制；repeat-y，垂直复制

Background-position：选择位置

也可以直接将这一组属性值封装到一个background中，书写顺序：背景色，背景图，是否复制，图片位置，这样令代码更加简洁

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：边框颜色

也可以使用优化的书写方式

border: 50px groove blue;

4. Outline 轮廓线，用法同border

3.定位

定位的方式有：static、fixed、relative、absolute

Static：静态定位（默认）

无定位，元素正常出现了流中，不受上下左右属性影响

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: yellow;
        position: static;
    }
</style>

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;*/

}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
相对定位可以跳出流，不会影响别的定位
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之类的很烦，什么相对啊，绝对啊，就需要好好学了。

隐藏属性可以把需要展示的东西隐藏，可以直接连位置都没有，跳出流；也可以把他的为位置留着，占个位子。

背景色一种最重要的复制，repeat，可以使用重复，横向复制-x，垂直复制-y。