css盒子模型part3

原创 2015年11月18日 21:40:52

许久没有接触前端了,然而也并没有进行温习,许多便不再熟息,最近又重新接触,找了些资料,于是乎便将基础的东西 整理一下。

css就是设置网页的各个组成部分的表现形式。引入css的核心目的就是实现网页的结构内容和表现形式的分离,将原来html所承担的与结构无关的功能剥离出来。

而所谓的盒子模式,就是一种用来编排网页的一种排版方式。由于其出色且灵活的表现,可通过大小不一的盒子或者是盒子之间的嵌套来布局网页,使得网页更加的简洁,更加的方便,尤其是css3中的弹性盒子模型的出现,为网页带来了不一样的布局体验(ps,当然本人并没有接触过css3~~)。

关于盒子模型的基本属性:内容(content)、填充(padding)、边框(border)、边界(margin)。
(ps,从百度盗的图片 哈哈)
这里写图片描述

(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

盒子模型的border样式:

div{
    <!--边框-->
    border-width:2px;
    border-style:solid;
    border-color:red;
    <!--上下左右border-->
    <!--border-top,border-right,border-left-->
}
填充:
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

边界:

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

简单的盒子模型

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简单的盒子模型</title>
</head>
<style type="text/css">

    body {
        font-size: 12px;
        margin: 0px auto;
        height: auto;
        width: 805px;
        text-align: center;
    }
    .mainBox {
        border: 1px dashed #0099CC;
        margin: 3px;
        padding: 0px;
        float: left;
        height: 100px;
        width: 192px;
    }
    .mainBox h3 {
        float: left;
        height: 20px;
        width: 179px;
        color: #FFFFFF;
        padding: 6px 3px 3px 10px;
        background-color: red;
        font-size: 16px;
        text-align:center;
    }
    .mainBox p {
        line-height: 1.5em;
        text-align:center;
        margin: 35px 5px 5px 5px;
    }

</style>
</head>

<body>
<div class="mainBox">
    <h3>1.....</h3>
    <p>简单的css盒子模型</p>
</div>
<div class="mainBox">
    <h3>2.......</h3>
    <p>简单的css盒子模型</p>
</div>
<div class="mainBox">
    <h3>3......</h3>
    <p>简单的css盒子模型</p>
</div>

</body>
</html>

这里写图片描述

————–初学—-共勉!

版权声明:本文为博主原创文章,未经博主允许不得转载。

css3盒子模型及其定位

盒子模型常见相关属性和属性取值/*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...

理解CSS3新特性-弹性盒子模型

无奈真正关于HTML5和CSS3方面的东西真是少之又少,总是上各个论坛里去淘宝,不过新的东西在中文网上还是颇少,需要去一些外文网站上淘了,抑或是期待谁发现翻译过来! 这是CSS3的新特性,它为开发者...

HTML基础学习-20- div css容器 盒子模型学习3

HTML基础学习-20- div css容器 盒子模型学习2

(3)CSS样式——盒子模型

盒子模型概述盒子模型的内容范围包括:margin、border、padding、content 内边距padding1.在content外,边框内部 2.内边距属性 padding 设置所...

理解CSS3弹性盒子模型

2017四月 12 ...

CSS3:box-sizing:不再为盒子模型而烦恼

题外话:W3C奉行的标准,就是content-box,就是需要计算边框,填充还有内容的;但是就我个人而言, 比较喜欢的是传统IE6时候的怪异模式,不用考虑容器是否会被撑开(打乱布局);盒子模型差异盒...
  • bomess
  • bomess
  • 2015年08月19日 18:22
  • 1865

css3弹性盒子模型 flex与box 菜鸟学习笔记

记录一下学习弹性布局的学习笔记 弹性布局是未来的布局趋势 在移动端弹性布局可施展拳脚...
  • gjc9620
  • gjc9620
  • 2015年06月04日 09:23
  • 828

css基础学习(3)(盒子模型,动画)

一个简单的盒子模型框架boxM.html BoxM

css盒子模型(3)

盒子模型 版权声明 本文原创作者:蜗牛的博客作者博客地址:http://blog.csdn.net/yudiandemingzi      在讲理论之前,我们先要知道网页设计中常听的属性...

探究CSS3 box-sizing属性,重新定义盒子模型with、height尺寸

box-sizing属性作用:通过box-sizing属性,重新定义盒子模型with、height属性所包含的范围。box-sizing属性值:content-box:border和padding不计...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css盒子模型part3
举报原因:
原因补充:

(最多只允许输入30个字)