响应式网站开发技术基础知识1
一， 盒模型
1 ，概率指的是组成某个页面的排版，像是一个盒子，一个包裹住另一个。
2 , 作用:布局网页，摆放盒子和内容。
3 , 重要组成部分：(从内到外)
- 内容区域：width&height
- 内边距：padding 出现在内容与盒子边缘之间
- 边框线：border 内外边距以边框线为界限
- 外边距：margin 出现在盒子外面
大致模样
div{
margin: 50px;
border: 5px solid brown;
padding: 20px;
width: 200px;
height: 20px;
background-color: pink;
}视觉效果是这样的：
。
- 我们实际视觉上的元素效果只体现在重要组成部分的前三个，不包括margin，margin只是我们用来调整元素位置的一个工具。
所以说我们如果想要使元素向右移动，我们就给他一个margin-left如下：
元素实际的width是content+padding+border，height也是如此。
（1）border（bd）
属性值：边框线粗细 线条样式 颜色（不区分顺序）
这里演示一下点线-->
特例：设置单方向边框线：
属性名：border-方位名词（border+方位名词首字母，例如，border-left）
就是在原本的border后面加上方位名词。只不过能需要多写几个方位。
（2）padding/padding-方位名词 以border内边缘作为参照添加像素值
padding 多值写法:
技巧：从上开始顺时针赋值，当前方向没有数值则与对面取值相同。也有对称的原则。
（3）margin
作用：拉开两个盒子之间的距离，调整盒子的位置。
原则：与 padding 属性值写法、含义相同 --margin+方位名词
margin的参照物是整个页面的边缘） 要与padding的参照要区分。
这是我们margin-top:100px的效果：
水平居中的效果：-------auto
代码：margin:0px auto; 或者你用页面的宽度减去我们元素的实际宽度除以二再做设定也可以
<前面的0px是上下，后的auto是左右。表达的是竖直靠上，水平居中>
效果：
二，盒的尺寸计算：
默认情况：盒子尺寸=内容尺寸+border尺寸+内边距尺寸
特殊情况：怪异盒模型： ---》我们可以用它来防止盒子扩张，或者我们手动计算减去也可以。
box-sizing：border-box;
代码：
div{
width: 200px;
height: 200px;
background-color:skyblue;
padding: 50px;
border: 10px solid red;
box-sizing:border-box;
}原图---------》
我们不让他往外舒张，他的padding和border就会把content往里面挤
结论：给盒子加 border / padding 会撑大盒子
三，盒子模型的圆角边框：
属性名：border-radius
属性值：数字+px/百分比
注意：属性值是圆角的半径
原则：从左上角的角开始顺时针赋值，如果当前位置没有赋值则与他的对角相同。
试一下这段代码的效果：
border-radius: 20px 30px;特殊圆角：正圆形状
方法：给正方形盒子设置圆角属性值为 宽高的一半 / 50%
胶囊形状：
方法：给长方形盒子设置圆角属性值为 盒子高度的一半
椭圆形状：
方法：给长方形盒子设置原角属性值为 50%