CSS学习之CSS3 盒模型盒模型

image

设置元素大小

width 性 

用于设置元素的宽度

height 属性

用于设置元素的高度

代码示例

width: 200px;
height: 100px;
background-color: #0000FF;

image

设置外边距

margin属性

margin 属性为给定元素设置所有四个(上右下左)方向的外边距属性。也就是 margin-topmargin-rightmargin-bottom 和 margin-left 四个外边距属性设置的简写。

代码示例

margin: auto; /* 上边和下边:无外边距 */
/* 水平方向居中        */
margin:25px 50px 75px 100px;
/* 上边距为25px右边距为50px下边距为75px左边距为100px */

image

设置边框

设置边框颜色

border-color 属性

CSS 属性 border-color 是一个用于设置元素四个边框颜色的快捷属性

代码示例

border-color:#0000ff;
/* 四条边框都为蓝色 */
border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);
/* 四条边框颜色不相同,排序顺序为上右下左 */

image

设置边框样式

border-style 属性

border-style 是一个 CSS 简写属性,用来设定元素所有边框的样式。

代码示例

border-style:solid;

image

设置边框宽度

border-width

border-width CSS 简写属性用于设置元素边框的宽度。

代码示例

border-width:5px;
/* 注意: "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。 */

image

image

设置内边距

padding 属性

CSS padding(填充)是一个简写属性,定义元素边框与元素内容之间的空间,即上下左右的内边距。

代码示例

padding:25px 50px 75px 100px;
/* 上填充为25px右填充为50px下填充为75px左填充为100px */

image

 

© 版权声明
THE END
喜欢就支持一下吧
点赞7 分享