CSS布局技巧(2)|青训营

94 阅读2分钟

弹性盒子布局

一、外边距

外边距指盒子模型的边框与其他盒子之间的距离,使用margin属性定义。

margin的默认值是0。外边距没有继承性,也就是说给父元素设置的margin值并不会自动传递到子元素中。

margin该属性可以有1- 4个值,表示的含义

(1) margin: 20px; //表示4个方向的外边距都是20px

(2) margin: 20px 5px; //表示上下外边距是20px,左右外边距是5px

(3) margin: 10px 5px 15px; //表示上外边距是10px,左右外边距是5px,下外边距是15px

(4) margin: 10px 5px 15px 20px; //表示上外边距是10px,右外边距是5px,下外边距/是15px,右外边距是20px

四个外边距的顺序从上开始,按照顺时针方向设置。

也能使用margin-top、margin-right、 margin-bottom和margin-left四个属性对上外边距、右外边距、下外边距和左外边距分别设置。

二、CSS边框

元素的边框( border )是围绕元素内容和内边距的一条或多条线。CSS中使用border属性设置元素边框的样式、宽度和颜色。

案例:

a1{ border-style: solid; border-color: red rgb(25%,35%,45%) #00ff00 blue; }

三、内边距

内边距指盒子模型的边框与显示内容之间的距离,使用paddig属性定义。

案例:设置h1元素的各边都有10像素的内边距 h1 {padding: 10px;}

案例:按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值。 h1 {padding: 5px 6px 7px 8px;}

同样也可以通过padding-top、padding -right、padding-bottom、 padding-left四个单独的属性,分别设置上、右、下、左内边距。