03前端_css盒子

盒子模型

css中的盒子是由element、padding、border、margin组成 element：元素内容 padding：内边距：是内容距离内边框的距离 border：边框 margin：外边距：是元素和元素之间的距离

盒子的属性

内容的宽度和高度

• width宽度属性：宽度值|百分比|auto

• max-width最大宽度属性：宽度值|百分比|auto

• min-width最小宽度属性：宽度值|百分比|auto

• height高度属性：高度值|百分比|auto

• max-height最大高度属性：高度值|百分比|auto

• min-height最小属性：高度值|百分比|auto

什么样的氧元素可以设置width和height属性

• 块元素<p>、<div>、<ul>、<ol>、<li>、<dl>、<form>、<hr>、<h1>~<d6>..

• 替换元素<img>、<input>、<textarea>..

border属性

• border-width边框宽度属性：thin|medium|thick|值|百分比|auto

• border-color边框颜色属性：三种颜色表示方法：十六进制数、rgb、字符

• border-style边框样式：值top、right、bottom、left |none|hidden/solid/dotted...

• border缩写：宽度|样式|颜色

padding属性

• padding-top/right/bottom/left：长度值|百分比

margin属性

• margin-top/right/bottom/left：长度值|百分比|auto

• margin值为auto可以实现水平方向的居中显示效果

display属性

• display属性：block|inline|inline-block

  • inline-block将块元素转换为行内块元素（多个块元素在一行显示）

  • block将行内元素（一行显示多个行内元素）转换为块元素（每个元素默认占一行）

  • inline将块元素每个元素默认占一行）转换为行内元素（一行显示多个行内元素）

  • none元素不会显示

background属性

• background属性

  • background-color设置背景颜色 rgb()|16进制|颜色名|transparent透明度|inherit继承父级元素的背景颜色

  • background-image设置背景图片，背景图片和背景颜色都存在的情况，显示背景图片 url(‘URL‘)|none|inherit

  • background-repeat只针对背景图片有效 repeat-x|repeat-y|no-repeat|inherit

  • background-attachment设置背景图片是否固定或者随着页面滚动 scroll|fixed|inherit

  • background-position设置背景图片的起始位置 top left|top right|bottom left|bottom right|center|.....如果只规定了一个值，那么另 一个值为center

list-style属性

• list-style属性

  • list-style-type类型 disc|circle|square|lower-roman|upper-roman|lower-alpha...

  • list-style-position设置列表位置inside|outside|inherit

  • list-style-image使用图像代替列表项标记url(‘URL‘)