CSS彻底研究(2)
Github pages 博文
一 . CSS盒模型
1.盒子的结构
margin-border-padding结构 + 内容content 组成盒模型
注意
- width,height 取的是content区域的宽高,不包括padding border margin,但是盒子实际所占高度要算上外面三个(padding border margin)
- 赋值顺序,顺时针,上(top)->右(right)->下(bottom)->左(left)
----top(1)----->|
| |
left(4) right(2)
| |
<---bottom(3)----
赋值,一个值,四个值都是这个,如margin : 10px;
赋值,两个值,两个值赋给 top right,也就是前两个,然后,bottom = top , left = right
赋值,三个值,分别赋值给 top right bottom,也就是前三个,然后left = right
赋值,四个值,不用多说了...
3. 在各浏览器中的表示
html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在浏览器开发人员工具中的表示</title>
<style>
body
{
margin: 0;
background-color: cyan;
}
#test-div
{
padding: 10px;
border: 5px dotted yellow;
margin: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="test-div">
内部文字
</div>
</body>
</html>
chrome
偏红的margin
偏xx色的border(啥颜色,叫不出来)
偏青色的padding
偏蓝色的content
IE10,win8.1浏览器
offset,见stackoverflow问题,说是用relative absolute改变之后的偏移,同chrome里的position
2.border
border : width(2px) color(green) style(dotted/dashed)
border-width/color/style 设置某一属性
border-left : width color style 设置一边的属性
结合起来可以border-left-style : dotted;
边框与背景
对于IE,background = content + padding
对于FF,background = content + padding + border
小的差距,要注意
3.padding 与 margin
赋值规则,上面说了,总结起来就是:
从top开始,顺时针,将N个值赋给前N个,其他的依据top-bottom left-right配对拷贝这个原则即可,对于一个值得,表示四个全都一样
body特殊的盒子,在默认的情况下,body会有若干px的margin,而且body的background会扩展到margin部分,也就是紧贴着浏览器,background-image 和 background-color都会这样,其他的盒子background最多也就是到border(FF下).
二 . 标准文档流
1.简称标准流
指在不使用其他的与排列、定位相关的特殊CSS规则时各种元素的排列规则。
- 块级元素block,典型的有div ul li
总是以一个块的形式表现出来,并且跟同级的兄弟块之间,依次竖直排列,左右撑满。 - 行内元素inline,典型的有span a标签 标签。
横向排列,最右端自动折行
div能包含span样式,反之而不能,即span不能包含div。
2.块间距
- 行内元素的水平间距
间距 = 左侧元素的margin-right + 右侧元素的margin-left - 块级元素的竖直间距
竖直间距 = max(上面元素的margin-bottom , 下面元素的margin-top)
这个就是所谓的塌陷原则,小的margin塌陷到大的margin里面去了 - 嵌套div的margin
子div的margin放在父div的content区域,合理的理想情况 - margin设置为负值
margin其实是border 距离外边界的距离,将margin-left 设置为 -50px;盒子整体左移50px;
CSS彻底研究(2)的更多相关文章
- CSS深入研究:display的恐怖故事解密(2) - table-cell
上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用 ...
- CSS深入研究:display的恐怖故事解密(2) - table-cell(转)
http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html 上集<CSS深入研究:display的恐怖故事解密(1) - ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- css定位研究
css的定位是很重要的一个知识点,要学会网页布局,一定要先把定位弄清楚,今天抽空整理一下这方面的知识. 1.块级元素和行内元素(内联元素) 块级元素:display值为block的元素就是块级元素,比 ...
- CSS导航的魔力——源自温谦老师《CSS彻底研究设计》
web标准出台以后,非常注重的一个标准就是希望内容与样式分离.希望HTML就干HTML该干的事.但是有的时候我们为了美观必须多多少少改动HTML 代码.下面介绍几个导航栏. ...
- CSS彻底研究(1)
Github pages 博文 基本选择器 标记选择器h1 {...} 类别.class_name{...},两个class同时作用,如class = 'one two',冲突取前者 ID选择器 #i ...
- CSS currentColor研究
刚刚写了篇<CSS变量试玩儿>,我们了解到可以使用原生的CSS来定义使用变量,简化CSS书写.优化代码的组织与维护,但可怕的兼容性问题,又让我们望而却步.一笑了之. 但是有这么一个CSS变 ...
- 对浏览器如何计算CSS的研究---------------引用
1. 加载CSS 在构建DOM的过程中,如果遇到link的标签,当把它插到DOM里面之后,就会触发资源加载——根据href指明的链接: 上面的rel指明了它是一个样式文件.这个加载是异步,不会影响DO ...
- 响应式疑惑? CSS单位研究
各种单位要搞清楚,自己试一试,实践出真知! 2.屏幕分辨率 响应式 哦,电脑的分辨率:1440x900表示水平有1440个像素点哦! 垂直有900个像素点. 而网页在浏览器中,所以宽度是电脑的分 ...
随机推荐
- sqlite创建数据库问题
1.<Sqlite权威指南>上说是这么创建数据库的: sqlite3 test.db 但是我写了这条语句之后出现了下面的情况(注:安装Sqlite过程见 ...) 我的sqlite3放在 ...
- VS2010 ReportViewer导出文件下载保存不能识别文件类型
今天测试项目时,突然发现导出报表下载保存的保存,不能识别文件的类型,文件名称为:.xls[3] 检查代码发现在指定报表路径时多了一个方法: ReportViewer1.LocalReport.Load ...
- AndroidAnnotations框架配置
如今Android Studio的普及,Android开发基本要舍弃Eclipse了,最近使用AndroidAnnotations 注解框架的时候,找了些资料慢慢整出来了,在这给大家简单分享一下: 首 ...
- 选中CheckBoxList的值放到TextBox中,再次选中从textBox中删除
当选中checkboxlist中的值,直接放到文本框中,在checkboxlist的SelectedIndexChanged事件下执行方法, //将选中的值放到文本框中 ...
- windows中java读目录空格变成%20 处理方法
URL url = Thread.currentThread().getContextClassLoader().getResource(""); String path = ur ...
- hdfs-over-ftp安装与配置
hdfs-over-ftp是一个开源,简单易用的实现了对HDFS系统的下载和上传功能的小工具.可以作为管理工具来使用,快捷方便. 1 安装jdk(1.6以上版本)并配置环境变量分别执行java -ve ...
- 初识CLR
眨眼间我已经实习了半年时间并且转正了,身份也正式从一个学生转变为一个职场人,这个博客自从开始实习以来就一直没有更新过= =没错,就是我懒癌晚期,不过不行!一切都要开始走向正轨,此博会继续见证我的成长, ...
- Android-1
@String 支持多语言 layout中的text文本中String都尽量定义在String.xml中,便于多语言管理. <resources> <string name=&quo ...
- URL传值中文乱码
url含有中文 先encodeURI(url)编码 获取之后再解码decodeURI //加密 var param = "itname=" + slRows.ITNAME + &q ...
- 配置wamp环境使得在命令行下也能执行socket扩展
首先在apache中开启socket扩展 php环境安装目录\bin\apache\apache2.2.17\bin\php.ini 去掉前面的';' extension=php_sockets. ...