盒子模型

div

div 可定义文档中的分区（division）。
div 标签可以把网页分割为独立的、不同的部分。

image.png

可以看成以下结构：

image.png

<div> 不像 h1，p标签，没有任何默认样式，其主要作用是标识网页上的某块区域。常见做法是通过给div元素加上id或class

，然后通过css选中某个div，对其进行样式美化。

<div class="demo">我是一个div</div>

<style>
        .demo{
            color:red;
            font-size: 20px;
        }   
</style>
image.png

每个div可以看成一个盒子

一个盒子中主要的属性有5个：width、height、padding、border、margin。如下：

width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。盒子的宽度=内容宽度+padding+border

height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。盒子的高度=内容高度+padding+border

padding：内边距。

border：边框。

margin：外边距。


image.png

元素宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        div {
        width: 200px;
        height: 200px;
        background-color: gray;
    }    </style>
</head>
<body>
<div>我是一只小小鸟</div>
</body>
</html>
image.png

边框

属性 说明 示例
border-top-color 上边框颜色 border-top-color:#369;
border-right-color 右边框颜色 border-right-color:#369;
border-bottom-color 下边框颜色 border-bottom-color:#fae45b;
border-left-color 左边框颜色 border-left-color:#efcd56;

border-color 四个边框为同一颜色 border-color:#eeff34;
上、下边框颜色：#369
左、右边框颜色：#000
border-color:#369 #000;
上边框颜色：#369
左、右边框颜色：#000
下边框颜色：#f00
border-color:#369 #000 #f00;
上、右、下、左边框颜色：

#369、#000、#f00、#00f

border-color:#369 #000 #f00 #00f;

边框粗细

border-width:像素值

        order-top-width:5px;
        border-right-width:10px;
        border-bottom-width:8px;
        border-left-width:22px;
        border-width:5px ;
        border-width:20px 2px;
        border-width:5px 1px 6px;
        border-width:1px 3px 5px 2px;

边框样式

none
hidden
dotted
dashed
solid
double

        border-top-style:solid;
        border-right-style:solid;
        border-bottom-style:solid;
        border-left-style:solid;
        border-style:solid ;
        border-style:solid dotted;
        border-style:solid dotted dashed;
        border-style:solid dotted dashed double;

border简写

同时设置边框的颜色、粗细和样式

       border-bottom: 9px #F00 dashed ;
        border: 9px #F00 dashed ;

外边距

  margin-top
    margin-right
    margin-bottom
    margin-left
    margin

          margin-top: 1px 
            margin-right : 2 px 
            margin-bottom : 2 px 
            margin-left : 1 px 
            margin : 3 px 5 px 7 px 4 px;
            margin: 3px 5px;
            margin: 3px 5px 7px;
            margin: 8px;

外边距的妙用

网页居中对齐
前提，居中对齐的网页元素必须设定宽度。

margin:0px  auto;

内边距

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

padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;

盒子型模的尺寸

image.png

盒子模型总尺寸=border-width+padding+margin+内容宽度

元素默认样式

很多标签都有自己的默认样式

我们在chrome浏览器中运行时，可以通过开发者工具(快捷键Ctrl+Shift+I)来一个个审查元素，来看看它们的默认样式
body标签的margin为8px


image.png

p标签的上下外边距为16px


image.png

h1标签的上下外边距为21.440px


image.png

ul标签的上下外边距也为16px，左内边距也为40px


image.png

重置默认样式

为了兼容性，凡是浏览默认的样式，都不要使用。
重置默认样式 (css reset)

        /*默认样式重置(css reset)*/
        body, p, h1, h2, h3, h4, h5, h6, dl, dd {
            margin: 0;
            font-size: 12px; /* 中文字体大小的最小值 */
        }

        ol, ul {
            list-style: none; /* 去除列表样式 */
            padding: 0;
            margin: 0;
        }

        a {
            text-decoration: none;
        }

练习 有路网右侧黑板报

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">

    <style>
        .black-board{
            width: 220px;
        }

        .black-board h2{
            font-size: 18px;
            padding-top: 6px;
            /*border: 1px solid red;*/
            padding-bottom: 6px;
        }

        .black-board a{
            color: black;
            line-height: 22px;
        }

        .black-board a:hover{
            color: orange;
            text-decoration: underline;
        }
        .black-board ul{
            padding-left: 22px;
            padding-bottom: 6px;
        }
        .black-board .report
        {
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
            padding-left: 10px;
        }
        .black-board .shopping{
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
            padding-left: 10px;
            margin-bottom: 10px;
        }


    </style>
</head>
<body>
<div class="black-board">
    <div class="report">
        <h2>黑板报</h2>
        <ul>
            <li><a href="#">双十一积分兑好礼</a></li>
            <li><a href="#">双十一积分兑好礼</a></li>
            <li><a href="#">双十一积分兑好礼</a></li>
            <li><a href="#">双十一积分兑好礼</a></li>
        </ul>
    </div>
    <div class="shopping">
        <h2>购物指南</h2>
        <ul>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
            <li><a href="#">支付宝担保交易，安全快捷</a></li>
        </ul>
    </div>
    <div class="ads">
        <img src="zhinan.jpg">
    </div>
</div>
</body>
</html>

练习 有路网左侧图书分类

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .book-info
        {
            width: 210px;
        }
        .book-info li
        {
            border-bottom: 1px solid gray;
            border-right: 1px solid gray;
            padding-left: 30px;
            padding-right: 18px;
            padding-bottom: 10px;

        }
        .book-info h2
        {
            font-size: 14px;
            padding-left: 4px;
            padding-top: 6px;
            margin-bottom: 4px;
        }
        .book-info a{
            line-height: 24px;
            color: #666666;
        }
        .book-info a:hover{
            text-decoration: underline;
        }
        .book-browse h3
        {
            border-right: 1px solid gray;
            font-size: 14px;
            font-weight: bold;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 8px;
        }
        .book-info h3 a:hover{
            color: orange;
        }
    </style>
</head>
<body>
<div class="book-info">
    <div class="book-category">
        <ul>
            <li>
                <h2>经济管理</h2>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
            </li>
            <li>
                <h2>经济管理</h2>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
            </li>
            <li>
                <h2>经济管理</h2>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
            </li>
            <li>
                <h2>经济管理</h2>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
            </li>
            <li>
                <h2>经济管理</h2>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
            </li>
            <li>
                <h2>经济管理</h2>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
                <a href="#">市场营销</a>
            </li>
        </ul>
    </div>
    <div class="book-browse">
        <h3><a href="#">浏览所有图书分类</a></h3>
    </div>
    <div class="book-ads">
        <a href="#"><img src="haoshu.jpg"></a>
    </div>
</div>
</body>
</html>

元素分类

行级（内联）元素
块级元素
内联块元素

行级元素

a
strong
em

内嵌元素的特性：

1.默认同行可以继续跟同类型标签

2.内容撑开宽度

3.不支持宽高
4.不支持上下的margin

span

span是一个特殊的行级标签，和div（块级标签）一样，没有任何语义（样式）。

通常用来着重显示某行文字中的某个单词

image.png

练习 制作参考文献页面

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作参考文献</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
</head>
<body>
<h3>参考文献</h3>
<p>
    [1]<span>顾天晓.</span> Java程序动态更新技术研究[D].南京大学,2017.
</p>
<p>
    [2]<span>陆鹿,严立龙,李秋环,曾璐,金鑫,张玉修,侯泉林,张开均.</span>洋底高原及其对地球系统意义研究综述[J].岩

石学报,2016,32(06):1851-1876.
</p>
<p>
    [3]<span>黄玉坤,陈榕,裴喜龙,曹璟.</span>基于跨语言对象迁移策略的复合本地对象模型[J].计算机研究与发

展,2015,52(01):141-155.
</p>
<p>
    [4]<span>李数函.</span> 基于GP规范的JAVA智能卡操作系统研究[D].电子科技大学,2014.
</p>
<p>
    [5]<span>胡光.</span> 硬Java实时嵌入式平台及其关键技术研究[D].复旦大学,2012.
</p>
<p>
    [6]<span>邱江.</span> 十七世纪至十九世纪初爪哇农业地理初探（1602-1816）[D].暨南大学,2011.
</p>
<p>
    [7]<span>杨克峤.</span> Java程序优化与数据竞争检测的研究[D].复旦大学,2010.
</p>
<p>
    [8]<span>邓洋春.</span> Java虚拟机关键机制研究与实践[D].中南大学,2009.
</p>
<p>
    [9]<span>董威.</span> 多应用智能卡新技术研究[D].北京邮电大学,2008.
</p>
<p>
    [10]<span>王会进,龙舜.</span>Java性能优化技术综述[J].小型微型计算机系统,2008(04):720-725.
</p>
</body>
</html>

块级元素

p
div
h1~h6
ol-li
ul-li
dl-dt-dd

块元素的特性

1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令

内联块元素—代表元素img

inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        
        img {
        width: 300px;
        height: 200px;
        }    
    </style>
</head>
<body>
<img src="img/1.jpg">
<img src="img/2.jpg">
</body>
</html>
image.png

display属性

控制元素的显示和隐藏

块级元素与行级元素的转变

值 说明
block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block 内联块元素
none 设置元素不会被显示

练习 有路网顶部导航

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        .nav{
            height: 30px;
            line-height: 30px;
            background-color: #F4F4F4;
        }
        .nav .welcome{
            padding-left: 120px;
            margin-right:416px;
        }

        .nav li{
            display: inline-block;
            /*border: 1px solid blue;*/

        }
        .nav li a{
            /*border: 1px solid red;*/
            color: black;
            padding: 0px 12px;
            border-right: 1px solid gray;
        }
        .nav li a:hover{
            color: orange;
            text-decoration: underline;
        }
        .nav .red
        {
            color: red;
        }
        .nav .last
        {
            border-right: 0px solid gray;
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li class="welcome">
            <img src="welcome.jpg">
            您好，欢迎光临有路网！
        </li>
        <li><a href="#" class="red">我的有路</a></li>
        <li><a href="#">我的有路</a></li>
        <li><a href="#">我的有路</a></li>
        <li><a href="#">我的有路</a></li>
        <li><a href="#">我的有路</a></li>
        <li><a href="#">我的有路</a></li>
        <li>
            <a href="#">
                <img src="ico_phone.gif">
                我的有路
            </a>
        </li>
        <li><a href="#" class="last">我的有路</a></li>
    </ul>
</div>
</body>
</html>

背景图像

背景图像

background-image属性
background-image:url(图片路径);

背景重复方式
background-repeat属性

repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺

背景定位

background-position属性

Xpos Ypos
单位：px
Xpos表示水平位置，Ypos表示垂直位置

X% Y%
使用百分比表示背景的位置

X、Y方向关键词
水平方向的关键词：left、center、right
垂直方向的关键词：top、center、bottom

项目实战 制作分页

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="reset.css" rel="stylesheet">
    <style>
        .page{
            width: 600px;
            height: 60px;
            background-color: #E8E8E8;
            margin: 0 auto;
            margin-top: 90px;
            line-height: 60px;
            text-align: center;
        }
        .page li{
            display: inline-block;

        }
        .page li a{
            border: 1px solid gray;
            color: black;
            padding: 6px 8px;
            background-color: white;
        }
        .page li a:hover{
            border: 1px solid red;
            color: red;

        }
        .page .active{
            background-color: #FCF9EA;
            cursor: text;
            font-weight: bold;

        }
        .page .active:hover
        {
            border: 1px solid gray;
            color: black;
        }
    </style>
</head>
<body>
<div class="page">
    <ul>
        <li><a href="#">上一页</a></li>
        <li><a href="#" class="active">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">...87</a></li>
        <li><a href="#">下一页</a></li>
    </ul>
</div>
</body>
</html>

课后作业

必做任务
1.制作图片商品列表（div标签，边距，填充）
2.注册窗口（ div标签，边距，填充）

扩展任务
1.制作家用电器分类（div的嵌套）
2.制作音乐列表（背景图像）
3.制作抽屉样式（div的隐藏）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350