2020-03-22

大前端基础之Css盒模型

在讲css盒模型之前,我们先讲讲Css概念,其简单点说就是美化网站用的,是层叠样式表的简写,是一种表现层的布局语言。而打个比方,如果说人的骨架是HTML5构造出来的,而我们穿的衣服以及化妆等用来装饰人体的是Css美化出来的,而我们人的动作以及与别人交互的行为等是JS实现的。

Css盒模型简单概述:

就是上述所说的“人体”骨架的一种,也可以说是我们人体骨架中的黄金比例。页面上的所有元素,包括文本、图像、超级链接、div块等,都可以被看作盒子,由盒子将页面中的元素包含在一个矩形区域内,这个矩形区域则称为“盒模型”。

Css盒模型的分类:

盒模型可以分成两类,第一为标准w3c盒模型,第二为ie盒模型,也称为怪异盒模型,其示意图为下:

标准w3c盒模型


IE怪异盒模型


两种盒模型不同的是,怪异盒模型宽高包括了内容区,左右内边距和左右边框大小,而标准盒模型却没有。两者也可以用box-sizing属性转换,其在content-box时为标准盒模型,也是默认情况,其在border-box时为怪异盒模型。

Css盒模型的组成:

两种盒子模型如上图所示,从里到外由content(内容),padding(内边距),border(边框),margin(外边距)4部分组成。标准盒子的高宽严格遵循w3c规则。

组成成分说明:

1:Margin(外边距)和padding(内边距)

margin和padding两者的写法大致相似,常见的单位有px、em、%等,但是外边框margin完全是透明的,我们只能设置它的边距,其值可以为正负值,而内边距padding不是完全透明的,还可以设置背景颜色和图片,其值不能为负值。其两者包含了上(top)右(right)下(bottom)左(left)四条边,写法如上边距:margin-top、padding-bottom等。开发者也有四者一起写的如margin:1px 2px 3px 4px;表示盒子顺时针上右下左,中间用空格隔开。三者一起写的如margin:1px 2px 3px;表示盒子上边距、左右边距、下边距,中间用空格隔开。两者一起写的如margin:1px 2px;表示盒子上下边框,左右边框,中间也要用空格隔开,写一个的时候表示四条边都是此值。而padding的写法和margin的写法一致。

注意:当父子元素不存在浮动时,如果子元素设置了margin值,子元素显示不正常。

如例图:子元素黑色盒子的margin-top值显示在了父元素红色和盒子的外面!


2:border(边框)

最基本的,border边框属性也和边距属性一样可以分别对每一条边进行设置:border-top等,而值得注意的是,当border的属性色值不明确的时候如border:1px solid;其边框颜色和当前元素的颜色color值一样。而没有单独给出border的属性值时,border值为:宽度 样式 颜色;中间用空格隔开。

而除了单独对每一条边框进行设置,border属性还可以对border-width(边框宽度,常见单位如px、em、%),border-style(边框样式),border-color(边框颜色)进行设置。其中边框样式属性值和效果图大致如下图所示。


除此之外,border属性还可以连着写如border-top-color表示上边框颜色、border-left-style表示左边框样式等。

拓展:

(1)border-radius表示边界半径,也就是圆角

(2)border-image表示图形边界,是CSS3新增的内容,而且当前也只有一些新主流的浏览器才能实现。需要借助background-clip(边界)属性。

(3)Box-shadow表示盒子阴影,也是CSS3新增内容,阴影的轮廓和box边界的border的轮廓一样。

其有感兴趣的同行师兄弟也可在评论区留下你宝贵的建议,下期,我也会将我自己的一些看法发表。

你可能感兴趣的:(2020-03-22)