关于定位总结

position:[static,absolute,relative,fixed]

默认值:static

适用于:除display属性定义为table-column-group|table-column之外的所有元素。

static:对象遵循常规流。此时4个定位偏移属性不会被应用。

relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这四个定位偏移属性进行偏移时不会影响常规流中的任何元素。(这里要特别注意,它的意思是,用了relative定位,top,right,bottom,left只是让元素发生偏移而不是改变了常规流,此时这个元素能改变常规流的是它的margin,padding,border)

absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(这里要注意的是它的参照物,定位的祖先元素,也就是它的祖先元素一定可以用top,bottom,left,right来定位)

fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

center(css3):与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。

page(css3):与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。

关于布局总结

display:none|inline|block|inline-block|table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group

默认值:inline。

none:隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间。

inline:指定对象为内联元素。

block:指定对象为块状元素。

list-item:指定对象为列表项目。

inline-block:指定对象为内联块元素。

table:指定对象作为块元素级表格。

inline-table:指定对象作为内联元素级的表格。类同于html标签。

table-caption: 指定对象作为表格标题。类同于html标签(CSS2)

table-cell: 指定对象作为表格单元格。类同于html标签(CSS2)

table-row: 指定对象作为表格行。类同于html标签

(CSS2)

table-row-group: 指定对象作为表格行组。类同于html标签(CSS2)

table-column: 指定对象作为表格列。类同于html标签(CSS2)

table-column-group: 指定对象作为表格列组显示。类同于html标签(CSS2)

table-header-group: 指定对象作为表格标题组。类同于html标签(CSS2)

table-footer-group: 指定对象作为表格脚注组。类同于html标签(CSS2)

float:none|left|right

默认值:none

none: 设置对象不浮动

left: 设置对象浮在左边

right: 设置对象浮在右边

float在绝对定位和display为none时不生效。

clear:none|left|right|both

适用于:块级元素

none: 允许两边都可以有浮动对象

both: 不允许有浮动对象

left: 不允许左边有浮动对象

right: 不允许右边有浮动对象

visible:visible|hidden|collapse

默认值:visible

visible: 设置对象可视

hidden: 设置对象隐藏

collapse: 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。

overflow

overflow-x

overflow-y:visible|hidden|scroll|auto

默认值:visible

visible: 对溢出内容不做处理,内容可能会超出容器。

hidden: 隐藏溢出容器的内容且不出现滚动条。

scroll: 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。

auto: 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值

遇到过得问题

关于浮动的应用,当两个div想要在一个水平面时,一个设置左浮动,另一个设置右浮动,而下面的一个div需要清除浮动。则达到效果。

前端html项目总结,前端实习项目总结一相关推荐

  1. 视频教程-20年Nodejs教程零基础入门到项目实战前端视频教程-Node.js

    20年Nodejs教程零基础入门到项目实战前端视频教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服务 ...

  2. web前端开发做项目,前端开发学习教程

    毕业工作一年之后,有了转行的想法,偶然接触到程序员这方面,产生了浓厚且强烈的兴趣,开始学习前端,成功收割了大厂offer,开始了我的程序员生涯. 在自学过程中有过一些小厂的面试经历,也在一些小型的互联 ...

  3. SSM实战系列之商城系统(前端+后台)《一》项目需求分析

    SSM实战系列之商城系统(前端+后台)<一> 1. 前言 这是一个电子商城整站的实战项目,包括前端的整体页面和后台管理页面. 从项目需求分析到整站开发的一整套项目开发过程记录. 也是作为本 ...

  4. react实战项目_前端学习路线图--从网页设计到项目开发

    前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...

  5. GitHub 上值得前端学习的数据结构与算法项目

    Hello,大家好,我是你们的 前端章鱼猫. 简介 前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了. 相信很多人都没有逛 GitHub 的习惯,因此总会有开 ...

  6. 前端框架Vue——vue-i18n ,vue项目中如何实现国际化,$t的用法

    前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示

  7. Struts项目中前端页面向后台页面传参中文出现乱码(Get请求)

    问题描述:Struts项目中前端页面向后台页面传递中文参数值,中文值传递到后台后出现乱码并且以???形式出现 解决方法: 1.前端页面js文件中使用encodeURI()方法将所传递的中文值加密起来( ...

  8. Web项目中前端页面引用外部Js和Css的路径问题

    公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题 一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...

  9. vue项目微前端试水

    文章目录 微前端概念 主应用(安装qiankun) 1.存放注册的微应用 2.注册微应用 3.启动微应用 微应用(无需安装依赖) 1.修改运行时的public-path 主要解决的是微应用动态载入的 ...

  10. SpringBoot+vue仿网易云音乐网站(三)- Springboot项目以及前端vue基础搭建

    一.基础项目搭建 1. 新建springboot项目 在搭建Springboot项目之前,需要的基础环境:JDK(8).Maven,工具Idea.项目就新建一个简单的springboot项目就行了,具 ...

最新文章

  1. ToDesk远程控制软件
  2. ElasticSearch—基本概念
  3. python整形怎么切片_python 切片操作 slice
  4. C#中string[]数组和liststring泛型的相互转换 【转】
  5. C#高级编程----反射的小结
  6. 同义词林Java如何更新维护,solr词库实时更新维护
  7. HA-reshacker
  8. appium2.0+ 单点触控和多点触控新的解决方案
  9. 达梦数据库DEM(企业管理器)部署实战
  10. 企业知识管理平台的作用及功能
  11. pycharm 自动补全代码提示前符号f,m , p,c,v是什么意思?
  12. 利用windows 系统的画图工具获取图片上某一点的颜色RGB值
  13. ohci之usb_submit_urb 一
  14. NO.2 微信第三方平台(小程序)授权流程技术说明
  15. GBase8s数据库REFERENCES 子句
  16. python怎样按某一列值拆分Excel表格
  17. java vbs_一键定位配置JAVA SDK 环境变量 VBS脚本全自动操作正式开源
  18. LVGL 8.2.0 Stacked area chart
  19. 广州百田笔试题(武大专场)
  20. 齐家网、土巴兔、酷家乐,千亿市值路上谁会先圆梦?

热门文章

  1. gms认证流程_Android P(9.0)GMS认证新要求
  2. 沟通CTBS助×××系统巨头解决南北互通问题
  3. 闪灵CMS插件自动采集文章主动推送给搜索引擎
  4. scratch作品_孩子的scratch作品只能演示?教你把它三步变为电脑软件
  5. 金蝶k3单据编码规则_金蝶k3套打格式设置图文教程(凭证与供应链单据)
  6. [填坑]ubuntu16.04安装腾达U12无线网卡驱动
  7. cuda10.2+ubuntu18.04+docker视频编解码
  8. elementUI select 默认选中
  9. 【Linux操作系统基础】第一章 Linux命令行使用技巧
  10. SpringCloud第一章 Euraka服务注册与发现组件