CSS盒子模型

概述：盒子模型属于CSS 三大模块之一，分别是：盒子模型、浮动、定位

一、盒子边框之border

　1. 语法描述

语法： border-width
      border-style  设置边框样式
          none: 没有边框
          solid: 边框为单实线 （最为常用）
          dashed: 边框为虚线
          dotted: 边框为点线
          double: 边框为双实线
      border-color
综合写法：border: 1px blue solid;

　

2. 对表格知识小补充之处理表格的细线边框

　　border-collapse: collapse;  合并两个相邻单元格的边框

 

3.圆形边距border-radius

border-radius: 100px; 一个参数代表上下左右
border-radius: 10px 40px;  /*左上角和右下角是10px 右上角和左下角是40 （对角线）*/
border-radius: 10px 40px 80px;  /*左上角是10px 右上角和左下角是40  右下角是80（按照顺时针走的）*/
border-radius: 10px 40px 80px 100px;  /*左上角是10px 右上角40 右下角是80  左下角是100（按照顺时针走的）*/

 

二、内边距padding

1. padding用法

padding 属性用于设置内边距，指边框与内容之间的距离
padding-top
padding-right
padding-bottom
padding-left

padding: 20px padding如果只写一个值表示上下左右都是20
padding:10px 30px; 上下10 左右30
padding: 10px 30px 50px; 上10 左右30 下50
padding: 10px 20px 30px 40px; 上右下左 （顺时针）

内边距（margin）
顺序跟margin一样 一般不设置右边 （因为看不出效果）

设置外边距盒子居中 （需要满足的条件）
1.必须是块级元素
2.盒子必须指定宽度
然后给盒子左右的边距都设置为auto, 就可以实现了。

 

2.容易混淆点

　　2.1 文字居中和盒子居中

　　　　文字居中（text-align: center;）
　　　　盒子居中 margin: 0 auto;

　　2.2 插入图片和背景图片的调整混淆

调整图片大小
section img {
            width: 400px;
            height: 300px;
        }
背景图片更改大小
background: #FFF url(image/denglun.jpg) 30 50 no-repeat;
            background-size: 200px 210px;

背景图片不占位置

3. 一般情况下，背景图片适合做一些小图标，产品展示就用插入图片

　　

　　2.3 清楚原生盒子自带的padding和margin  (主要为了浏览器之间的兼容，以及更好的调整样式)　　　

body,ul,li {
            margin: 0;
            padding: 0;    
        }

　　

　　2.4 注意事项及盒子塌陷解决方法

行内元素只有左右外边距  没有上下
在IE6一下的版本margin是不生效的 其它浏览器效果也很差
所以尽量不给行内元素指定上下内外边距就好了

外边距合并
出现在垂直的块级盒子 以最大的边距为准
解决方案，避免 只给一个盒子设置边距

塌陷原因
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中年较大者，即使父元素上外边距为0 
也会发生合并 俗称塌陷

盒子塌陷解决方案：
1. 可以为父元素定义1像素的上边框或上内边距
2. 可以为元素添加overflow：hidden
border: 1px solid red; 解决外边距合并的问题
padding: 1px;
overflow: hidden; /* 触发BFC*/

　　

　　2.5 盒子模型的高度和宽度计算

外盒尺寸（元素空间尺寸）
    空间尺寸 width + border + padding + margin

内盒尺寸（元素大小）
    width + border + padding
以上区别在于margin

ps：padding 不会影响盒子大小的两种情况
1.如果一个盒子没有设置宽度 设置padding就不会影响宽度
2.继承下来的

　　

　　2.6 调整盒子布局时的顺序以及css新增属性

盒子模型稳定性
width > padding > margin

cssd新增属性
box-sizing盒模型，可指定:
content-box : 以前的那种 会让盒子变大
border-box： 除了margin以外 padding和border 都是包含在盒子里面的 不会撑开盒子。

　　

　　2.7 小知识点补充之取消li标签的点

ul {
            list-style: none;  /*那些已经学习过排序*/
    }

 

三、盒子阴影 （比文字阴影多了两个属性）

h-shadow 水平阴影 必须 允许负值
b-shadow 垂直阴影 必须 允许负值
blur     模糊距离 可选
spread   阴影的尺寸
color    阴影的颜色
inset    将外部(outset)阴影改为内部阴影
box-shadow: 5px 5px 3px 4px rgba(0,0,0, .4) inset;
如果是外面阴影  不用写否则会不生效

 

四、文档流介绍

普通流（标准流）、浮动、定位

普通流：一个网页标内标签元素 自上而下
浮动：指设置了浮动属性的元素会脱离标准普通流的控制 float
    属性值 left right none   默认是左浮动
    浮动首先创建包含块的概念（包裹）也就是说浮动的元素是找离它最近的腹肌元素对齐 但是不会超出内边距的范围,也就是说padding和border的距离
小结：一个父盒子中的子盒子，如果其中一个子级有浮动，则其他也需要浮动 这样才能一行对齐

浮动影响盒子显示模式
如果块级元素添加浮动之后，具有行内块的特性
元素大小完全取决于定义的大小，默认是内容的大小

总结：浮动的目的就是为了让多个块级元素在同一行显示

 

五、版心和布局流程

版心和布局流程
版心指网页中主题内容所在的区域，一般在浏览器窗口中水平居中显示，常见的值969px 980px  1000px 1200px

布局流程
1.确定页面的版心（可视区）
2.分页页面中的行模块，以及每个行模块中的列模块
3.制作HTML页面，css文件
4.css初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块