关于盒子模型的小知识
什么是盒子模型？
盒子模型就是布局网页的一种手段包括边框（border）、外边距（margin）、内边距（padding）、网页元素（content）、宽（width）、高（height）等元素。
边框border：
1. 边框颜色：border-color：
2. 边框粗细：border-width
Thin（细）、medium（中间）、thick（粗）、像素值 border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; 四条边框写粗细时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。 border-width:5px ; 【上5、右5、下5、左5】 border-width:20px 2px; 【上20、右2、下20、左2】 border-width:5px 1px 6px; 【上5、右1、下6、左1】 border-width:1px 3px 5px 2px; 【上1、右3、下5、左2】
3. 边框样式：border-style
none（没有）、hidden（隐藏）、dotted（点线）、dashed（虚线）、solid（实线）、double（双线）、groove（凹槽边框）、ridge（垄状边框）、inset（嵌入边框）、outset（外凸边框）
border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; 四条边框写类型时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。 border-style:solid ; 【上实、右实、下实、左实】 border-style:solid dotted; 【上实、右点、下实、左点】 border-style:solid dotted dashed; 【上实、右点、下虚、左点】 border-style:solid dotted dashed double; 【上实、右点、下虚、左双】
4. 同时设置边框的粗细、样式和颜色
border:1px solid #3a6587;
border: 1px dashed red;
外边距margin：
1. margin-top、margin-right、margin-bottom、margin-left、margin
例如：
margin-top: 1 px margin-right : 2 px margin-bottom : 2 px margin-left : 1 px 四个外边距写距离时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。 margin :8px; 【上8、右8、下8、左8】 margin :3px 5px; 【上3、右5、下3、左5】 margin :3px 5px 7px; 【上3、右5、下7、左5】 margin :3px 5px 7px 4px; 【上3、右5、下7、左4】
2. 外边距的妙用
margin:0px auto;
网页居中对齐的必要条件：块元素并且必须固定宽度。
内边距padding：
1. padding-left、padding-right、padding-top、padding-bottom、padding padding-left:10px; padding-right: 5px; padding-top: 20px; padding-bottom:8px; 四个内边距写距离时的顺序也是顺时针的：上、右、下、左，如果只设置两个值的话看对边。 padding:10px; 【上10、右10、下10、左10】 padding:10px 5px; 【上10、右5、下10、左5】 padding:30px 8px 10px ; 【上30、右8、下10、左8】 padding:20px 5px 8px 10px ; 【上20、右5、下8、左10】
默认边距：
在HTML5中很多元素都有默认的外边距或者内边距。
比较特殊的是div，没有外边距或者内边距，其他的都有。
去掉边距的方法有：
margin:0;
padding:0;
（清除默认样式）
清除所有元素的边距方法：
*{ margin:0; padding:0; }
（*就是表示包括了所有的元素）
盒子型模的尺寸：
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing：
浏览器兼容性：
p{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid red;
box-size: content-box}
content-box就是默认值写了和没写一样
此时盒子总范围：112px *112px
p{
width: 100px;
height: 100px;
padding: 5px;
margin: 10px;
border: 1px solid red;
box-size: border-box }
border-box就是把设置的width: 100px;和height: 100px;直接设为盒子的总范围：
此时为100px *100px
圆角边框：
border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列，如果只设置两个值的话看对角。
border-radius: 20px; 【右上20、右下20、左下20、左上20】
border-radius: 20px 10px; 【右上20、右下10、左下20、左上10】
border-radius: 20px 10px 50px; 【右上20、右下10、左下50、左上10】
border-radius: 20px 10px 50px 30px; 【右上20、右下10、左下50、左上30】
使用border-radius制作特殊图形：
1. 圆形
利用border-radius属性制作圆形的两个要点：
① 元素的宽度和高度必须相同
② 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
div{ 或者： div{
width: 100px; width: 100px;
height: 100px; height: 100px;
border: 4px solid red; border: 4px solid red;
border-radius: 50%; } border-radius: 54px; }
运行结果：
2. 半圆形
利用border-radius属性制作半圆形的两个要点：
① 制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
② 制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
上半圆：
div{
width: 100px;
height: 50px;
border: 4px solid red;
border-radius: 54px 54px 0 0; }
下半圆：
div{
width: 100px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 54px 54px; }
左半圆：
div{
width: 50px;
height: 100px;
border: 4px solid red;
border-radius: 54px 0 0 54px; }
右半圆：
div{
width: 50px;
height: 100px;
border: 4px solid red;
border-radius: 0 54px 54px 0; }
3. 扇形
利用border-radius属性制作扇形遵循“三同，一不同”原则：
① “三同”是元素宽度、高度、圆角半径相同
② “一不同”是圆角取值位置不同
左上扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 54px 0 0 0; }
右上扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 0 54px 0 0; }
右下扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 54px 0; }
左下扇形：
div{
width: 50px;
height: 50px;
border: 4px solid red;
border-radius: 0 0 0 54px; }
总结：
- 点赞
- 收藏
- 关注作者
评论（0）