web前端开发基础之盒子模型

                                     知识点奉上

（1）.border：边框

（2）.margin：外边框

（3）.padding：内边框

（4）.box-sizing：内边框

（5）.border-box：边界框

（6）.content-box：内容框

（7）.border-radius：边框圆角

（8）.box-shadow：边框阴影

Color颜色 style样式 width粗细

1.Border-color（颜色）

Border-top-color 上边框颜色

Border-bottom-color下边框颜色

Border-left-color 左边框颜色

Border-right-color 右边框颜色

可以一次性使用

语法：Border-color：#ff0000  #ff0000  #ff0000  #ff0000

给四个值为上、右、下、左

给二个值为上、下、左、右

给三个值为上、左、右、下

2.border-width（粗细）

用px像素值就行

Border-top-width上边框粗细

Border-bottom-width下边框粗细

Border-left-width 左边框粗细

Border-right-width 右边框粗细

语法：Border-width：1px 2px 3px 4px

3.border-style（粗细）

Border-top-style上边框实线

Border-bottom-style下边框实线

Border-left-style 左边框实线

Border-right-style 右边框实线

Solid实线

Dotted 点线

Double 双线

Dashed 虚线

Border的简写：颜色、粗细、样式 顺序随意用空格隔开

4.外边距（margin）：

Margin-top 上边距

Margin-bottom 下边距

Margin-left 左边距

Margin-right 右边距

单位px

特殊值auto这个值通常设置盒子居中显示的时候用

注意在网页制作中要先把外边距全部清0

5.内边距（padding）

Padding-top 上内边距

Padding-bottom 下内边距

Padding-left 左内边距

Padding-right 有内边距

1. 盒子模型的尺寸

内盒的总尺寸=boder+padding+内容宽/高

内盒的总尺寸=boder+padding+margin+内容宽/高

Margin是外边距，在计算中看情况是否计算

1. box-sizing拯救布局

语法：box-sizing：centent-box|border-box|inherit

Content-box：默认值，盒子的宽度和高度border+padding+（margin）+width+height

Border-box：盒子的宽度或高度等于元素内容的高度和宽度

圆角边框：

Border-radius

语法：border-radius：1px 2px 3px 4px；

设置一个值是全部使用

设置四个值是按顺时针排序（左上，右上，右下，左下）

Border-radius：0 0 0 100% 扇形

Border-radius：50% 圆形

制作半圆形的要点:

(1).制作上半圆或者下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值

（2）.制作左半圆或者右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值

制作扇形的要点：

遵循“三同，一不同的”原则，“三同”是高度、宽度、圆角半径相同，“一不同”是圆角取值位置不同。

盒子阴影：

Box-shadow的语法

Box-shadow:inset x-offset y-offset blur-radius color;

Inset:阴影类型，可选择，不设默认外阴影如果设置就是内阴影

X-offset x轴位移 左右位移

y-offset y轴位移 上下位移

blur-radius：模糊半径

color 阴影颜色

希望对你有所帮助，加油