CSS学习之：盒子模型

最新推荐文章于 2022-05-12 11:21:03 发布

转载最新推荐文章于 2022-05-12 11:21:03 发布 · 409 阅读

文章标签：

#边框 #div #盒子

CSS 同时被 2 个专栏收录

16 篇文章

订阅专栏

HTML XML

15 篇文章

订阅专栏

什么是盒子模型

http://www.imooc.com/video/3225

盒模型–边框（一）

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
div{
border:2px solid red;
}
上面是 border 代码的缩写形式，可以分开写：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。

2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。

3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。

盒模型–边框（二）

现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
div{border-bottom:1px solid red;}
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;

盒模型–宽度和高度

http://www.imooc.com/code/2054

盒模型–填充

元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
div{padding:20px 10px 15px 30px;}
顺序一定不要搞混。可以分开写上面代码：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
如果上、右、下、左的填充都为10px;可以这么写
div{padding:10px;}
如果上下填充一样为10px，左右一样为20px，可以这么写：
div{padding:10px 20px;}

盒模型–边界

元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
div{margin:20px 10px 15px 30px;}
也可以分开写：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上右下左的边界都为10px;可以这么写：
div{ margin:10px;}
如果上下边界一样为10px，左右一样为20px，可以这么写：
div{ margin:10px 20px;}
总结一下：padding和margin的区别，padding在边框里，margin在边框外。

盒模型

盒模型概念、width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

盒模型图解
这里写图片描述

这里写图片描述

内容区通过width*height设置大小

width

width:<lenght> | <percentage> | auto | inherit
width的默认值为auto,block元素，inline元素 inline-block元素在默认情况下宽度规则不同。 
引申：max-width   min-width

height

默认情况下元素高度为内容宽度

引申：max-height  min-height

padding填充

padding:[<lenght>|<percentage>]{1,4}

margin

margin:[<length> | <percentage> | auto{1,4} | inherit]

margin合并

这里写图片描述

如上图所示有两种margin合并的情况
1.毗邻元素会产生合并
2.父元素设置margin,并且第一个子元素或者最后一个子元素也设置了margin.如图中的父元素设置了margin-bottom:40px,子元素设置了margin-bottom:20px;将会产生margin合并为40px;

margin妙用-水平居中

这里写图片描述

border

border:[<border-width> || <border-style> || <border-color>] | inherit

border-style:[solid | dashed | dotted|...]{1,4}| inherit
border-color:[<color> | transparent]{1,4} | inherit
.....

圆角

border-radius
这里写图片描述

border-radius:[<length> | <percentage>{1,4}[/[<length> | <percentage>]{1,4}]

一个角需要水平半径和垂直半径设置

这里写图片描述

border-radius:50%时为圆
这里写图片描述

盒子内容超出时的显示

这里写图片描述

overflow:visible | hidden | scroll | atuo

超出部分仍然显示在盒子之外

overflow:visible;
这里写图片描述

超出部分被隐藏

overflow:hidden;
这里写图片描述

滚动条增加空间

overflow:scroll无论内容是否超出，都会有滚动条
这里写图片描述

内容超出，自动设置滚动条

overflow:auto当内容超出盒子时，自动设置滚动条增加空间

设定width, height指定的区域

box-sizing

box-sizing:content-box | border-box |inherit

默认情况下box-sizing属性值为content-box,那么平常所使用的width 和height 表示的是content-box（内容区）的宽和高
这里写图片描述
box-sizing:border-box之后，width 和height 将不在表示content-box的宽高，而是border-box（盒子）的宽高。