盒子模型、 CSS背景和列表

盒子模型
（1）宽度
-width：长度值 | 百分比 | auto
-max-width：长度值 | 百分比 | auto
-min-width：长度值 | 百分比 | auto
（2）高度
-height：长度值 | 百分比 | auto
-max-height：长度值 | 百分比 | auto
-min-height：长度值 | 百分比 | auto
（3）其他可以设置高度和宽度的元素
-块级元素：<p>、<div>、<h1>~<h6>、<ul>、<li>……
-替换元素：<img>、<input>、<textarea>……
（4）边框：border
-边框宽度（border-width）
-边框颜色（border-color）
-边框样式（border-style）
也可以加设左右单边框或者上下
（5）padding内边距
-padding-top：长度值 | 百分比
-padding-right：长度值 | 百分比
-padding-bottom:长度值 | 百分比
-padding-left:长度值 | 百分比
（6）margin外边距
-margin-top：长度值 | 百分比 |auto
-margin-right：长度值 | 百分比 |auto
-margin-bottom:长度值 | 百分比 |auto
-margin-left:长度值 | 百分比 |auto
·垂直方向，两个相邻元素都设置外边距，外边距会发生合并
合并后外边距高度=两个发生合并外边距的高度中最大值
（7）盒子计算
盒子在页面中所占的宽度
是由左边距+左边框+左填充+内容宽度
+右填充+右边框+右边距组成

盒子在页面中所占的高度
是由上边距+上边框+上填充+内容高度
+下填充+下边框+下边距组成
（8）display
display属性：
-inline：元素将显示为内联元素，元素前后没有换行符
-block：元素将显示为块级元素，元素前后会带有换行符
-inline-block：行内块元素，元素呈现为inline，具有block相应特性
-none：此元素不会被显示
CSS背景和列表
1.背景样式
·background-color：设置元素的背景颜色
·background-image：把图像设置为背景
说明：
-url地址可以是相对地址也可以是绝对地址
-元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
-默认的，背景图像位于元素的左上角，并在说和垂直方向上重复。
（1）背景图片重复：background-repeat
background-repeat：repeat | no-repeat | repeat-x | repeat-y
·background-position：设置图像的起始位置
·background-attachment：背景图像是否固定或随着页面的其余部分滚动
-background-attachment：scroll | fixed
scorll:默认值，背景图片随滚动条而滚动
fixed：当页面的其余部分滚动时，背景图片不会移动
·background-repeat：设置背景图像是否重复计及如何重复
·background：简单属性，作业是将背景属性设置在一个声明中
2.列表样式
·list-style-type：设置列表项标志的类型
none | 关键词
·list-style-image：将图像设置为列表项标志
URL | none
·list-style-position：设置列表中列表项标志的位置
-inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
-outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
·list-style：简写属性。用于 把所有列表的属性设置于一个声明中

 

好文要顶 关注我 收藏该文