CSS3笔记-2

一、盒子模型

1、盒子边框

（1）border：1px solid red;

• dashed:边框为虚线
• dotted:边框为点线
• double：边框为双实线

（2）表格合并

• table{ border-collapse:collapse; }

（3）border-radius: 左上角 右上角 右下角 左下角;

• border-radius:50% 为一个圆形

2、内边距 padding

        三个值，上、左右、下

        四个值，上右下左

3、外边距 margin

盒子居中对齐

必须块级元素

盒子必须制定宽度

margin：0 auto;

4、清除内外边距

body默认有个外边距

*{ margin：0px; padding:0px; }

行内元素，只有左右外边距，上下没有

5、外边距合并

垂直的块级盒子

• 上的盒子margin-tottom:100
• 下的盒子margin-top：50

还是100，合并了，避免这样的情况。

6、外边距塌陷

大盒子中有小盒子

小盒子margin-top：30；大盒子却往下了30px，小盒子没变。

解决方案

（1）大盒子加：border：1px solid grey;

（2）大盒子加：padding:1px;

（3）大盒子加：overflow：hidden；

7、盒子尺寸

• 空间尺寸：width+border+margin+padding
• 实际尺寸：width+border+padding

盒子没有指定宽度padding不影响盒子大小

8、盒模型

content-box；

box-sizing:border-box 使用的padding就不撑开了，新增的。

9、盒子阴影

box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸 阴影颜色 内/外阴影

 二、浮动

普通流、浮动、定位

1、float

可让多个div显示在同一行

• left 元素向左浮动
• right 元素向右浮动
• none 元素不浮动(默认值

注意：浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

为了不让浮动影响，则给浮动的元素加一个标准流的大盒子父元素(父元素padding需注意)

• 如果其中一个子级有浮动的，则其他子级都需要浮动。这样才能一行对齐显示
• 行级元素加浮动就成了行级块元素

2、版心

    中间内容区

3、清除浮动

父级盒子一般不写高度（前提父级没高度）

当子级都浮动则，下层盒子就浮上来了，所以要清除浮动。

(1)clear：both；清除浮动对自己的影响（不推荐）

     副作用：margin失效

(2)父级中个也可写

    overflow：hidden;

(3)用伪元素清除浮动（推荐）

.clearfix:after { 
    content: "." ; 
    display: block ; 
    height: 0 ; 
    clear: both ; 
    visibility: hidden ; 
}

（4）父盒子间隔一个墙

4、BFC规范

当父类没有高度，它的多个子类加了浮动，则父类就一条线了。

  解决

（1）让大盒子也浮动【不靠谱】

（2）设置大盒子inline-block【不建议】

（3）设置大盒子postion：absolute;

（4）设置大盒子overflow：hidden （推荐使用）

作用

• BFC可取消margin塌陷，也就是上下两个div的margin重叠问题，设置的margin叠加了
• BFC 只有一个盒子用浮动，就会盖住旁边的盒子，这时加overflow：hidden 

三、三大特性

1、层叠性

        样式冲突：就近原则

2、继承性

        div中有p则，p也能实现div的效果，高、颜色不会继承

3、优先级

  (1)权重问题

• 标签： 0，0，0，1
• 类： 0，0，1，0
• ID： 0，1，0，0
• 标签内： 1，0，0，0

！import 非常重要，权重最高 如：color：red !import

 (2)权重叠加

div ul li  ------> 0,0,0,3
.nav ul li ------> 0,0,1,2 
a : hover  ------> 0,0,1,1 
.nav a     ------> 0,0,1,1

权重相同则采取就近原则

四、定位

1、定位

（1）边偏移

left right bottom top

（2）定位模式

 absloute 绝对定位，不占有位置，

• 如果父元素无定位，则会有浏览器为标准定位
• 如果父元素有定位，则以父元素为标准定位

   relative 相对定位，相对原来的位置定位

   fixed 固定定位，滑动位置不变，以浏览器为准定位

  static 静态定位（默认）没用

2、子绝父相（常用）

父级相对定位，子级绝对定位

3、绝对定位的盒子居中对齐

加了绝对定位后，盒子margin左右失效

left：50%；

4、叠放次序

z-indext

默认为0，取值越大，越前

z-index 只能 在定位中用

5、定位模式的转换

仅限于绝对和固定

6、元素显示和隐藏

display

• none 隐藏元素，位置不保留
• block 显示元素
• visibility:hidden,隐藏保留位置 | visible,显示

7、overflow溢出隐藏

• visible: 不剪切内容也不添加滚动条。
• auto: 超出自动显示滚动条，不超出不显示滚动条
• hidden: 不显示超过对象尺寸的内容，超出的部分隐藏掉
• scroll: 不管超出内容否，总是显示滚动条

8、cursor

• resize :none ; 防止文本域拖拽
• outline:none; 取消轮廓线
• vertical-align: middle:纯质对齐，只能用行级.用于图片和文字居中对齐

9.其他

 word- break: break-all 换行时拆开单词 keep-all 换行不