前端html css布局介绍
时间:2018-09-18
本文章向大家介绍前端html css布局,主要包括盒子模型、清除浮动、两种清除浮动方法的使用场景、绝对定位特点、隐藏按钮文字的小技巧、媒体查询media等等,需要的朋友可以参考一下
1、盒子模型的第一层到第五层:
border、padding+content、background-image、background-color、margin
2、清除浮动。对受到浮动影响的标签作以下操作:
1、clear: both;
2、clear: right; clear: left;
3、设置宽度width: 100%(或者固定宽度)+overflow: hidden;
1、clear: both;
2、clear: right; clear: left;
3、设置宽度width: 100%(或者固定宽度)+overflow: hidden;
3、两种清除浮动方法的使用场景:
1、当子元素设置了浮动,父元素没有设置浮动而导致的父元素高度不能自动扩展,缩成一条线,子元素从父元素中溢出时,适合使 用同时设置width:100%(或固定宽度值)+overflow:hidden的方式来清除浮动;此法可同时去除紧邻的块级受到的浮动影 响,而不需要再对受到浮动影响的紧邻块级元素设置去除浮动。
2、如果是紧邻的块级元素受到浮动影响,对该受到影响的块级设置clear:both或者clear:left,clear:right更为合适。
注意:width设置为100%就是继承父容器的宽度。左右撑满整个容器,为自己清除浮动创建条件。再加溢出隐藏,就可以把包裹 浮动的部分去除。
4、绝对定位特点:
- 建立了以包含块位基准的定位
- 完全脱离标准文档流
- 随即拥有偏移属性跟z-index属性
- 未设置偏移量时:(left、top)
无论是否存在已经定位的祖先元素,都保持在元素初始位置 脱离标准文档流 - 设置偏移量时:偏移参照的基准:
无已定位的祖先元素:以<html>为偏移参照基准;
有已定位的祖先元素:以距其最近的已定位的祖先元素为偏移参照基准。
注意:当一个元素设置了绝对定位,没有设置宽度时,元素的宽度根据内容进行调节。
练习题:已知一个设置了绝对定位的元素b,位于其父元素a中,a元素为静态元素,则b元素将以(html)为基准进行偏移。
答案是因为a为静态位置,所以要以根元素为基准进行偏移,也就是html元素(静态定位是position:static,是元素的默认定位属性。只有设置了absolute或relative或fixed才算已定位的父级元素。
5、隐藏按钮文字的小技巧:
text-indent: -999px;
overflow: hidden;
先使用text-indent:-999px;语句把被设置元素“挤出去”了,然后设置溢出的元素都隐藏起来,也就是被挤出去的元素隐藏起来。
6、媒体查询:
可被用于css中的@media和@import规则上,也可被用在HTML和XML中。
1)@media screen and (width: 800px){...}
2)@import url(example.css) screen and (width: 800px);
3)<link media="screen and (width: 800px)" rel="stylesheet" href="example.css"/>0
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)(A.思维题,B.思维题)
- 设计模式六大原则(1):单一职责原则
- 设计模式六大原则(2):里氏替换原则
- Selenium2+python自动化72-logging日志使用
- Codeforces Round #395 (Div. 2)(A.思维,B,水)
- php实现图形计算器
- Selenium2+python自动化73-定位的坑:class属性有空格
- 华中农业大学第五届程序设计大赛网络同步赛题解
- Java构造方法与析构方法实例剖析
- 5.训练模型之利用训练的模型识别物体
- KMP算法学习(详解)
- 查找算法的实现(C/C++实现)
- HDU 1495 非常可乐(数论,BFS)
- Selenium2+python自动化74-jquery定位
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 实验8 OpenGL太阳系动画
- Django实现列表页商品数据返回教程
- 实验9 OpenGL光照
- Python实现多线程下载脚本的示例代码
- Android自定义控件仿iOS滑块SwitchButton
- kotlin gson反序列化默认值失效深入讲解
- Android使用Volley实现上传文件功能
- 工作中使用jasmine遇到的一个html element和Component绑定属性失去同步的问题
- Android使用Volley框架定制PostUploadRequest上传文件
- Android实现横向滑动卡片效果
- 在jasmine beforeEach里修改UI元素的一个side effect
- Android实现头像上传功能
- 关于jasmine里debugElement.query和fixture.detectChanges的依赖关系
- 使用python批量转换文件编码为UTF-8的实现
- rxjs operator学习笔记