前端css小结

标签按照显示的效果可以分为：
块元素标签：默认占有一行
内联元素标签：默认可以排列在一行

常用html标签：

1、h1~h6: 标题标签，块元素标签，含有默认样式
2、P： 段落标签，块元素标签，含有默认样式
3、字符实体：如果想在网页上显示空格，“<”个“>”, 不能直接在代码中写，需要写成它们的字符实体，空格：  小于号：< 大于号 >
4、div 通用块元素标签，一般做嵌套使用，没有默认样式
5、a 链接标签，属于内联元素标签，通过herf属性设置链接地址，将a标签包裹img标签可以用图片做链接，默认链接地址写成“#”。
6、img 图片标签，属于内联元素标签，通过src属性设置图片地址，通过alt设置图片文字说明
span 通用内联元素标签，一般用在样式设置中

css引入页面的三种方式：

1、内联式：通过标签的style属性，把样式写在标签中
2、内嵌式：通过style标签，把样式写在head标签中
外链式：外部创建一个css文件，页面通过link标签引入

css选择器：

标签选择器：写法和标签名相同，会选择所有的标签
类选择器：名称任意，名称前需要加“.”，标签通过class属性引用
层级选择器：通过层级关系匹配标签
Id选择器： 通过id名称来选择标签
组选择器： 将通过的样式抽取出来写在一起，选择器之间用“，”隔开
伪类选择器： 定义鼠标悬停时标签的样式

相对地址和绝对地址：

相对地址：“./” 表示当前文件所在目录 “…/” 表示当前文件所在目录的上一级目录
绝对地址：做为了解，一般不用

列表标签相关：

新闻标题列表、文章标题列表、菜单要使用列表标签
列表创建的快捷键：ul>(li>a{列表文字})*8
多行操作：点击一行，然后按住alt键不放，再点击其他行，就可以选中多行
列表标签样式：list-style:none 去掉小圆点
表单，常用的标签：form标签 单行文本输入框 密码输入框 提交按钮 普通按钮创建 下拉框

设置块元素相对于父级水平居中的技巧：将块元素左右的margin值设置为auto，一般写成：margin:0px auto;

元素显示特性display

display:inline 将元素转化为内联元素
display:block 将元素转化为块元素
display:none 将元素隐藏
元素溢出样式设置：在父级上设置
overflow:visible 超出的部分显示
overflow:hidden 超出的部分隐藏
overflow:scroll 不管是否超出，都显示滚动条来滚动显示超出的部分
overflow:auto 根据实际情况，动态显示滚动条

表格

table表格、tr标签、th和td标签
设置表格边框合并样式：border-collapse:collapse

定位

Position：relative 相对定位 相对自己定位，原位置保留
Position：absolute 绝对定位 相对有定位的父级来定位，原位置丢掉
Position：fixed 固定定位 相对浏览器定位，原位置丢掉
设置定位偏移：left right top bottom
设置定位层级： z-index
定位元素水平垂直居中技巧
css权重：style的权重是1000， 标签选择器的权重是1，类选择器的权重是10

前端页面开发流程

1、得到效果图
2、创建项目目录
3、切图
4、新建html文件和css文件
5、参照效果图，编写html和css代码