[学习笔记] 静态网页开发基础之盒子模型

# 学习 # · 2020-04-16

盒子模型

1、盒子模型:padding-border-margin模型是一个极其通用的描述矩形对象布局形式的方法,这些矩形统称为盒子,英文为box。

2、在CSS中,一个独立的盒子模型由content(网页内容),border(边框),padding(内边距),margin(外边距)组成。

3、边框:
(1)border-color:颜色

(2)border-width:粗细(thin细的、medium中等,默认值2px、thick:粗的)

(3)border-style:样式(none表示无边框、dotted点线、dashed虚线、solid实线)

4、外边距:位于盒子边框外,指与其他盒子之间的距离,也就是指网页中元素与元素之间的距离。
注意:并集选择器是同时选中各个基本选择器所选择的范围,任何形式的选择器(包括标签选择器,类选择器,ID选择器等)都可以作为并集选择器的一部分,多个选择器通过逗号连接。

5、使用“margin:0px auto”让元素水平居中的条件:这个元素必须是块元素;其次这个元素要设置固定宽度。

6、内边距:用于控制内容与边框之间的距离。

7、盒子模型的尺寸:

(1)内盒的总尺寸=border+padding+内容宽/高

(2)外盒的总尺寸=border+padding+margin+内容宽/高

8、box-sizing拯救布局:

box-sizign:content-box|border-box|inherit

border-box:盒子的宽度或高度等于元素内容的宽度或高度。
content-box:默认值
inherit:此值使元素继承父元素的盒子模型模式

圆角边框

1、border-radius属性的语法:四个属性值按顺时针排列(左上,右上,右下,左下)没有的找对边。

border-radius:length{1,4};

2、使用border-radius制作特殊图形:

(1)圆形:元素的宽度和高度必须相同;圆角的半径为元素宽度的一半,或者直接设置圆角半径值为50%。

div{
    width: 100px;
    height: 100px;
    border: 4px solid red;
    border-radius: 50%;

}

(2)半圆形:制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度值。制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度值。

div{
    background: red;
    margin: 30px;
}
div:nth-of-type(1){
    width: 100px;
    height: 50px;
    border-radius: 50px 50px 0 0;
}
div:nth-of-type(2){
    width: 100px;
    height: 50px;
    border-radius:0 0 50px 50px;
}
div:nth-of-type(3){
    width: 50px;
    height: 100px;
    border-radius:0 50px 50px  0;
}
div:nth-of-type(4){
    width: 50px;
    height: 100px;
    border-radius: 50px 0 0 50px;
}

(3)扇形:遵循“三同,一不同”原则,元素宽度,高度,圆角半径相同;圆角取值位置不同。

div{
    background: red;
    margin: 30px;
}
div:nth-of-type(1){
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
}
div:nth-of-type(2){
    width: 50px;
    height: 50px;
    border-radius:0 50px 0 0;
}
div:nth-of-type(3){
    width: 50px;
    height: 50px;
    border-radius:0 0 50px 0;
}
div:nth-of-type(4){
    width: 50px;
    height: 50px;
    border-radius: 0 0 0 50px;
}

盒子阴影

1、基本语法:

box-shadow:inset x-offset y-offect blur-radius color;

inset:阴影类型,可选值,默认为外阴影,inset为内阴影。
blur-radius:阴影模糊半径,代表阴影向外模糊的模糊范围。只能为正值,若为0,表示不具有模糊效果,是可选值。
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/263/

评论