<!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. SourceInsight宏插件3(非常好用，强力推荐)

    openfolder.em源码:(链接:https://pan.baidu.com/s/1draaimWzCHZ3vLxL--lfiQ  提取码:zyq4) //使用资源管理器打开当前文件所在文件夹, ...

  2. pandas第一课

    pandas第一课 首先是数据的准备 movies.dat user.dat ratings.dat 注意,这些数据都是通过::来隔开每一列的,每一列有各自的含义 现在通过pandas来读入数据 首先 ...

  3. Win10系统下Anaconda下安装多种Python函数库

    建议直接安装Anaconda,这是一个包含Numpy,Pandas,Sklearn等函数库的计算机科学软件包,下面的软件可以在此环境下进行安装下载. 一.计算机视觉 1. OpenCV图像处理 在ht ...

  4. JavaScript 集合对象

    1. 集合对象 1.1 Object 关于Object类型的创建和底层存储原理我在另一篇文章有说明: JavaScript 对象属性底层原理 我们知道了大多数情况下Object底层都是Hash结构,我 ...

  5. oracle函数操作

    感于总有些网友提出一些非常基础的问题,比如有没有实现某某功能的函数啊,某某函数是做什么用的啊,格式是什么等等,同时也感受到自己对oracle函数认识的不足,于是集中月余时间专注于oracle函数,小有 ...

  6. 搭建Mock Server

    1.为什么要搭建mock-server? 为了更好的分工合作,让前端能在不依赖后端环境的情况下进行开发,其中一种手段就是为前端开发者提供一个 web 容器,这个本地环境就是 mock-server. ...

  7. linux日志logger命令详解

    通过logger命令记录日志 logger是一个shell命令接口,可以通过该接口使用Syslog的系统日志模块,还可以从命令行直接向系统日志文件写入一行信息. ------------------- ...

  8. Vue公司项目实战步骤

    一.无权限,无验证的Vue项目 1.打好HTML+CSS+JS基础,及<Vue 2.0 实战> 2.编写用mock设计的案例: 3.将以上案例的后台用C#改写: 二.带安全验证的Vue项目 ...

  9. Delphi 7启动后提示Unable to rename delphi32.dro的解决办法

    在Win10 64 上安装完Delphi 7,每次打开报错: Unable to rename 'C:\Program Files (x86)\Borland\Delphi7\Bin\delphi32 ...

  10. Android给控件添加默认点击效果

    Android控件点击效果 Android中Button控件是有点击效果的,但是像TextView.ImageView.各种Layout是没有点击效果的,给TextView设置点击事件后,加个点击效果 ...