什么是盒子模型?
盒子模型就是布局网页的一种手段包括边框(border)、外边距(margin)、内边距(padding)、网页元素(content)、宽(width)、高(height)等元素。
边框border:
1. 边框颜色:border-color:
属性 | 说明 | 示例 |
border-top-color | 上边框颜色 | border-top-color:#369; |
border-right-color | 右边框颜色 | border-right-color:#369; |
border-bottom-color | 下边框颜色 | border-bottom-color:#fae45b; |
border-left-color | 左边框颜色 | border-left-color:#efcd56; |
border-color | 四个边框为同一颜色 | border-color:#eeff34; |
上、下边框颜色:#369 左、右边框颜色:#000 | border-color:#369 #000; | |
上边框颜色:#369 左、右边框颜色:#000 下边框颜色:#f00 | border-color:#369 #000 #f00; | |
上、右、下、左边框颜色: #369、#000、#f00、#00f | border-color:#369 #000 #f00 #00f; |
四条边框写颜色时的顺序是顺时针的:上、右、下、左,如果只设置两个值的话看对边。
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:
浏览器兼容性:
属性名 | IE | Firefox | Chrome | Opera | Safari |
box-sizing | 8+ | 1.5+ | 1.0+ | 9.0+ | 3.1+ |
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; }
盒子阴影:
浏览器兼容性:
属性名 | IE | Firefox | Chrome | Opera | Safari |
box-shadow | 9+ | 3.5+ | 2.0+ | 10.5+ | 4.0+ |
Inset是内阴影
不设置就是外阴影
例如:
情况一:(此时有inset)
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: inset 10px 10px 3px blue; }
运行结果:
情况二:(此时没有inset)
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: 10px 10px 3px black; }
运行结果:
情况三:(此时应有inset值的地方值为0)
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: 0 10px 10px 3px black; }
运行结果:
情况四:(此同时有内阴影和外阴影)
div{
margin: 20px auto;
width: 200px;
height: 200px;
background-color: lightskyblue;
box-shadow: inset 10px 10px 3px blue, 10px 10px 3px black; }
运行结果: