什么是盒子模型:
模型是一个及其通用的描述,是一种以矩形对象的布局的方法,这些矩形对象称为盒子。
盒子的组成:
一个盒子由外到内可以分成四个部分:margin(外边距)、border(边框)、padding(内边距)、content(内容)、margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分,而content则是HTML元素的内容。
盒子的大小:
盒子的大小指的是盒子的宽度和高度。盒子的宽度和高度并不是width和height属性,width和height属性只是设置content(内容)部分的宽和高。盒子真正的宽和高按如下计算:
盒子的宽度=内容宽度+左填充+右填充+左边框+右边框+左边距+右边距
盒子的高度=内容高度+上填充+下填充+上边框+下边框+上边距+下边距
用带属性的公式表示:
盒子的宽度=width+padding-left+padding-right+border-left+border-right+margin-left+margin-right
盒子的高度=height+padding-top+padding-bottom+border-top+border-bottom+margin-top+margin-bottom
盒子的样式:
要为一个元素设置边框必须指定三个样式:
border-width:边框的宽度
border-color:边框的颜色
border-style:边框样式
使用border-width可以分别指定四个边框的宽度:
如果border-width指定四个值:则四个值分别指定给上右下左 按顺时针方向设置。
如果是三个值,则分别设置给上、左右、下。
如果是两个值,则分别设置给上下、左右。
如果是一个值,则四边全是该值。
边框的颜色、样式依次同上面情况。
除了border-width CSS中还提供了四个border-XXX-width XXX的值可以是:top、right、bottom、left专门用来设置指定的宽度。设置边框的颜色和宽度一样,color也提供四个方向的样式来分别指定颜色。
设置边框的样式:
可选值:
none 默认值 没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线
style也可以分别指定四个边的边框样式,同时也提供border-XXX-style四个样式,分别来设置四个边。
圆角:可以使盒子的样式更加好看
圆角由属性border-radius进行控制,这是一个简写属性,像margin、padding等一样,可以有一个、两个、三个或四个值进行设置,同样也可以对盒子的每一个角的半径进行单独设置。
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
边界半径可以使用px、em等长度单位,也可以使用百分数。
border-radius值的个数以及每个值对应控制的位置:
一个值:设置四个角相同的边界半径
两个值:第一个值设置左上角和右下角,第二个值设置右上角和左下角
三个值:第一个值设置左上角,第二个值设置右上角和左下角,第三个值设置右下角
四个值:第一个值设置左上角,第二个值设置右上角,第三个值设置右下角,第四个值设置左下角
内联元素不能设置width和height,设置没效果。
内联元素可以设置水平方向的内边距,也可以设置垂直方向的内边距,但是不会影响页面的布局,内联元素可以设置边框,但是垂直边框不会影响布局,内联元素支持水平方向的外边框,水平方向相邻的外边框不会重叠而是求和。内联元素不支持垂直外边距。
将一个内联元素变成块元素
通过display样式可以修改元素类型样式
可选值:
inline:可以将一个元素作为内联元素显示
block:可以将一个元素设置成块元素显示
inline-block:将一个元素转换成行内块元素,可以使一个元素既有行内元素的特点又有块元素的特点,既可以设置宽高,又不会独占一行
none:不显示元素,并且元素不会在页面中继续占用位置
visibility:可以用来设置元素的隐藏和显示状态
可选值:
visible 默认值,元素默认会在页面显示
hidden 元素会隐藏显示
使用visibility:hidden;隐藏的元素虽然不会在页面中显示,但是他的位置会依然保持。