CSS盒子模型

作者: _羊羽_ | 来源:发表于2019-06-22 13:36 被阅读0次

CSS 盒子模型
2019-05-05
css基础问题
css 盒子模型
html页面绘制方面
CSS：盒子模型（box）
你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
需要掌握的CSS
CSS的基本使用
前端一些面试题

网页的布局本质就是把网页的元素（图片，文字都）都放入盒子里面，然后按照自己的需要摆放盒子的过程就是网页布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div{
           width: 100px;
           height: 100px;
           background-color: cadetblue;
           padding: 20px;
           border: red 10px solid;
       }
    </style>
</head>
<body>
<div>盒子模型展示</div>
</body>
</html>

image.png

边框border

边框有三部分组成：边框大小边框样式（dashed 虚线 dotted 点线 double 双实线）边框颜色;

 border: 10px solid red;

如果想要单独某一条边框的写法top bottom left right

border-方位名词:边框大小 边框样式 边框颜色;
border-top:10px solid gray;

边框是一个复合属性，每一个部分都可以有单独的属性去控制

边框大小；border-width
边框样式：border-style
边框颜色：border-color

细线表格
border-collapse:collapse;
设置圆角
borde-radius:值; 一个值控制的上左上右下右下左;

borde-radius:50%

内边距padding

padding的取值可以是1-4个
一个值：控制整个上下左右
两个值：第一个控制上下第二个控制左右
三个值：第一个控制的上第二个控制的左右第三个控制的下
四个值：上右下左
单个方向的取值 padding-方位名称

padding-top
padding-bottom
padding-left
padding-right

需要注意的是行内元素里面不要写上下padding，左右可以

外边距margin

1.margin的取值方式和padding一样
2.margin的大小只会移动盒子的位置，并不会对盒子的大小造成影响（特殊情况例外）
3.行内元素也不要给上下的margin
4 auto 实现块级元素水平居中显示

margin: 0 auto;

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box{
           width: 100px;
           height: 100px;
           background-color: red;
           margin: 0 auto;
       }
    </style>
</head>
<body>
<div class="box">盒子水平居中</div>
</body>
</html>

使用auto前提条件：必须是块级元素同时必须有固定的width。
text-align和margin区别
两者都可以是实现水平居中
text-align是控制盒子内部的文字或者内部的行内块
margin:0 auto的不同前者控制的是盒子本身
实现清除内外边距

* { 
    padding: 0;
    margin: 0; 
}

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box1{
            width: 100px;
            height: 100px;
            background-color: red;
           margin-bottom: 50px;

        }
       .box2{
           width: 100px;
           height: 100px;
           background-color: green;
           margin-top: 50px;
       }
    </style>
</head>
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
</html>

image.png

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
       .box2{
           width: 100px;
           height: 50px;
           background-color: green;
           margin-top: 50px;
       }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2"></div>
</div>
</body>
</html>