HTML：页面布局和背景

一、页面布局

1. 定位

关于定位前面我有一篇比较详细的博客CSS 中 position属性和z_index

通过定位可以将页面中的元素,摆放到页面的任意位置
通过position来设置元素的定位

1. 可选值
   ① static 默认值 元素没有开启定位
   ② relative 开启元素相对定位 相对自己
   ③ absolute 开启元素绝对定位 相对父元素
   ④ fixed 开启元素的固定定位 相对浏览器
2. 相对定位 relative
   ① 开启元素的相对定位后,如果不设置偏移量元素不会发生任何变化
   ② 相对定位元素相对于其自身在文档流中的位置来定位
   ③ 相对定位的元素不会脱离文档流
   ④ 相对定位不会改变元素的性值,块元素还是块元素,内联元素还是内联元素
   ⑤ 相对定位的元素会提升一个层级
3. 绝对定位 absolute
   ① 开启元素的绝对定位后,如果不设置偏移量元素不会发生任何变化
   ② 绝对定位的元素是相对于距离他最近的开启了定位的祖先元素进行定位,如果所有的祖先元素都没有开启定位,则相对于浏览器窗口进行定位
   ③ 绝对定位的元素会完全脱离文档流
   ④ 绝对定位会改变元素的性值.内联变块,快的高度和宽度都会被内容撑开,并且不独占一行
   ⑤ 绝对定位的元素会提升一个层级
4. 固定定位 fixed
   ① 固定定位是一种特殊的绝对定位,它的特点大部分和绝对定位一样
   ② 不同的是,固定定位的元素永远都是相对于浏览器窗口进行定位的,并且不会随滚动条滚动
5. 偏移量
   ① 当元素开启定位以后,可以通过偏移量来设置元素的位置
   ② left 元素距离定位位置的左侧距离
   ③ top 元素距离定位位置的上边距离
   ④ right 元素距离定位位置的右侧距离
   ⑤ bottom 元素距离定位位置的底部距离
   ⑥ 一般情况下,只是用两个值即可定义一个元素的位置
6. 层级
   ① 定位元素 > 浮动元素 > 文档流中的元素
   ② 当元素开启定位以后,可以通过z-index来设置元素的层级
   ③ z-index值越高,元素越优先显示
   ④ 如果z-index值一样,或者都没有z-index则优先显示下边的元素
   ⑤ 父元素永远不会盖住子元素

2. 圆角

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性
当border-radius为50%的时候,正方形变为圆形.
语法:

border-radius: 1-4 length|% / 1-4 length|%;

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

二、背景

1. 设置透明度

1. rgba 红 绿 蓝 透明度
2. opacity 设置透明度

2. background-color : 背景颜色

3. background-image : url(图片路径) 背景图片

4. background-repeat : 设置是否平铺

1. repeat 默认值 背景图片会平铺显示
2. no-repeat 背景图片不重复
3. repeat-x 背景图片沿水平方向重复
4. repeat-y 背景图片沿垂直方向重复

5. background-position : 设置图片位置

1. 设置方式一 : 直接通过几个位置的关键字来设置图片位置
   top、left、right、bottom、center
   可以通过以上关键字任意两两组合形式,将背景图片设置到元素任意位置
   如果仅仅指定一个值,则第二个值默认为center
2. 设置方式二 : 可以直接指定两个值,来设置背景图片的偏移量
   例如 : background-position : x轴偏移量 y轴偏移量
   X轴偏移量,用来指定图片水平位置,＋向右移动,－向左移动
   Y轴偏移量,用来指定图片垂直位置,＋向下移动,－向上移动

6. background-size : 规定背景图片尺寸

使用方式 : background-size : length | percentage | cover | contain

1. cover : 放大,多余隐藏

   background-size:cover
   

   
2. contain : 放大至边角

   background-size: contain;
   background-position: center center;
   

   

7. background-attachment : 设置背景是否随页面滚动

1. background-attachment : scroll
   默认值 背景图片会随界面一起滚动

2. background-attachment : fixed
   背景图片不随页面滚动,会固定在页面指定位置
   设置该属性的背景,背景会永远相对于浏览器窗口进行定位,一般这种背景设置给body

   background-image: url(images/logo.jpg);
   background-repeat: no-repeat;
   background-position: center center;
   background-attachment: fixed;
   
   background: red url(images/logo.jpg) no-repeat center center fixed;
   

   注意:
   上面四句的效果和下面一句的效果是一样的,只需要把设置往background后面添加就可以,编译器会自动调整对应属性.