CSS和JS知识点

一：盒子模型

1.定义：

• html中的所有标签都可以看成是盒子

2.属性：

1.margin（外边距）:两个标签之间的距离

2.padding（内边距）:内标签边框外壁距离外标签边框内壁的距离

3.border（边框）:边框

4.content（内容）:标签内部的内容提供

3.属性值

1.取消body标签默认的外边距

body {
   
            margin: 0;
        }

2.margin的属性值

1.margin后面跟1个属性值：表示：上下左右

margin: 20px;

2.margin后面跟两2属性值：表示：上下左右

margin: 20px 30px;

3.margin后面跟3个属性值：表示：上左右下

margin: 20px 30px 40px;

4.margin后面跟4个属性值：表示：上右下左（顺时针）

margin: 20px 30px 40px 50px;

5.水平方向居中显示

margin: 0 auto;

3.padding的属性值

1.跟1个属性值：表示：上下左右

padding: 10px;

2.跟2个属性值：表示：上下左右

padding: 10px 20px;

3.跟3个属性值：表示：上左右下

padding: 10px 20px 30px;

4.跟4个属性值：表示：上右下左

padding: 10px 20px 30px 40px;

二：浮动布局

1.在css中的任何元素都能浮动

2.如何解决浮动造成的父类塌陷问题:

提前写好下面的代码，当遇到父类塌陷问题的时候，直接给塌陷的父类的class属性加上：clearfix

.clearfix: after {
   
    content: '';
    display: black;
    clear: both;
}

3.示例：

    <style>
       .c1 {
   
           border: 1px black solid;
       }
       .c2 {
   
           height: 100px;
           width