盒子模型乱七八糟大杂烩

先记一下我觉得比较重要的东西

CSS的优先级
内联样式>ID 选择器>伪类>属性选择器>类选择器>元素（类型）选择器>通用选择器

行内元素，块元素，行内块元素之间的转换
display:inline; //块级元素（独占一行）变为行内元素–可以文本居中

display:block; //行内元素变为块级元素–可以设置宽高

display:inline-block; //其实仍是行内元素，但是可以设置width及height属性等

---------------------------------------好了，现在是真的盒子模型-------------------------------------

盒子模型的计算

一个盒子由content+padding+border+margin组成

padding:10px；代表上下左右都是10px

padding:10px 20px;上下是10px 左右是20px

padding:10px 20px 30px;代表上 左右 下

padding:10px 20px 30px 40px;代表上右下左

margin同理

计算盒子宽多少的例题
有一个div设置width是100px height是50px,border:5px solid#000;padding:10px 20px;那么盒子在页面实际占

据的宽度和高度是多少像素？

img

盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
宽：100+10+40

图和题没半毛钱关系

盒子的定位和浮动 这是真难懂
定位这个词 position

就是为了方便布局控制盒子的位置

定位常见的有四种 如下：

定位 position 语法：position : static 、absolute 、relative、fixed 。

static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。

relative ：称为相对定位，使用相对的盒子的位置常以标准流动排版方式为基础，然后使盒子相对于它在原来的位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流的方式对待它。

absolute : 称为绝对定位，盒子的位置以它的包括框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好象这个盒子不存在一样。

fixed : 称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的移动滚动条时，依然保持对象的位置不变。

静态定位是默认的属性，按照标准流布局

相对定位在我看来就像是分身术一样，本体按照以前残影的位置改变方位，但是用来做参照的盒子依旧在标准流中

绝对定位就厉害了脱离了标准流，独立于它们

而固定定位就像是老顽固一样，守着一个地方，页面上下翻动它依旧不变

Z-index
z-index就像是皇帝睡觉翻牌子——谁先上！

就像皇帝挑妃子一样，z-index也是有条件的那就是——得定位了才能用，而浮动的东西不能用。

它的默认值是0不用问，它没单位，属性值为整数，可正可负

属性值一样时还是原来的高低关系

浮动以及清除浮动
浮动学的稀烂就不皮了

元素加上浮动后会尽量向左或向右移动知道触碰到外边框，或者碰到另一个浮动框的边框

文本流会环绕在浮动的图片左边

盒子被设置为float之后会脱离标准流，不会影响其他标准流中的盒子

清除浮动：clear属性

clear属性主要放在文字所在的盒子里，例如一个p段落的css设置中，而不要放到对浮动盒子的设置里面

clear属性语法：
clear : none 、left、right、 both

clear参数值说明：
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象
1
2
3
4
5
6
7
8
期待下一次的补充
1