CSS-盒子模型

北方的南先生

于 2018-09-09 20:56:11 发布

阅读量326

点赞数 2

本文链接：https://blog.csdn.net/nanjinzhu/article/details/82556490

版权

什么是盒子模型

边框

1.border-color 2.border-width 3.border-style

属性	说明	示例
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;

边框粗细：border-width

1.thin(细) 2.medium（中间） 3.thick（粗） 4.像素值

示例

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】

边框样式：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; 【上实、右点、下虚、左双】

border简写：同时设置边框的颜色、粗细和样式

示例

border:1px solid #3a6587;
border: 1px dashed red;

外边距margin：

1. margin-top 2.margin-right 3.margin-bottom 4.margin-left 5.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】

外边距的妙用

网页居中对齐：margin:0px auto;

网页居中对齐的必要条件： 1.块元素 2.固定宽度

内边距padding：

1. padding-left 2.padding-right 3.padding-top 4.padding-bottom 5.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; }（*就是表示包括了所有的元素）

盒子型模的尺寸

box-sizing：

浏览器兼容性

属性名	IE	Firefox	Chrome	Opera	Safari
box-sizing	8+	1.5+	1.0+	9.0+	3.1+

圆角边框-语法：

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{
            width: 100px;
            height: 100px;
            border: 4px solid red;
            border-radius: 50%;
        }

运行结果：

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;  }

运行结果：