CSS 盒子模型

最新推荐文章于 2021-03-03 02:48:36 发布

Water-Ghost

最新推荐文章于 2021-03-03 02:48:36 发布

阅读量181

点赞数

分类专栏： CSS 文章标签： CSS 盒子模型

本文链接：https://blog.csdn.net/qq_37767606/article/details/98493013

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

盒子 —— CSS 假定所有的HTML 文档元素都生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框，可以形象地将其看作是一个盒子。

组成 —— 内容区（content）、填充（padding）、边框（border）、空白边（margin）

1、CSS border：border-style、border-width、border-color

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
	<title>菜鸟教程(runoob.com)</title>
	<style>
            p
	    {
                border-top-style:double;
                border-right-style:dashed;
                border-bottom-style:dotted;
                border-left-style:solid;
                border-bottom-width:15px;
            }
	</style>
    </head>

    <body>
	<p>paragraph</p>
    </body>
</html>

border-style:dotted solid double dashed;
 /*上（点）、右（实线）、底（双实线）、左（虚线）*/
border-style:dotted solid double;
/*上、左右、底*/
border-style:dotted solid;
/*上底、左右*/
border-style:dotted;
/*all*/

border:5px solid red;
/*简写属性*/

2、CSS margin：

margin:25px 50px 75px 100px; 
/*上边距为25px、右边距为50px、下边距为75px、左边距为100px*/
margin:25px 50px 75px;
/*上、左右、下*/
margin:25px 50px;
/*上下、左右*/
margin:25px;
/*all*/

<style>
    p.bottommargin {margin-bottom:25%;}
    /*用百分比设置下边距*/
</style>

<body>
    <p class="bottommargin">这是一个指定下边距大小的段落。</p>
</body>

3、CSS padding：

padding:25px 50px 75px 100px;
/*上填充为25px、右填充为50px、下填充为75px、左填充为100px*/
padding:25px 50px 75px;
/*上、左右、下*/
padding:25px 50px;
/*上下、左右*/
padding:25px;
/*all*/

4、盒子的宽度和高度计算：

margin:20px;
border:10px;
padding:10px;
width:200px;
height:50px

$Width = width + padding\times2 + border\times 2 + margin\times 2$

$=200 + 10\times 2 + 10\times 2 + 20\times 2 = 280 px;$

$Height = height + padding\times2 + border\times 2 + margin\times 2$

$= 50 + 10\times 2 + 10\times 2 + 20\times 2 = 130 px;$

5、嵌套盒子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌套盒子</title>

    <style>
        .box1{
            background-color: gray;
            width:200px;
            height:200px;
            padding:30px 30px 30px 30px;
            margin: 50px;
        }
        .box2{
            background-color: white;
            /*inherit --- 继承父盒子的数值*/
            width:inherit ;
            height: inherit;
            border: 2px dashed gray;
        }
    </style>

</head>
<body>
    <div class="box1">
        <div class="box2">
            <p>子盒子继承父盒子的高度和宽度。</p>
        </div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .box1{    
                width:300px;
                height:300px;
                background-color: red;    
            }
            .box2{
                float:right;
                width: 200px;
                height:200px;
                background-color: orange;
            }
            .box3{
                width:100px;
                height:100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">    
                <div class="box3">
                </div>
            </div>    
        </div>        
    </body>
</html>

6、网页设计

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<style>
* {
    box-sizing: border-box;
}

/* body 样式 */
body {
    font-family: Arial;
    margin: 0;
}

/* 标题 */
.header {
    padding: 80px;
    text-align: center;
    background: #dac19c;
    color: white;
}

/* 标题字体加大 */
.header h1 {
    font-size: 40px;
}

/* 导航 */
.navbar {
    overflow: hidden;
    background-color: #da3;
}

/* 导航栏样式 */
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

/* 右侧链接*/
.navbar a.right {
    float: right;
}

/* 鼠标移动到链接的颜色 */
.navbar a:hover {
    background-color: #fff;
    color: #da3;
}

/* 列容器 */
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* 创建两个列 */
/* 边栏 */
.side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: rgb(250, 245, 221);
    padding: 20px;
}

/* 主要的内容区域 */
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: white;
    padding: 20px;
}

/* 测试图片 */
.fakeimg {
    background-color: rgb(252, 223, 196);
    width: 100%;
    padding: 20px;
}

/* 底部 */
.footer {
    padding: 20px;
    text-align: center;
    background: #dac19c;
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 700px 时, 让两栏上下堆叠显示 */
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}

/* 响应式布局 - 在屏幕设备宽度尺寸小于 400px 时, 让导航栏目上下堆叠显示 */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
</style>
</head>
<body>

<div class="header">
  <h1>PAGE LAYOUT TEMPLATE</h1>
  <p>a web not started using.</p>
</div>

<div class="navbar">
  <a href="#">HOME PAGE</a>
  <a href="#">LINK</a>
  <a href="#">LINK</a>
  <a href="#" class="right">LINK</a>
</div>

<div class="row">
  <div class="side">
      <h2>About websites:</h2>
      <h5>Picture introduction:</h5>
      <div class="fakeimg" style="height:200px;">Ready for a picture to be put.</div>
      <p>Text introduction</p>
      <h3>More content:</h3>
      <p>more information to show.</p>
      <div class="fakeimg" style="height:60px;">picture introduction1.</div><br>
      <div class="fakeimg" style="height:60px;">picture introduction2.</div><br>
      <div class="fakeimg" style="height:60px;">picture introduction3.</div>
  </div>
  <div class="main">
      <h2>Title</h2>
      <h5>Subtitle</h5>
      <div class="fakeimg" style="height:200px;">picture</div>
      <p>paragraph1.</p>
      <p>paragraph2.</p>
      <br>
      <h2>Title</h2>
      <h5>Subtitle</h5>
      <div class="fakeimg" style="height:200px;">picture</div>
      <p>paragraph1.</p>
      <p>paragraph2.</p>
  </div>
</div>

<div class="footer">
  <h2>Bottom Content</h2>
</div>

</body>
</html>