CSS背景和列表

2018-07-26

前端

background-color 设置元素的背景颜色属性：颜色|transparent
- transparent是全透明黑色的速记法，类似rgba(0,0,0,0)
- 颜色值（颜色名|RGB|十六进制）
- 背景区包括内容、内边距（padding）和边框、不包含外边距（margin）
background-image 把图像设置为背景属性：URL|none
- url地址可以是相对地址也可以是绝对地址
- 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
- 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复
background-position 设置背景图像的起始位置
- 属性：百分比|值|top|right|bootom|left|center
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
- 属性：scroll|fixed
- scroll:默认值，背景图片随滚动条滚动
- fixed:当页面的其余部分滚动时，背景图片不会移动
background-repeat 设置背景图像是否重复及如何重复
- 属性：repeat|no-repeat|repeat-x|repeat-y
background 简写属性，作用是将背景属性设置在一个声明中

盒子模型

####可以设置高和宽属性的HTML元素有

当然有替换元素也就有非替换元素：b em a span

边框设置
- 边框宽度（border-width:thin|medium|thick|长度值）
- 边框颜色（border-color:颜色|transparent）
- 边框样式（border-style：值|none|hidden） 4个方向来表示（上、下、左、右）
内边距设置：设置元素的内容与边框之间的距离（内边距或填充），分4个方向（上下左右）
- padding-top：长度值|百分比
- padding-right：长度值|百分比
- padding-bottom：长度值|百分比
- padding-left:长度值|百分比（值不能为负值）
外边距设置：设置元素与元素直接的距离（外边距），4个方向（上下左右）
- margin-top：长度值|百分比|auto
- margin-right：长度值|百分比|auto
- margin-bottom：长度值|百分比|auto
- margin-left：长度值|百分比|auto （值可为负值）

默认情况下，相应HTML块级元素存在外边距：body、h1~h6、p….
因此声明margin属性，覆盖默认样式
body,h1,h2,,h3,h4,h5,h6,p{margin:0；}

盒子的计算
- 在CSS中，width和height指的是内容区域的宽度和高度
- 增加内边距、边框和外边距不会影响内容区域的尺寸
- 但是会增加元素框的总尺寸
元素显示方式
display属性
- inline：元素将显示为内联元素，元素前后没有换行符
- block：元素将显示为块级元素，元素前后会带有换行符
- inlink-block：行内块元素。元素呈现为inline，但具有block相应特性
- none：次元素不会被显示

###CSS中的float

float中的四个参数
- float:left; 左浮动
- float:right; 右浮动
- float:none; 不浮动
- float:inherit; 继承

float属性实现文本环绕

float属性定义了元素在那个方向进行动
在HTML中任何元素都是可以浮动的

float浮动的真正原因以及副作用

使得元素脱离了标准流
浮动的元素不占有原空间
父元素塌陷及其他元素异位

浮动副作用的解决

HTML中的三种布局方式

1、标准流（普通流）
2、定位
3、浮动

position属性的意义

position属性决定了元素将如何定位
通过top、right、bottom、left实现位置的改变

position中的可选参数
static
relative（相对的）
- 参数特性：不脱离文档流，可以利用top、right、bootom、left进行定位，为子定位划分作用域，移动区域为整个网页
absolute（绝对的）
- 参数特性：脱离文档流，可以利用top、right、bootom、left进行定位，为子定位划分作用域，移动区域为整个网页
fixed (固定)
- 参数特性：脱离文档流，可以利用top、right、bootom、left进行定位，为子定位划分作用域，移动区域为整个窗口区
z-index 属性值：auto（默认值）、inherit（继承）、number(number指具体数值)
- 特性：可以设置元素的叠加顺序，但依赖定位属性
- z-index大的元素会覆盖z-index小的元素
- z-index为auto的元素不参与层级比较
- z-index为负值，元素被普通流中的元素覆盖

定位与边距的异同
margin、padding通过控制边距改变距离
position通过定位改变距离