<!DOCTYPE html>
CSS3-盒模型

盒模型属性：
width 宽度
height 高度
margin 外边距
border 边框
padding 内边距
.test{width:200px; height:100px; margin:20px; padding:15px; border:5px solid #f00;}

标准模式，HTML头带文档类型声明：<!DOCTYPE html>
元素实际宽度=width + padding-left + padding-right + border-left-width + border-right-width
元素实际高度=heigth + padding-top +padding-bottom + border-top-width + border-bottom-width
混杂（怪异）模式：文档类型声明没有或不正确，盒模型解析不同，容易出错

块级元素盒模型，自动换行，5大属性完整
行内元素盒模型，不换行，没有宽、高属性，只有左右外边距、边框、内边距，没有上下。

<style>
div,span{
background:#f00;

width:200px; /*宽度*/
height:100px; /*高度*/
margin:50px; /*外边距*/
padding:50px; /*内边距*/
border:20px solid #f0f; /*边框*/
}

/*四面单独设置*/
div{
margin-top:50px; /*上外边距*/
margin-right:100px; /*右外边距*/
margin-bottom:150px; /*下外边距*/
margin-left:200px; /*左外边距*/

padding-top:50px; /*上内边距*/
padding-right:100px; /*右内边距*/
padding-bottom:150px; /*下内边距*/
padding-left:200px; /*左内边距*/

border-top:50px solid #0f0; /*上边框*/
border-right:100px solid #00f; /*右边框*/
border-bottom:150px solid #ff0; /*下边框*/
border-left:200px solid #0ff; /*左边框*/

/*margin padding border简写*/
margin:5px 10px 20px 150px; /*上右下左*/
margin:50px 100px; /*上下 左右*/
margin:50px; /*四面*/
}
</style>
aaaa aaa aaaa aaaaa aaaaaaa aaaaaa aaaa aaa
aaaa aaa aaaa aaaaa aaaaaaa aaaaaa aaaa aaa
<div>dddddd</div>
aaaa aaaa aaaaa aaa aaaaa aaaaaa aaaaaa aaaa
aaaa aaaa aaaaa aaa aaaaa aaaaaa aaaaaa aaaa
<div>dddddd2</div>
aaaa aaaaa aaaaaaa aaa aaa aaa aaa aaa aaa aa
aaaa aaaaa aaaaaaa aaa aaa aaa aaa aaa aaa aa
<span>sssssssss</span>
aaaa aa aa
<span>sssssssss2</span>
aaaaa aaaaaa aaaaaa aaaaaa aaaaa aaaaa aaaa
aaaaa aaaaaa aaaaaa aaaaaa aaaaa aaaaa aaaa

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

css-盒模型的更多相关文章

  1. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  2. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  3. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  4. 第 16 章 CSS 盒模型[上]

    学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 C ...

  5. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  6. [k]css盒模型

    box-sizing :  content-box || border-box || inherit 1.content-box:此值为其默认值.元素的宽度/高度(width/height)等于元素边 ...

  7. 尖刀出鞘的display常用属性及css盒模型深入研究

    一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

  8. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  9. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  10. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

随机推荐

  1. 使用Fiddler抓取手机上的数据包

    在IIS中,如果网站已经绑定了域名在使用IP是不能访问的,需要添加一个空的主机名与IP的映射才能访问.如下图: Fiddler抓取手机包 在PC上建一个WIFI热的 勾选Fiddler中Tool-&g ...

  2. 激光推送SSL问题

    1.导出极光推送服务器上的证书,导出后文件扩展名是.cer.  下载极光推送服务器上的证书 2.利用极光推送服务器的证书文件,创建客户端密钥库,密钥库的文件扩展名是.jks Dos command: ...

  3. 修饰器模式（day04）

    修饰器设计模式 --最近我给女朋友买了一款可以更换外壳的手机.现在的外壳是红色的,假如我想用这款手机的时候,会更换成银灰色的外壳.但是我不能随意更换天线或者话筒,因为这些功能模块在手机生产的时候就已经 ...

  4. winPcap_6_不用回调方法捕获数据包

    用 pcap_next_ex() 函数代替 _5_ 中的 pcap_loop()函数: pcap_loop()函数是基于回调的原理来进行数据捕获,这是一种精妙的方法,并且在某些场合中,它是一种很好的选 ...

  5. Creating a settings table that can handle almost any type of value

    Update: Updated article here. Today I wanted to be able to have a table store any type of value as a ...

  6. 学习ReactNative笔记整理一___JavaScript基础

    学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNa ...

  7. 在win7与XP系统下 C#缺省路径不同

    当我们加载文件时,若只输入文件名,在WIN7下默认是主程序所在文件夹路径 在XP下是上次本程序游览的有效路径 所以以后程序中尽量避免只传文件名

  8. 转：PHP分页技术的代码和示例

    本文来自:10 Helpful PHP Pagination Scripts For Web Developers 分页是目前在显示大量结果时所采用的最好的方式.有了下面这些代码的帮助,开发人员可以在 ...

  9. 关闭ssh密码登录

    我们经常使用SSH登录管理服务器,在享受便利的同时也会遇到一些安全隐患,最常见的就是SSH密码被暴力破解.如果我们将SSH密码设置的过于复杂,又不容易记,因此限制SSH登录方式,只能使用key登录是一 ...

  10. 六款主流免费网络嗅探软件wireshark,tcpdump,dsniff,Ettercap,NetStumbler

    1.WireShark WireShark是一个开源免费的高性能网络协议分析软件,它的前身就是非常著名的网络分析软 件Ethereal.你可以使用它来解决网络疑难问题,进行网络协议分析,以及作为软件或 ...