盒子模型

盒子模型

盒子模型：在html中，任意一个元素都可以被当做一个盒子来看待。

盒子就是用来装东西的，html中的盒子，是用来装页面各种形式的内容。

盒子模型的基本组成：

w3c：margin border padding content（width，height）

在w3c下，在任一方向添加margin，border或padding都会使元素整体占用的空间变大。

盒子的设置顺序：

margin: 10px 20px 30px 40px;/*上  右  下 左 */

            margin:10px 20px 30px;/*上  左右  下*/

            margin:10px 20px;/*  上下     左右*/

            margin: 10px;/*上右下左*/

盒子模型的居中

margin-top: calc((height1 – height2) / 2);

calc:

css中的计算，在calc中，运算符两边必须添加空格

border(边框)样式

border-width: 20px;

border-color: silver;

border-style: inset;（定义 3D inset 边框）

一些边框样式

none    无边框

hidden 隐藏

dotted 点状边框。

dashed 虚线

solid   实线

double 双线

groove 3D 凹槽边框

ridge   3D 垄状边框

inset   3D inset 边框

outset 3D outset 边框

inherit 从父元素继承边框样式

margin: 0 auto

外边距上下为0，左右自动适应

#list li:not(:first-child):hover

对除第一个元素外的设置

Margin（外边距）和padding（内边距）

/*在调整布局之前，不要心疼默认的内外边距，对开发而言没有任何意义。

所以，前端开发的通用做法是取消所有元素的所有内外边距。

        *{

            margin：0；

            padding:0;

        }

 

另外，一定要分清什么是内边距，什么是外边距。

操作的元素越是子元素，针对性就越高。

*/

/*两种解决子元素添加上外边距，整体下移的方案。*/

            border: 3px solid blue;

            overflow: hidden;

圆角

border-radius: 60px 0px;

背景图

background-image: url("../../../img/cat.jpg");

box阴影

/*x轴的偏移 y轴的偏移 模糊程度 模糊范围 阴影颜色*/

box-shadow: 3px 5px 10px 10px greenyellow;

outline（轮廓）

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

input:focus{

            outline: 3px solid red;

        }

变态盒子模型

/*添加完这个属性值以后，当前的盒子模型就不在是默认

标准盒子了。而是变成非标准盒子模型（变态盒子模型）*/

            box-sizing: border-box;