CSS布局(一) 盒子模型基础
一、盒子模型
标准盒子模型
从下图可以看到标准 w3c 盒子模型的范围包括 content、padding、border、margin,并且 content 部分不包含其他部分。
怪异盒子模型
从下图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content,和标准 w3c 盒子模型不同的是:ie 盒子模型的 content 部分包含了 border 和 pading。
例:一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,
假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px;盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;
假如用ie 盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px、高 20*2+50=70px,盒子的实际大小为:宽 200px、高 50px。
那应该选择哪中盒子模型呢?当然是“标准 w3c 盒子模型”了。怎么样才算是选择了“标准 w3c 盒子模型”呢?很简单,就是在网页的顶部加上 doctype 声明。假如不加 doctype 声明,那么各个浏览器会根据自己的行为去理解网页,即 ie 浏览器会采用 ie 盒子模型去解释你的盒子,而 ff 会采用标准 w3c 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,假如加上了 doctype 声明,那么所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。
<!doctype html>
<html>
<head>
<title>你用的盒子模型是标准w3c盒子模型</title>
<script language="javascript" src="jquery.min.js"></script>
var sbox = $.boxmodel ? "标准w3c":"ie";
document.write("您的页面目前支持:"+sbox+"盒子模型");
</script>
</head>
<body>
</body>
</html>
box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box。
content-box,border和padding不计算入width之内
padding-box,padding计算入width内
border-box,border和padding计算入width之内,其实就是怪异模式了~
<style type="text/css">
.content-box{
box-sizing:content-box;
-moz-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
-moz-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
-moz-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
二、组成盒子模型的标签类型
在CSS中,html中的标签元素大体被分为三种不同的类型:块级元素、行级元素和行内块元素。
常用的块级元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul> 设置display:block转换
特征:1.一个块级元素独占一行;
2.元素的高度、宽度、行高以及顶和底边距都可设置;
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常用的行级元素有:
<a>、<span> 设置display:inline转换
特征:1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
4、内联元素之间的间距问题:当行内元素之间有“回车”、“tab”、“空格”时就会出现间隙。解决方法:写在一行,之间不要有空格之类的符号。
常用的行内块元素有:
<img>、<input> 设置display:inline-block转换
特点:1、和其他元素都在一行上;(而块状元素是另起一行)
2、元素的高度、宽度、行高以及顶和底边距都可设置。
- ASP.Net MVC框架配置与分析
- MVC利用MvcHtmlString在后台生成HTML
- ExtJs学习笔记(7)_获取GridPanel选中行的详细信息
- ExtJs学习笔记(5)_Ajax示例
- shell脚本之特殊符号总结性梳理
- Centos6.X 下安装并使用VNC的操作记录
- Linux系统是否被植入木马的排查流程梳理
- 添加php的memcached扩展模块
- Android TextView中显示图片
- Nginx配置中的log_format用法梳理(设置详细的日志格式)
- 分享一个刷网页PV的python小脚本
- mysql完整备份时过滤掉某些库
- Jquery 结合Json控制Select下拉框
- ExtJs学习笔记(23)-ScriptTagProxy+XTemplate+WCF跨域取数据
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 关于安装LNMP集成包后上传图片报500错误的解决方法
- linux下SVN配置实现项目目录自动更新以及源码安装的操作方法
- linux安装redis和mysql的实例讲解
- tomcat服务器如何配置字符集为utf-8彻底解决中文乱码的问题详解
- Linux下Android开发环境搭建的操作方法
- liunx 时间函数与时间格式与字符串之间的转化方法
- 详解linux下的.net/mvc/cms程序结构
- Azure给ubuntu虚拟机挂载数据盘的详细步骤
- 详解SSH 远程执行任务的方法
- Linux基础学习之文件查找find的常见用法
- Linux基础之xargs命令的入门实例
- CentOS 7.4下安装Oracle 11.2.0.4数据库的方法
- CentOS桌面环境中网卡启动失败的解决方法
- 浅谈Linux vfork与fork简单对比分析
- Linux定时任务Crontab的使用方法