CSS用法总结(持续更新)
一、html,body{height:100%}
解决了容器高度不足(容器高度由子元素高度决定,而%按照父元素的百分比),无法用%布局页面的问题
把html和body的高度设置为浏览器高度,此时会出现下拉栏, 给body去掉外边框即可去掉下拉栏 : body{margin:0}
二、@media screen and ( max-width: 像素值 ) {CSS语句}
解决了适配不同分辨率时的页面布局问题
响应式布局,根据设备屏幕像素值来设定CSS,用来适配不同分辨率的设备.括号内也可以是min-width或min-height
关于响应式布局详细内容 : https://blog.csdn.net/qq_37968920/article/details/82424009
三、opacity:值
设置元素透明度,值为0-1之间,1是不透明,0是彻底透明.
四、box-sizing:border-box
功能是把内边距和边框放入设定的宽高之内.有两个属性值 :
当值为border-box时 : 为元素设定的宽度和高度将包括元素的内边距(padding)和边框(border)
当值为content-box时 : 将在已经设定好的宽和高之外绘制元素的内边距和边框
五、position
用于设定元素的位置,有以下属性值:
static : 默认值,static的元素不会被特殊定位(不会被positioned),当被设置为static以外的值时,表示它会被positioned
relative : 可以相对定位元素的位置(top,right,bottom,left)当元素偏离位置时,其他元素不受影响,不会改变位置来弥补它偏离后剩下的空隙,不设置位置的时候表现的和static一样
fixed : 相对于视窗来定位,所以即使画面滚动,fixed元素仍会停留在相同的位置(相对于视窗的相同位置,比如弹窗广告)
absolute : 相对于最近的positioned父元素来定位(所以static不算),如果没有positioned的父元素,那么相对于body来定位.
六、float:值
用于实现文字环绕图片效果,设定元素浮动于右侧(right)还是左侧(left),也可以应用于图片之外的其他元素以布局页面(浮动布局)
七、clear
设定文字是否可以浮动图片,clear:left是左侧禁止浮动,clear:both是两侧均不允许浮动.用于<p>标签
八、overflow (清除浮动)
规定如果内容溢出一个元素的框,会怎么处理 :
visible : 默认值,元素会超出元素框
hidden : 将超出部分隐藏
scroll : 超出内容被隐藏,但显示滚动条,可以拖动查看
auto : 类似scroll
九、vertical-align (设置元素的垂直对齐方式)
属性有 : top, middle, bottom, sub, super, text-top, text-bottom
十、columns属性
可以很轻松地实现文字多列布局
最新文章
- find your present (感叹一下位运算的神奇)
- python 使用virtualenvrapper虚拟环境管理工具
- TreeList用法(1)
- C++学习——类的继承
- 阻止系统自动睡眠的小软件,附C#制作过程
- nginx源代码分析--高性能server开发 常见的流程模型
- malloc内存分配与free内存释放的原理
- POJ 2989 All Friends 极大团计数
- Python初学——窗口视窗Tkinter
- sudo:无法解析主机 解决方案
- ubuntu下 将证书导入java的cacerts证书库
- 异步async、await和Future的使用技巧
- 第二章 JavaScript总结(下)
- Linux学习笔记之八————vim编辑器常用命令总结
- 自学Aruba4.3-Aruba AC基础配置(2)
- 使用Git,如何忽略不需要上传的文件(配置文件)
- Python+Selenium笔记(十八):持续集成jenkins
- sass使用指南
- python教程(三)&#183;自定义函数
- (转)使用百度 BAE做SVN服务器
热门文章
- 【Node100In1】01.去异步,解决掉Node.js万恶的回调陷阱
- 某神秘公司 RESTful、共用接口、前后端分离、接口约定的实践
- 每天学点SpringCloud(九):SpringCloud最常用配置详解
- Linux 下 安装Python第三方模块工具箱pip,以及用pip安装的方法
- Mysql实现null值排在最前或最后
- mstsc远程报:这可能是由于CredSSP 加密Oracle修正的两种完美解决方法
- 你不可错过的Java学习资源清单(包含社区、大牛、专栏、书籍等)
- 不得不提的volatile及指令重排序(happen-before)
- Salesforce Sales Cloud 零基础学习(三) Lead &; Opportunity &; Quote
- 【整理】WDK 和 DDK异同