笔记6--CSS基础知识

接笔记5--CSS基础知识

2.3背景相关属性

body{
    background-color: red;
    background-image:url("xx.jpg");
    background-repeat: repeat-x;
    background-position:inherit;
}

 

background-color背景颜色

background-image背景图片，需要设置图片的url地址

background-repeat-x：图片的复制选项（背景图横向平铺）

 -y：纵向平铺

no-repeat：不复制（平铺）

background-position：right

left

top

bottom

Inherit

也可以将这一组属性值封装到一个属性background中，书写顺序是:

背景色background-color

背景图background-image

背景平铺方式background-repeat

位置background-position

表达更加简洁。

background: greenurl("xx.jpg") no-repeat right;

 

 

2.4 尺寸相关属性

height：高度

width：宽度

 

 

div{
    width:200px;
    height:200px;
    background-color: red;
}

 

max-width：最大宽度

max-height：最大高度

min-width：最小宽度

min-height：最小高度

 

2.5显示相关属性

隐藏元素的方法：

（1）visibility:hidden，仅仅隐藏内容，该元素所占位置依然存在。

（2）dispaly：none ，不仅隐藏内容，而且不占位置。

div{
    /*visibility: hidden;*/
    height:100px;
    display: none;
}    

display 可以设置元素的显示模式

inline：将块级元素以内联元素的形式显示，此时width和height属性无效。其空间取决于元素的内容。

inline-block：将块级元素以内联元素的形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位大小。

li{
    display:inline-block;
    width:200px;
    background-color: red;
}

反过来也可以将内敛元素以块级元素形式来显示

span{
    display:block;
}

即display：block

2.6盒子模型

 

 

background-color:#71b9fe;

：外边距

margin-top

      -right

      -bottom

      -left

使用方式

（1）margin：30px；表示上下左右都为30px

（2）margin：30px；分别设置上下左右外边距

（3）Margin：10px；20px；30px；40px；分别设置上右下左四个边距。

 

 

padding：内边距

也有上下左右边距，和margin类似，不再赘述。

 

border：边界、边框

border-width: 20px;边框宽度
border-style: dashed;边框线条类型
border-color:blue;边框的颜色

word中设置边框的操作

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

border：10px dashed blue；

outline：轮廓线，用法同border