Div学习

DIV学习

一、div大小问题

​ 1.第一种解决方案：

​ 直接修改div的大小

​ 2.第二种解决方案：

​ 通过p标签：p没有设计width 此时padding不会影响div大小

​ p标签会与默认的margin 并且会随着字体大小而改变

​ 3.第三种方案：div的实际显示大小width=width

​ width你不再是内容的宽度了 此时的width=border+padding+内容的宽度

​ 固定width 不会被padding所改变

​ 固定div大小

​ 盒子尺寸：
​ 取值content-box 一般情况下div height与width是content的高度与宽度**
​ div的尺寸=（boder+padding+content）（boder+padding+content）竖直
​ 取值：border-box：width与height 是最终浏览器内显示的盒子的高度与宽度
​ div尺寸=widthheight 新盒子模型

二、边框合并问题

​ 1.并行

• 常用解决方案：margin-bottom：-10px;

​ 2.嵌套

• ​ margin: -10px;

三、浮动（float）

​ 1.默认排版：普通流 /文档流/ 静态流 默认的方式 布局 文档流布局 块级元素占一行

2. 浮动：脱离了文档流 块级元素不占一行

四、选择器权重问题

​ 1.基本选择器中优先级：

​ !important>id选择器>类选择器>标签选择器
​ 2.选择器的权重

​ 权重值相同的看 顺序后面会把前面覆盖

​ 3.权重：256进制 每256进1
​ 权杖最高的为：内嵌 权重值：1000
​ id选择器 权重值：0100
​ 类选择器，伪类选择器，属性选择器
​ 权重值：0010
​ 标签选择器，组合选择器 多元素选择器…
​ 权重值：0001

​ 4.例子：

​ .a{}：权重值为0010

​ .a .c{}：权重值为0020

​ .a #d{}权重值为0110

​ .a .b .c .d .e .f .g .h .i .j{}权重值为00(10)0