2020-08-26

css的相关属性

1.背景相关属性

background-color：背景颜色
background-image：背景图片
background-repeat：图片复制选项（repeat在水平，垂直两个方向复制）
                                                       (repeat-x/y 在水平、垂直方向进行)
                                                     （no-repet 不复制）
background-position:图片所在位置      上top    下bottom      左left          右right
简写：将所有元素放在一起
有顺序要求：背景颜色>背景图片>重复方式>所在位置

background-url（img、pic.jpg）#87CEEB repeat-y right；

2.尺寸相关属性

1.固定高度与宽度（height:200px)
2.自适应高度（高度会根据内容的增加而增加)
3.指定大高度max-height（内容增加到指高度的时候就不会再增加）
4.指定 小高度 min-height  （开始时高度固定，内容增加到一定地步时开始增加高度）

3.显示相关属性

1.visbility: hidden 仅仅隐藏内容，该元素占位置依然存在
2display ：none  不仅隐藏内容，而且隐藏位置
Display：inline  将块级元素以内联元素形式显示，此时宽，高等属性对其无效
Display：inline-block  将块级元素以内联元素形式显示并且具有块级元素的特征，宽。高属性依然有效
Display：block  将内联元素以块级元素的形式展现

盒子模型

margin：外边框
Margin-top(上)       margin-tottom（下）   margin-left（左）margin-right（右）
使用方式：
1.）.  margin/；30px，表示上下左右外边距都设置30px
2）.margin-left：30px，表示设置距离左方30px
3）.margin：10px  20px 10px  20px分别设置上右下左四个边的边框，顺序按照顺时针方向
4）.margin：20px30px 分别设置 上下边距为20px，左右边距为30px
Padding：内边框
与margin类似上下左右边距都有
Border：边框

如果想让两个盒子在一行内，那么两个盒子都要浮动（float）并且给它们的父类清除浮动（overflow: hidden;）

什么是父类：

Box是div1和div2的父类