css_4day(盒子模型组成部分)

目录

边框 border

表格的边框

内容 content

内边距 padding

外边距 margin

​清除内外边距

---

边框 border

1.边框样式 border-style:solid 实线边框 dashed 虚线边框 dotted点线边框

2.边框颜色 border-color

3.复合写法：border: 1px solid black 简写没有顺序

4.给上下边框分别设置 border-top border-bottom right left

边框会影响盒子实际使用的大小1.测量盒子的大小不量边框，如果测量是时候包含了边框，则需要width/height减去边框

表格的边框

给表格设置边框不仅需要给表格(<table>)设置，还需要给单元格设置(<td>)

通过上面的方法设置边框后，两个单元格的边界时黏在一起的，通过border-collapse 合并相邻的边框

内容 content

即书写在盒子里面的内容

内边距 padding

1.padding-top bottom right left

2.复合写法：后面有一个值代表上下左右都有

有两个代表上下 左右

三个代表上 左右  

四个代表上右下左

2.padding影响盒子大小，会把盒子撑大，用width和height减去多出来的内边距大小为原来盒子大小

3.padding不会撑开盒子的情况：如果盒子本身没有指定width和height属性，则padding不会撑开盒子大小

外边距 margin

1.margin-yop bottom left right

2.margin和padding的简写一样

3.块级盒子水平居中对齐(见上面的style)

<style>
.huhuhu {
      background-color:pink;
      width: 300px;
      height: 300px;
      margin:0 auto;
        }
</style>
<div class="huhuhu"></div>

输出结果 

 

4.行内元素和行内块元素水平居中：text-align:center

5.相邻块元素的合并：当上下两个块元素相遇时，如果上面的元素有下边距，下面的元素有上边距，题目之间的垂直间距不是bottom与top的和，而是去两者中较大的

6.嵌套块元素垂直外边距的塌陷：如果两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

   <style>   
        .hu{
        width:400px;
        height:400px;
        background-color: purple;
        margin-top: 50px;
        }
        .huhu{
            width:200px;
            height:200px;
            background-color: pink;
            margin-top:100px;
        }
    </style>

<div class="hu">
        <div class="huhu"></div>
</div>

如果我们有如图所示的一个盒子，我们想要的输出结果是子div元素可以直接向下移动，从而有居中的效果，我们加了这样一句代码margin-top:100px;

结果却是父div整个下降了100像素，这样的情况就叫嵌套块元素垂直外边距的塌陷

 我们可以用这三个方法解决

border:1px solid transparent;
/* 为父元素定义一个透明的上边框 */
padding:1px;
/* 为父元素定义一个内边距 */
overflow:hidden;
/* 隐藏浮动 */

 

清除内外边距

/* css的第一句代码 */
* {
   padding:0;
   margin:0;   
  }

行内元素只设置左右内外边距，不要设置上下内外边距，但是转化为块级元素就可以了