'''基础入门'''
#css指层叠样式表（Cascading Style Sheets)
#样式通常存蓄在样式表中
'''为什么要使用css'''
#样式定义如何显示htlm元素
#为了解决内容与表现分离的问题
#主要目的：可以让相同的一个页面在不同的浏览器当中呈现相同的样式
'''基本语法'''
'''css组成'''
# 选择器 声明 声明 (每个声明都是由属性和值组成）
# h1 {color:blue;font_size:12px;}
# 属性 值 属性 值
#在elements控制台右侧styles查看css
'''css选择器'''
#id选择器：#id{} (常用）
#class选择器：.className{} (常用）
#元素选择器：tag{} (常用）
#属性选择器：[属性]{}
'''css创建'''
#外部样式（常用）：<link= rel='styleheet' type='test/css' href='mystyle.css'>
#内部样式：
#<style>
#hr{color:sienna;}
#p{margin-left:20px;}
#</style>
#内联样式：<p style='color:sienna;margin-left:20px'>这是一个段落</p>
'''css定义背景'''
#background:简写属性，可以根据下面的所有值
#background-color:设置元素背景颜色
#background-image:把图像设置为背景
#background-position:设置背景图像的起始位置
#background-repeat:设置背景图像是否及如何重复
'''css设置文本样式'''
#color:设置文本颜色
#text-align:对齐元素中的文本
#text-decoration:向文本添加装饰
#text-indent:缩进元素中的文本首行
#vertical-align:设置元素的垂直对齐
'''css设置字体样式'''
#font:在一个声明中设置所有的字体属性
#font-family:指定文本的字体系列
#font-size:指定文本的字体大小
#font-style:指定文本的字体样式
#font-weight:指定字体的粗细
'''列表'''
#list-style:把所有用于列表的属性设置在一个人生命中
#list-style-image:将图像设置为列表项标志
#list-style-type:设置列表项标值的类型
'''表格'''
#border:设置表格边框
#border-collapse:设置表格的边框是否被折叠成一个单一的边框或者隔开
#width:定义表格的宽度
#text-align:表格中的文本对齐
#padding:设置表格中的填充
'''定位'''
#static:没有定位，遵循正常的文档流对象
#relative:相对定位：元素的定位是相对其正常位置
#fixed:元素的位置相对于浏览器窗口是固定位置
#sbsolute:绝对定位：元素的位置相对于最近的已定位父元素
#sticky:粘性定位：基于用户的滚动位置来定位
'''盒子模型'''
#在elements控制台右侧styles最下边查看
#Margin(外边框）：清楚边框外的区域，外边框是透明的
#Border(边框）：围绕在内边距和内容外的边框
#Padding(内边距）：清楚内容周围的区域，内边距是透明的
#Content(内容）：盒子的内容，显示文本和图像
'''网页布局'''
# 头部区域
# 菜单导航区域
#内容区域 内容区域 内容区域
# 底部区域
web端常见的bug分析
'''页面布局方面'''
#页面一行内容超长展示错乱
#解决方案：折行展示，超出的部分打点展示
#更变设备布局错乱
#做兼容测试
'''页面元素方面'''
#输入域提示信息不明确
#输入框要对输入的内容进行规定，说明清楚
#输入框内容包含htlm字符时出现异常
#设计测试用例时 web这一块需要覆盖下
'''功能方面'''
#功能不符合需求
#提示信息错误
#js脚本报错
'''更改不同步'''
#登录后打开多个页面
#在一个页面中操作修改内容
#在另一个页面中查看
#已经修改过的内容在另一个页面上没有体现
'''登录状态不同步'''
#打开多个页面
#其中一个页面登录成功
#另一个页面刷新
#没有同步为登录状态
'''其他'''
#页面请求失败
#加载时间太长