<!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. Proxifier代理工具简介和下载

    Proxifier 是一款功能非常强大的socks5客户端,可以让不支持通过代理服务器工作的网络程序能通过HTTPS或SOCKS代理或代理链.支持64位系统,支持Xp,Vista,Win7,支持soc ...

  2. 华为4K机顶盒EC6108V9U从原联通更换为电信的IPTV账号成功经验

    4K设备直接在淘宝上买30块钱升级4K机顶盒,i视视手机app控制电视和手机投屏 硬件设备:EC6108V9U由X省联通更换为四川电信 采坑经验: 1.要从现有的机顶盒获取mac地址.stbid.ip ...

  3. 一个极其简易版的vue.js实现

    前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...

  4. Unity 3D入门简介

    最近在刚开始学习Unity 3D,在这里记录一下学习心得和学习笔记,边学边写,可能会比较零散.好了,废话不多说,今天从Unity 3D入门写起,主要简要介绍一下Unity 3D的和一些学习资料.以下如 ...

  5. USD词汇表(USD Glossary)

    这篇文章是在学习USD的过程中龟速写成的,目的是将USD的核心设计.相关概念的说明.以及配套API整理出来,为后续进行的USD开发工作提供中文资料支持. 实际上也只有充分理解了USD设计中的每一个知识 ...

  6. 为Owin项目增加WebApi

    上一篇文章我们新建了一个Owin项目. 本节,我们来为其增加WebApi功能 项目右键>添加>新搭建基架的项目 选择Web API 2控制器 为默认控制器命名 点击添加后项目结构如下: 将 ...

  7. Web高级 网站安全

    1. SQL注入 虽然现在SQL注入发生的情况总的来说越来越少,还是提二句.关于什么是SQL注入大家都知道就不多说了. 1.1 原理 我们在做前端页面的时候,少不了会又各种输入框,然后通过GET或者P ...

  8. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

  9. C# 利用Unity 实现IOC+AOP

    public interface INoticy { void Noticy(string msg); } public class SMSNoticy : INoticy { public void ...

  10. 20175236 2018-2019-2 《Java程序设计》第七周学习总结

    教材学习内容总结 String类 String类在java.lang包中的类被默认引入,因此程序可以直接使用String类 Java把String类定义为final类,因此用户不能扩展String类, ...