css位置相关元素
1、border 是边框的意思,它可以设置粗细,多少像素,输入样式,solid是实线的意思,可以直接选择color边框的颜色。
也可以设置某个方向的边框,例如
设置一个div,让它的高和宽都为零
border-bottom:200 px 下边框粗细是200像素
border-left:200 px 左边框粗细也是200像素
border-top:200px 上边框
border-right:200 px 右边框
然后设置它的样式颜色,完全的组合起来就是四个不同颜色的三角形,组合成的正方形
2、设置一个无序列表的div,设置它的样式list-style:none可以去掉无序列表的小点或者是圆
加list-style-image:后面加图片的路径 ,可以把无序列表的点都换成图片
格式与布局
position:absolute; 是绝对定位
position:fixed;固定位置
相对于浏览器的边界
position:relative;相对定位
相对于原来应该出现的位置做改变
在有上面三个的前提上才可以使用top距上边,left距右多少像素,right右边,bottom下边,也可以使用负数
float;left按照指定的方向流,这个是像左流的意思,也可以向别的方像
上段话的样式中如果使用了流的话,在写下段话前加一段话 <div style="clear:both"></div>
z_index:0值越大,越靠上,层级高
其他的
display:none 元素隐藏
display:block 元素显示
display:inline-block 用在span,没办法用高和宽调整大小的
visibility:hidden 隐藏,位置还在
overflow:hidden 超出部分隐藏掉
overflow:scroll 超出部分显示滚动条
css位置相关元素的更多相关文章
- 【CSS】定义元素的位置
CSS定义元素的位置html元素的position属性,有4个属性值,分别是static.relative.fixed.absolute static: 1.默认值,一般不显式设置为static 2. ...
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- 【2017-03-31】JS-DOM操作:操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素
一.操作属性 1.什么是属性: <div class="div" id="div1" style="" ></div> ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css 属性相关
css属性相关 宽和高 width属性可以为元素设置宽度, height属性可以为元素设置好高度 块级标签才能设置宽度,内联标签的宽度由内容来决定. 字体属性 文字字体 font-family 可以把 ...
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- CSS的相关知识——背景,超链接,列表,表格,奇偶选择器
接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色 rgb函数设置 2.background-image 背景图片 url(“logo.jp ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
- 用 CSS 隐藏页面元素
用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...
随机推荐
- JAVA编译器常量
编译器常量的特点就是:它的值在编译期就可以确定.比如: final int i = 5; 再傻的编译器也能在编译时看出它的值是5,不需要到运行时.对于运行时常量,它的值虽然在运行时初始化后不再发生变化 ...
- TCP/IP 端口大全
1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 ...
- 给ECharts添加右键点击事件,实现右键功能菜单
由于项目的需要,使用ECharts 的力导向图来实现 整个EDW数据架构的血缘分析,由于ECharts并没有给组件定义有右键的事件,同时ECharts是开源的项目,所以研究了下源码,将ECharts2 ...
- 167. Add Two Numbers【easy】
You have two numbers represented by a linked list, where each node contains a single digit. The digi ...
- iOS开发-iOS 10 由于权限问题导致崩溃的那些坑
iOS开发-iOS 10 由于权限问题导致崩溃的那些坑 6月份的WWDC大会结束有一段时间了,相信很多开发者也是在努力工作的闲时用着Xcode8 Beta版学习着新的特性吧. 使用Xcode8写自己 ...
- jvm默认垃圾收集器
jdk1.7 默认垃圾收集器Parallel Scavenge(新生代)+Parallel Old(老年代) jdk1.8 默认垃圾收集器Parallel Scavenge(新生代)+Parallel ...
- C++之在类内部访问对象的私有成员
一.引言 今天看项目里的一段代码发现,竟然可以再类的成员函数中访问该类的对象的私有成员.感觉不可思议. 自己写的实例代码: #include <iostream> using namesp ...
- 基于jquery仿360网站图片选项卡切换代码
今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...
- Maven实战(插件管理)
1.前言 近期在做项目中,用到了Maven来管理项目,当理解了Maven的基础知识后,忽然看到好多的插件信息,所以在此总结一下.其有使用方法基本上都一样. 2.源码打包插件 我们能够在Apache的站 ...
- REST学习
RPC架构与REST架构 RPC:RPC将服务器看作一些列动作的集合(需要做某件事) REST:将服务器看作分布式对象集合,客户端通过调用这些对象上的方法来执行特定的任务,组件交互的可伸缩性.接口的通 ...