9.06学习笔记

#盒模型

从内到外：content < padding < border < margin

#border(边框)

同时设置四条边：

border-width：20px；/* 边框宽度 */

border-style:solid; /* solid（单实线），double（双实线），dashed（虚线），dotted（点线）*/

border-color：white； /* 边框的颜色默认和文字的颜色保持一致 */

border：2px solid white；/* 组合写法（注意顺序）*/

四条边分开设置：

border-top：2px solid white；

border-left：2px solid white；

border-bottom：2px solid white；

border-right：2px solid white；

宽度的组合写法

border-width：2px； /* 四条边 */

border-width：1px 2px；/* 上下1px，左右2px */

border-width：1px 2px 3px；/* 上1px，左右2px，下3px */

border-width：1px 2px 3px 4px；/* 上1px，右2px，下3px，左4px */

#outline（轮廓线）

当某个元素获得焦点的时候会出现轮廓线，最典型的就是文本框

outline：2px solid red；

outline：none；

@outline和border的区别是什么？

1.outline不占页面空间，border占空间

2.outline不能四条边拆开设置

#标准盒模型与怪异盒模型（IE盒模型）的区别

标准：width和heignt是不含border，padding的

怪异：width和height是包含border和padding

#box-sizing

box-sizing：content； /* 默认情况 */

box-sizing：border-box；/* border和padding被包含在width，height之中 */

div{

width：100px；

height：100px；

box-sizing：border-box；

padding：10px；

}

最终在页面上，width和height会自动被减成 80*80

#reset.css

通常会将通用的样式，比如去掉列表的点，去掉外边距，去掉外边距，统一字体，统一字号等等。

这样可以比较好的兼容各浏览器，自己设置的尺寸不会受到影响

#float

浮动会使元素脱离文档流，按照指定方向发生移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

float：left；/* 左浮动 */

float：right；/* 右浮动 */

float：none；/* 不浮动 */

#特性

1.使块元素在一行显示

2.脱离文档流

3.提升层级

4.内嵌元素自动转换为块元素

5.不设置宽高的时候，可以适应内容的宽度

#清除浮动

1.clear：both； /* 在浮动元素的最后加一个div设置clear */

2.父标签没有高度，子标签设置了浮动，此时父标签的高度就消失了

给父标签设置：overflow：hidden；

#定位

position：static；/* 静态：默认值 */

position：relative；/* 相对定位 */

position：absolute；/* 绝对定位 */

position：fixed; /* 固定定位 */

relative：提升层级，可以使用left，right，top，bottom从原始位置进行偏移

absolute：提升层级，也可以使用left，right，top，bottom从已经定位的父元素左上角进行偏移，如果父元素没有定位，就 从html（页面 左上角）偏移脱离文档流

fixed：与绝对定位类似，区别在于始终相对浏览器窗口进行定位

#z-index

z-index:3;

1.层级必须加定位元素

2.数值越大层级越高

3.层级要在同级元素之间作比较

#overflow

overflow：visible； /* 内容溢出就溢出，内容会显示在元素外面 */

overflow：hidden；/* 溢出的部分被隐藏 */

overflow：scroll；/* 不论内容是否放的下，都会显示滚动条的 */

overflow：auto； /* 内容放得下不出现滚动条，内容放不下出现滚动条 */

#vertical-align（垂直对齐方式）

vertical-align：top；/* 顶部对齐 */

vertical-align：middle；/* 垂直居中 */

vertical-align：bottom;/* 底部对齐 */

vertical-align：baseline；/* 基线对齐（默认）*/

特性：

1.块元素用不了的

2.给要垂直对齐的那个元素添加，而text-align是给父级元素添加

#display属性

以什么形态来显示当前元素

div{display：inline；}/* 当成行内元素 */

b{display：block;}/* 当成块元素 */

div{display:inline-block;}/* 当成行内元素（在一行且能设置宽高）*/

div{display：table；}/* 当成表格 */

div{display:table-cell；}/* 当成td/th */

div{display:none；}/* 隐藏当前元素 */