博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
03-13 块标签浮动 网页布局 绝对定位 相对定位
阅读量:6380 次
发布时间:2019-06-23

本文共 965 字,大约阅读时间需要 3 分钟。

无标题文档
浮动例子
无标题文档
小可爱
行高

 

无标题文档
定位

 

 

Float:浮动

  1.clear:both    要浮动的标签用div包起来,给div设宽高,设行高垂直居中

Line-heiht:行高

  1.行高  默认垂直居中

  2.最好对一行使用,如果换行了  标签高度就变了

浏览器兼容性

  1.将最外层的标签设置高宽,里面用百分比。

盒子模型

  1.从内道外,内容、填充物、边框、和别的物品的距离

  2.内容:html、内边距:padding 、边框:border、外边框:magin

自适应:box-sizing:border-box

  指定宽高、自适应边框、内边距、内容

  overflow : hidden   隐藏超出的内容

  dispaly : block     inline    inline - block   转换元素 ; 比如行内元素转块状元素

  1.dispaly:bock  转换为块标签

  2.dispaly:liline   转换为行标签、

  3.dispaly:liline-block 转换为行内块标签

  布局顺序

  先大色块再小色块再填写内容、( 高宽要设定 )、

  定位

  1.position  正确格式     position:定位    (加   top、left、right、buttom)

  2. fixed  绝对定位(相对窗口定位) 自身位置没有了(流氓广告)、

  3.absolute   绝对定位 (相对body)

       他会相对于最近的有position属性的父标签定位   最上层就是body

  4. relative   相对定位   有自身位置,用来微调

  cursor   变小手

  1.cursor: pointer 

  div 分层

  z-index(1-10 )

 

 

 

 

 

 

   

 

 

   

转载于:https://www.cnblogs.com/baobaoa/p/8560799.html

你可能感兴趣的文章
Windows Server 2008 多元密码策略配置
查看>>
.NET中的泛型和Java泛型中的类型擦除
查看>>
白利用的集大成者:新型远控木马上演移形换影大法
查看>>
2017必备的八款最佳反勒索软件工具
查看>>
以一当十的程序员不是传说
查看>>
云纵发布“纵横客“ 新一代互联网CRM开启餐饮行业营销新模式
查看>>
物联网到底何时才能称为“爆发”?
查看>>
《Java多线程编程核心技术》——1.2节使用多线程
查看>>
《VMware 网络技术:原理与实践》—— 2.3 OSI模型
查看>>
读书笔记之《实战Java虚拟机》(9):Class 文件结构
查看>>
1024城市峰会 | 当A.I.邂逅古都西安
查看>>
好看的卡片阴影
查看>>
理解 Mach O 并提高程序启动速度
查看>>
Vue实战篇(PC端商城项目)
查看>>
你要做的是产品经理,不是作图经理!
查看>>
JavaEE 项目常见错误汇总
查看>>
快速掌握Python基础语法(下)
查看>>
【Android自定义View】绘图之文字篇(三)
查看>>
适配iOS 11和iPhoneX屏幕适配遇到的一些坑
查看>>
Fetch API 简单封装
查看>>