小陈第五天 盒子

一、盒子

盒子的模型的组成：边框（border），内容，内边距（padding），外边距（margin）

1、边框

（1）边框的组成：

        边框宽度：border-width

        边框的颜色： border-color

       边框的样式： border-style 

（2）盒子的样式：可以单独设置每一条边线的样式 

        border-style :solid；                     实线   常用值

         border-top-style:dotted；             点线

         border-bottom-style:dashed；     虚线

         border-style :none；                     没有样式

 

边框可能的值

（3）同时设置四个边的颜色 样式 和宽

         border-width: 5px;         设置盒子边框粗细为5px

         border-color: red;          盒子边框颜色为红色

         border-style: solid;         盒子边框线为实线

简写（没有顺序）：

          border：1px（粗细）  solid（实线）  pink（颜色）；  

（4） 单独设置每一条边的颜色 

          border-top-color：red；                            设置盒子顶部颜色

          border-right-color:pink；                   设置盒子右边颜色

          border-bottom-color： bule；                 设置盒子底部颜色

          border-left-color:green；                            设置盒子左边颜色 

简写（顺序为 上  右   下  左）：

          border-color：red   pink   bule    green；

二、内边距（padding）

1、内边距：边框与内容之间的距离

 

html中的代码

 

css样式

 

效果图

设置内边距需先设置盒子宽高

2、分别单独设置盒子每条边的的内边框：

padding-left：____px

padding-right：____px

padding-top：____px

padding-bottom：____px

简写（顺序：上右下左）：

padding：____px    ____px     ____px     ____px；

三、外边距（margin）

1、 外边距：盒子距离四周的边距

 

 

 

2、分别单独设置盒子每条边的的外边框

margin-left：____px

margin-right：____px

margin-top：____px

margin-bottom：____px

简写（顺序：上右下左）：

margin：____px    ____px     ____px     ____px；

3、通过调整margin可以调整盒子的位置，使盒子水平居中

margin ：0   auto；

0         代表上边距为0

auto     代表左右自动适应

4、如果相邻的兄弟元素同时设置外边距，生效的是最大的那个外边距 而不是外边距的和

 

四、盒子模型尺寸

1、box-sizing：content-box; 

      border-box：设定以后代表盒子的所有尺寸包含在我设置的宽高里

2、盒子模型的尺寸组成（默认尺寸）

      宽：padding-left  +  border-left+盒子奔上的宽度 + padding-right  +  border-right

      高：padding-top  +border-top + 盒子本身的高度 + padding-bottom  +  border-bottom

五、清除默认样式

1、使用通配符

通配符清除默认样式

解析：使用通配符清除

1、margin外面距为0

2、padding内边距为0 

3、list-style列表样式为没有

2、 清除a标签的样式

 

 text-decoration: none;

文本样式为没有