前端html项目总结,前端实习项目总结一
关于定位总结
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项目总结,前端实习项目总结一相关推荐
- 视频教程-20年Nodejs教程零基础入门到项目实战前端视频教程-Node.js
20年Nodejs教程零基础入门到项目实战前端视频教程 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/java/python,专注于服务 ...
- web前端开发做项目,前端开发学习教程
毕业工作一年之后,有了转行的想法,偶然接触到程序员这方面,产生了浓厚且强烈的兴趣,开始学习前端,成功收割了大厂offer,开始了我的程序员生涯. 在自学过程中有过一些小厂的面试经历,也在一些小型的互联 ...
- SSM实战系列之商城系统(前端+后台)《一》项目需求分析
SSM实战系列之商城系统(前端+后台)<一> 1. 前言 这是一个电子商城整站的实战项目,包括前端的整体页面和后台管理页面. 从项目需求分析到整站开发的一整套项目开发过程记录. 也是作为本 ...
- react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
- GitHub 上值得前端学习的数据结构与算法项目
Hello,大家好,我是你们的 前端章鱼猫. 简介 前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了. 相信很多人都没有逛 GitHub 的习惯,因此总会有开 ...
- 前端框架Vue——vue-i18n ,vue项目中如何实现国际化,$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
- Struts项目中前端页面向后台页面传参中文出现乱码(Get请求)
问题描述:Struts项目中前端页面向后台页面传递中文参数值,中文值传递到后台后出现乱码并且以???形式出现 解决方法: 1.前端页面js文件中使用encodeURI()方法将所传递的中文值加密起来( ...
- Web项目中前端页面引用外部Js和Css的路径问题
公众号:南宫一梦 Web项目中前端页面引用外部Js和Css的路径问题 一般我们在做Web项目时,通常会将多个页面引入的公共js和css文件抽取出来,单独写成一个公共文件,以期方便各个页面单独引入,达到 ...
- vue项目微前端试水
文章目录 微前端概念 主应用(安装qiankun) 1.存放注册的微应用 2.注册微应用 3.启动微应用 微应用(无需安装依赖) 1.修改运行时的public-path 主要解决的是微应用动态载入的 ...
- SpringBoot+vue仿网易云音乐网站(三)- Springboot项目以及前端vue基础搭建
一.基础项目搭建 1. 新建springboot项目 在搭建Springboot项目之前,需要的基础环境:JDK(8).Maven,工具Idea.项目就新建一个简单的springboot项目就行了,具 ...
最新文章
- ToDesk远程控制软件
- ElasticSearch—基本概念
- python整形怎么切片_python 切片操作 slice
- C#中string[]数组和liststring泛型的相互转换 【转】
- C#高级编程----反射的小结
- 同义词林Java如何更新维护,solr词库实时更新维护
- HA-reshacker
- appium2.0+ 单点触控和多点触控新的解决方案
- 达梦数据库DEM(企业管理器)部署实战
- 企业知识管理平台的作用及功能
- pycharm 自动补全代码提示前符号f,m , p,c,v是什么意思?
- 利用windows 系统的画图工具获取图片上某一点的颜色RGB值
- ohci之usb_submit_urb 一
- NO.2 微信第三方平台(小程序)授权流程技术说明
- GBase8s数据库REFERENCES 子句
- python怎样按某一列值拆分Excel表格
- java vbs_一键定位配置JAVA SDK 环境变量 VBS脚本全自动操作正式开源
- LVGL 8.2.0 Stacked area chart
- 广州百田笔试题(武大专场)
- 齐家网、土巴兔、酷家乐,千亿市值路上谁会先圆梦?
热门文章
- gms认证流程_Android P(9.0)GMS认证新要求
- 沟通CTBS助×××系统巨头解决南北互通问题
- 闪灵CMS插件自动采集文章主动推送给搜索引擎
- scratch作品_孩子的scratch作品只能演示?教你把它三步变为电脑软件
- 金蝶k3单据编码规则_金蝶k3套打格式设置图文教程(凭证与供应链单据)
- [填坑]ubuntu16.04安装腾达U12无线网卡驱动
- cuda10.2+ubuntu18.04+docker视频编解码
- elementUI select 默认选中
- 【Linux操作系统基础】第一章 Linux命令行使用技巧
- SpringCloud第一章 Euraka服务注册与发现组件