<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

    <style type="text/css">

        .box1{

            width: 600px;

            height:250px;

            border-top:10px dashed blue;

            border-right: 5px solid red;

            border-bottom: 15px dotted gray;

            border-left: 5px solid red;

        }

    </style>

<body>

    <div class="box1">

    </div>

</body>

</html>

3.在上题插入的盒子中放入素材中提供的“《网页设计和制作》课程介绍”文字内容，并设置盒 子的上下内边距为 50 像素，左右内边距为 30 像素，请对盒子相关属性进行适当设置，使得盒子的大小不变。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>盒子大小保持不变</title>

</head>

    <style type="text/css">

        .box1{

            width: 540px ;

            height:150px ;

            border-top:10px dashed blue;

            border-right: 5px solid red;

            border-bottom: 15px dotted gray;

            border-left: 5px solid red;

            padding: 50px 30px 50px 30px;/*上右左下*/

            /*

            上下内填充都为50px，加起来一共100px，height减去100px

            左右内填充都为30px，加起来一共60px，width减去60px

            */

        }

    </style>

<body>

    <div class="box1">《网站开发与管理》课程是计算机应用技术、电子商务等专业的一门核心课程，也是其他计算机专业的普及型课程，它涵盖了HTML设计、Dreamweaver、CSS等相关知识，全面介绍WEB站点设计的基本操作技巧和使用技巧。通过本课程的学习，使学生掌握HTML语言语法规则及文字、超链接、表格、表单、图像、多媒体、框架元素标记及属性，能设计出多窗口网页、动态网页；能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能。

    </div>

</body>

</html>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>上下盒子间隔</title>

</head>

    <style type="text/css">

        .box1{

            width:100px;

            height:100px;

            background: red;

            border:5px solid black;

            margin-bottom: 50px;/*下外填充为50px*/

        }

        .box2{

            width:100px;

            height:100px;

            border:5px black solid;

            background: blue;

            margin-top: 10px;/*上外填充为10px*/

            /*上下盒子分开，间隔大小取外填充的最大值*/

        }

    </style>

<body>

    <div class="box1">box1

    </div>

    <div class="box2">box2

    </div>

</body>

</html>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>左右间隔和内联元素</title>

</head>

    <style type="text/css">

        div{/*转化为内联元素(左右)*/

            display: inline;

        }

        .box1{

            width:100px;

            height:100px;

            background: red;

            border:5px solid black;

            margin-right: 0px;

        }

        .box2{

            width:100px;

            height:100px;

            border:5px black solid;

            background: blue;

            margin-left:50px;

            /*左右外填充相加 0px+50px = 25px+25px*/

        }

    </style>

<body>

<div class="box1">box1

    </div>

    <div class="box2">box2

    </div>

</body>

</html>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>盒子嵌套/盒子模型</title>

</head>

    <style type="text/css">

        .box1{

            width:200px;

            height:300px;

            background: red;

            border:5px solid black;

            padding-top: 50px;

        }

        .box2{

            width:100px;

            height:100px;

            border:5px black solid;

            background: blue;

        }

    </style>

<body>

    <div class="box1">box1

        <div class="box2">box2

        </div>

    </div>

    <!-->子盒子嵌套在父盒子里 <-->

</body>

</html>

元素分类：在html标签内，标签元素大致被分为三种类型

块级元素：<div>,<p>,<h1>...<h6>,<ol>,<ul>,<dl>,<table>,<adress>,<blockquote>,<form>

（1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。

（2）元素的高度、宽度、行高以及顶和底边距都可设置。

（3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素(行内元素)：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>

(1)和其他元素都在一行上

(2)元素的高度、宽度及顶部和底部边距不可设置；

(3)元素的宽度就是它包含的文字或图片的宽度，不可改变。

内联块状元素：<img>,<input> 同时拥有块级元素和内联元素的特点。

(1)和其他元素都在一行上；

(2)元素的高度、宽度、行高以及顶和底边距都可设置。

元素类型转化：

转化为块状元素。a{display:block;}

转换为内联元素。p{display:inline;}

转化为内联块状元素：

a{

    display:inline-block;

    width:270px;/*在默认情况下宽度不起作用*/

    height:20px;/*在默认情况下高度不起作用*/

    background:pink;/*设置背景颜色为粉色*/

    text-align:center; /*设置文本居中显示*/

}

CSS初识盒子的更多相关文章

  1. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

  2. 前端之CSS初识

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  3. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  4. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  5. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  6. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  7. 认识CSS中盒子模型

    前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...

  8. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  9. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

随机推荐

  1. 位（bit）、字节（byte）、字符、编码之间的关系

    1.位: 数据存储的最小单位.每个二进制数字0或者1就是1个位: 2.字节: 8个位构成一个字节:即:1 byte (字节)= 8 bit(位): 1 KB = 1024 B(字节): 1 MB = ...

  2. 百度短信API开发

    由于楼主学的是C#,所以目前做的百度短信API是C#版的,废话不说了,直接上代码. public void PostData() { string url = "http://sms.bj. ...

  3. Creating Excel files with Python and XlsxWriter（通过 Python和XlsxWriter来创建Excel文件（xlsx格式））

    以下所有内容翻译至: https://xlsxwriter.readthedocs.io/ #----------------------------------------------------- ...

  4. Plickers——教师拿手机、学生拿卡片，就可以完成即时全员互动！

    全员互动.立刻反馈.无设备添加.无能耗增加,风靡全球教育界,杭州师范大学硕士生导师杨俊锋教授推荐!老师拿手机,学生拿卡片就可以完成!      操作方法:      1.注册:登录www.plicke ...

  5. 更新 TeX Live 软件包

    这个 TeX Live 软件,你得时常更新一下,不然会遇到一些由软件包自身 Bug 导致的编译问题.比如,这次我使用 Beamer 软件包写演示文稿,就遇到问题了,结果发现是软件包自身存在的问题.安装 ...

  6. JS语法基础

    js声明 <!--在head标签中使用script标签进行js代码域声明--> <script type="text/javascript" language=& ...

  7. 使用powerpoint的表对象

    以下为basic范例,delphi使用需要加以修改 Table 对象 代表幻灯片上的表格形状.Table 对象是 Shapes 集合的成员.Table 对象包含 Columns 集合和 Rows 集合 ...

  8. 尝试 Markdown 写测试用例

    我的原帖https://testerhome.com/topics/9412 大家都知道我们社区的帖子提倡用Markdown格式编写,正好项目进入稳定期,尝试用Markdown写下测试用例.有几个目的 ...

  9. rocketmq （一）运行原理以及使用问题

    使用消息中间件可以解决高并发,那是因为消息中间件可以将消息缓存到队列之中. 但是 当消息 过多的时候,几万,几十万...消息中间件也可能会宕机,所以我们可以对消息中间件进行集群,在之前的activem ...

  10. css 优化

    // 注: 以下内容大量借阅自<<Webkit技术内幕>>--朱永盛(14年出版的) , 很多内容可能早已更新 , 因此个人并不能确定论述是否正确.部分摘录内容有删减 , 目录 ...