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: box-flex (弹性盒子模型)

CSS box-flex属性,然后弹性盒子模型简介 这个网站很牛B!! by zhangxinxu from http://www.zhangxinxu.com 本文地址:htt...

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

box-sizing属性作用:通过box-sizing属性,重新定义盒子模型with、height属性所包含的范围。box-sizing属性值:content-box:border和padding不计...

css盒子模型(3)

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

css3弹性盒子模型之box-flex(修正版一)

今天看到蓝色理想上面有一篇文章讲《css3弹性盒模型布局模块介绍》里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然没有引起自己的...

css3弹性盒子模型之box-flex

今天看到蓝色理想上面有一篇文章讲《css3弹性盒模型布局模块介绍》里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面也同样讲到flex box自适应布局,而上次竟然没有引起自己的...

css3盒子模型及其定位

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

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

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

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

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

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

HTML基础学习-20- div css容器 盒子模型学习2 <!-- float 浮动属性未设置浮动和 设置浮动元素紧邻的时候,未设置浮动会受到影响,应该将其设为clear清除浮动 clear ...

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

一个简单的盒子模型框架boxM.html BoxM <div
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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