css元素

背景

• 背景颜色：background-color(默认：透明)

• 背景图片：background-image(背景纹理、图标等) 、、<img>(文章配图、核心内容图等，须被识别交互时使用)

• 背景图片位置：background-position:x, y

• 背景平铺：background-repeat

• 背景图像固定：background-attachment :scroll(滚动) && fixed(固定)

• 背景色透明度：background-rgba()

定位(定位模式+边偏移)

• 静态：无定位

• 相对定位relative：不脱标

• *绝对定位absolute：‘子绝父相’

• 固定定位fixed

css的三大特性

• 层叠性：解决样式冲突问题，出现问题就覆盖，遵循就近原则

• 继承性：子标签会继承父标签的某些样式

• 优先级：继承<标签<类、伪类<id<行内样式style<!important

pc端传统网页布局的三种方式

• 普通流(标准流)：标签按规定好默认方式排列

• 浮动float

  • 可以让多个块级元素一行内排列显示

  • 会具有行内块元素特性

  • 准则：采用标准流的父元素排列上下位置，任何内部子元素采取浮动排列位置

• 定位

  • 可以让盒子自由的在某个盒子内移动/固定，且可以压住其他盒子

  • ==定位模式+边偏移

清除浮动的方法

• 额外标签法：空标签clear

• 父级添加overflow属性

• 父级添加after元素

• 父级添加双伪元素

css书写顺序

1. 布局定位属性：display、float、clear

2. 自身属性：width、height、margin、padding、border

3. 文本属性：color、font、text

4. 其他属性

页面布局的整体思路

1. 确定页面版心

2. 分析页面行模块，及每个行模块中的列模块

3. 一行中的列模块，经常浮动布局，先确定每个列的大小再确定列的位置

4. 先结构再样式

5. 先理清布局结构，在写代码~!