css定位
时间:2019-11-14
本文章向大家介绍css定位,主要包括css定位使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1.css定位:改变元素在页面的位置
属性:
position :static(偏移量不起效果),relative,absolute,fixed(固定元素位置)
z-index:1,2,3(前后位置)
2.浮动:
属性:
float:left,right,none,inherit(从父级继承属性)
clear:去除浮动属性(包括继承来的)left,right,both,inherit
3.浮动的应用:瀑布流
.html
<body>
<div id="div1">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
</ul>
<ul>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li>
</ul>
<ul>
<li><img src="img/7.jpg"></li>
<li><img src="img/8.jpg"></li>
</ul>
</div>
</body>
.css
*{
margin: 0px;
padding: 0px;
}
li{
list-style:none;
}
#div1{
width: 500px;
height: auto;
margin: 20px auto;
}
ul{
width: 20px;
float: left;
}
4.css3选择器
(1)元素选择器h1,a等
(2)选择器分组 h1,h2{}或 *{margin:0px;
padding:0px;}
(3)类选择器详解
结合元素选择器a.class{}
多类选择器.class.class{} (class=p1 p2 -> .p1.p2)
(4)ID选择器详解
ID只能在文档中使用一次,类可以多次
ID选择器不能结合使用
当使用jS时,需要ID
(5)属性选择器详解
[title]{}
例:<a href =" ">极客学院</a>
[href]{ }
(6)后代选择器
(7)子元素选择器
(8)相邻兄弟选择器
原文地址:https://www.cnblogs.com/try-hard/p/11858402.html
- 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 实例
- Android 实现可任意拖动的悬浮窗功能(类似悬浮球)
- Android仿抖音右滑清屏左滑列表功能的实现代码
- 利用织梦CMS0day注入漏洞渗透测试
- nodejs中追加内容到文件
- android实现滚动文本效果
- Android实现View的拖拽
- 诊断日志知多少 | DiagnosticSource 在.NET上的应用
- Android Studio 4.0新特性及升级异常问题的解决方案
- Android Studio 4.0 正式发布在Ubuntu 20.04中安装的方法
- Android Studio 4.0 新功能中的Live Layout Inspector详解
- Android实现滑动刻度尺效果
- Android 仿微信发动态九宫格拖拽、删除功能
- android自定义等级评分圆形进度条
- Android Fragment实现底部通知栏
- Flutter实现局部刷新