CSS学习 盒子的学习

CSS框模型概述图

盒子边框（border）

border(后面4个值表示):上 右 下 左
border(后面3个值表示):上 右左 下
border(后面2个值表示):上下 左右
上边框（border-top）；右边框（border-right）
下边框（border-bottom）；左边框（border-left）
边框颜色（border-color）
边框样式（border-style）
可能值：
dotted(点状) solid(实线) double(双线) dashed(虚线)

盒子内边距（padding）

padding表示同上
上内边距（padding-top）；右内边距（padding-right）
下内边距（padding-bottom）；左内边距（padding-left）

盒子外边距（margin）

同上，padding变margin

行内元素的盒模型（display visibility）

display 用来设置元素显示的类型
可能值：
inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素（行内块，既可以设置宽度和高度又不会独占一行）
table 将元素设置为一个表格
none 元素不在页面中显示

visibility 用来设置元素的显示状态
可能值：
visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏，不显示，但是依然占据页面位置

盒子的大小（box-sizing）

box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
可能值：
content-box 默认值，宽度和高度用来设置内容区的大小
border-box 宽度和高度用来设置整个盒子可见框（边框+内边距+内容区+内边距+边框）的大小

轮廓阴影和圆角（outline box-shadow border-radius）

outline 用来设置元素的轮廓线，用法和border一样。轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
box-shadow 用来设置元素的阴影效果，阴影不会影响页面布局
box-shadow:第一个值 第二个值 第三个值 第四个值
第一个值 水平偏移量 设置阴影的水平位置 正值向右移动 负值向左移动
第一个值 垂直偏移量 设置阴影的水平位置 正值向下移动 负值向上移动
第三个值 阴影的模糊半径
第四个值 阴影的颜色

border-radius 用来设置圆角
（四个值同时指定的话：左上 右上 右下 左下）
（三个值：左上 右上左下 右下）
（两个值：左上右下 右上左下）
border-top-left-radius 左上角
border-top-right-radius 右上角
border-botton-left-radius 左下角
border-botton-right-radius 右下角
border-radius：50%（圆形）

浮动（float）

float 属性用来设置元素的浮动
可选值：
none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动