盒子模型

作者: 蛋炒饭_By | 来源:发表于2018-01-29 17:49 被阅读20次

面试题（DAT）
【IMWeb秋招训练营】【Day1】面试题总结
CSS盒子模型
前端面试之HTML+CSS（八股文）
css基础问题
CSS盒模型概述
CSS 盒子模型
CSS
js笔记五十一之js盒子模型
笔记：两种盒子模型——ie 盒子模型和标准 w3c 盒子模型。

<pre>

div

div 可定义文档中的分区（division）。

div 标签可以把网页分割为独立的、不同的部分。

image

可以看成以下结构：

image

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

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

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

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

image

每个div可以看成一个盒子

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

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

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

padding：内边距。

border：边框。

margin：外边距。

image

元素宽高

<!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

边框

属性说明示例

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

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

元素默认样式

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

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

body标签的margin为8px

image

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

image

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

image

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

image

重置默认样式

为了兼容性，凡是浏览默认的样式，都不要使用。

重置默认样式 (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

<!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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左侧分类</title>
    <link href="reset.css" rel="stylesheet">
    <style type="text/css">

        .index-sort {
            border: 1px solid #dcdcdc;
            border-top: 0;
            background-color: #fff;
            width: 208px;
        }

        .cat-menu li {
            border-bottom: 1px dotted #dcdcdc;
            padding: 0 10px 0 26px;
        }

        .cat-menu li h2 {
            font-size: 14px;
            height: 30px;
            line-height: 30px;
            padding-left: 8px;
            /*background: url(../image/right_arrow.png) no-repeat right center;*/
        }

        .cat-menu li .min-sort {

            padding-bottom: 10px;
        }

        .cat-menu li .min-sort a {
            line-height: 22px;
            color: #696969;
            margin: 0 3px;
            height: 22px;
            /*display: inline-block;*/
            font-size: 12px;
        }

        .yl-all-index {
            padding: 10px;
            height: 20px;
            line-height: 20px;
            /*background: url(../image/right_arrow.png) no-repeat right center;*/
        }

        .yl-all-index a {
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="index-sort">
    <ul class="cat-menu sort-menu-bd">
        <li class="mainCate">
            <h2>
                经济管理

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">市场营销</a>
                <a href="" target="_blank">经济学理论</a>
                <a href="" target="_blank">国际贸易</a>
                <a href="" target="_blank">物流管理</a>
                <a href="" target="_blank">管理学原理</a>
                <a href="" target="_blank">财务管理</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                文学艺术

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">设计</a>
                <a href="" target="_blank">音乐</a>
                <a href="" target="_blank">青春文学</a>
                <a href="" target="_blank">绘画</a>
                <a href="" target="_blank">人物传记</a>
                <a href="" target="_blank">外国文学</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                人文社科

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">数学</a>
                <a href="" target="_blank">英语教材</a>
                <a href="" target="_blank">化学</a>
                <a href="" target="_blank">日语</a>
                <a href="" target="_blank">生物科学</a>
                <a href="" target="_blank">专业英语</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                科学技术

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">语言与编程</a>
                <a href="" target="_blank">电子通信</a>
                <a href="" target="_blank">电工电子</a>
                <a href="" target="_blank">数据库</a>
                <a href="" target="_blank">建筑工程</a>
                <a href="" target="_blank">土木工程</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                生活休闲

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">家庭保健</a>
                <a href="" target="_blank">美食烹饪</a>
                <a href="" target="_blank">导游必备</a>
                <a href="" target="_blank">地理学理论</a>
                <a href="" target="_blank">动漫卡通</a>
                <a href="" target="_blank">球类</a>
            </div>
        </li>
        <li class="mainCate">
            <h2>
                教育考试

            </h2>
            <div class="min-sort">
                <a href="" target="_blank">教学理论</a>
                <a href="" target="_blank">自考</a>
                <a href="" target="_blank">研究生考试</a>
                <a href="" target="_blank">考研英语</a>
                <a href="" target="_blank">公务员考试</a>
                <a href="" target="_blank">初高中用书</a>
            </div>
        </li>
    </ul>

    <h2 class="yl-all-index">
        <a href="" target="_blank">浏览所有图书分类</a>
    </h2>
    <div class="book-ad-first">
        <a href="" target="_blank"><img src="img/haoshu.jpg" alt="新书推荐"></a>
    </div>
</div>
</body>
</html>

元素分类

行级（内联）元素

块级元素

内联块元素

行级元素

strong

内嵌元素的特性：

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

2.内容撑开宽度

3.不支持宽高

4.不支持上下的margin

span

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

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

image

练习制作参考文献页面

image

<!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>

块级元素

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

display属性

控制元素的显示和隐藏

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

值说明

block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline 内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block 内联块元素

none 设置元素不会被显示

练习有路网顶部导航

image

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>顶部</title>
    <link href="reset.css" rel="stylesheet">
    <style type="text/css">
        .wrap {
            width: 1200px;
            margin: 0 auto;
        }
        .topBar {
            background-color: #f4f4f4;
            height: 29px;
            line-height: 29px;
            width: 100%
        }

        .topBar .topBarR {
            display: inline-block;
        }
        .topBar .topBarL {
            display: inline-block;
            margin-right:400px;
        }
        .topBar .topBarR li {
            display: inline-block;
        }
        .topBar .topBarR li a{
            line-height: 20px;
            padding: 0 8px;
            border-right: 1px solid #ddd;
        }

        .topBar .topBarR .login {
            color: #f51400
        }

        .topBarL span {
            font-size: 12px;
            color: #636363;
        }
        .topBar .topBarR .last a{
            border: none;
        }

    </style>
</head>
<body>
<div class="topBar">
    <div class="wrap">
        <div class="topBarL">
            <img src="img/welcome.jpg" alt="">
            <span>您好，欢迎光临有路网！</span>
        </div>
        <ul class="topBarR">
            <li>
                <a href="" class="login">请登陆</a>&nbsp;&nbsp;
                <a href="" class="regist-link">免费注册</a>
            </li>

            <li>
                   <a href="" target="_blank">我的有路</a><b></b>
            </li>

            <li>
                <a href="" target="_blank">我要开店</a>
            </li>

            <li>
                <a href="" target="_blank">团购批发</a>
            </li>

            <li>
                <a href="">客服服务</a><b></b>
            </li>

            <li><a href="" target="_blank" class="menu-btn">
                <img src="img/ico_phone.gif">手机有路</a>
            </li>

            <li  class="last">
                    <a href="" class="menu-btn">微信公众号</a>
            </li>
        </ul>

    </div>
</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

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /*默认样式重置(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;
        }
        img {
            border: none;
        }
        .pages {
            width: 600px;
            height: 60px;

            line-height:60px;
            background: #e8e8e8;
            margin: 90px auto;
            text-align: center;
        }
        .pages a {
            background: #fff;
            border: 1px solid #cdcdcd;
            color: #333333;
            padding: 0 8px 0 9px;
            /*height: 28px;*/
            line-height: 28px;/* line-height的值跟height的值一样，字体就会垂直居中 */
            display: inline-block;
        }
        .pages a:hover {
            border-color: red;
            color: red;
        }
        .pages .activied {
            font-weight: bold;
            background: #fcf9ea;
            cursor: text;
        }
        .pages .activied:hover {
            border-color: #cdcdcd;
            color: #333333;
        }
    </style></head><body>
<div class="pages">
    <a href="#">上一页</a>
    <a href="#" class="activied">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">...87</a>
    <a href="#">下一页</a>
</div></body></html>

课后作业

必做任务

1.制作图片商品列表（div标签，边距，填充）

2.注册窗口（ div标签，边距，填充）

扩展任务

1.制作家用电器分类（div的嵌套）

2.制作音乐列表（背景图像）

3.制作抽屉样式（div的隐藏）

面试题（DAT）
1.什么是盒子模型？盒子模型有两种，标准盒子模型和IE盒子模型。标准盒子模型：width = content + ...
【IMWeb秋招训练营】【Day1】面试题总结
1.什么是盒子模型？盒子模型有两种，标准盒子模型和IE盒子模型。标准盒子模型：width = content ...
CSS盒子模型
标准盒子模型 IE盒子模型区别在我看来标准盒子模型也就是： IE盒子模型：
前端面试之HTML+CSS（八股文）
1. 盒子模型，普通盒子模型和怪异盒子模型有什么区别？答：普通盒子模型又称标准W3C盒子模型，标准盒子模型的Wi...
css基础问题
介绍css的盒子模型 css的盒子模型有两种：IE盒子模型，W3C盒子模型盒子模型：内容(content),内边距...
CSS盒模型概述
盒子模型：盒子模型,又称框模型 (Box Model) 盒子模型主要的属性：width、height、paddi...
CSS 盒子模型
CSS盒子模型盒子模型边框 CSS盒子模型的宽度和高度 CSS模型的填充 CSS盒子模型的边界填充和边界的区别
CSS
1. 盒子模型 1.1 标准盒子模型标准盒子模型包括margin、border、padding、content，...
js笔记五十一之js盒子模型
js盒子模型 CSS盒子模型 ,margin - border - padding - content JS盒子...
笔记：两种盒子模型——ie 盒子模型和标准 w3c 盒子模型。
其实盒子模型有两种，分别是ie 盒子模型和标准 w3c 盒子模型。 W3C 盒子模型： W3C 盒子模型的范围包括...

盒子模型

div

元素宽高

边框

边框粗细

边框样式

border简写

外边距

外边距的妙用

内边距

盒子型模的尺寸

元素默认样式

重置默认样式

练习 有路网右侧黑板报

练习 有路网左侧图书分类

元素分类

行级元素

span

练习 制作参考文献页面

块级元素

块元素的特性

内联块元素—代表元素img

display属性

练习 有路网顶部导航

背景图像

项目实战 制作分页

课后作业

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

练习有路网右侧黑板报

练习有路网左侧图书分类

练习制作参考文献页面

练习有路网顶部导航

项目实战制作分页