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属性
可以很轻松地实现文字多列布局
CSS用法总结(持续更新)的更多相关文章
- css用法(持续更新ing)
*:选择所有节点 #container:选取id为container的节点 .container:选取所有class包含container的节点 li a:选取li下的所有a节点 ul +p:选取ul ...
- 标准化命名CSS类,持续更新
放链接.持续化更新,以后可能会用上.https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css
- css 技巧 (持续更新)
1.滚动条样式 /*自定义滚动条-----隐藏型*/ .scroll::-webkit-scrollbar-track{ border-radius: 1px; } .scroll::-w ...
- vue中的一些用法,持续更新中......
1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...
- 记一些stl的用法(持续更新)
有些stl不常用真的会忘qwq,不如在这里记下来,以后常来看看 C++中substr函数的用法 #include<string> #include<iostream> usin ...
- MySQL黑科技用法总结(持续更新)
1.利用set插入数值 insert [into] 表名 set 列=值. 2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...
- 【小摘抄】关于C++11下 string各类用法(持续更新)
http://blog.csdn.net/autocyz/article/details/42391155 提供了最简单的详解 下列对本人近期开发中的一些心得体会进行摘抄 1.string按照字符进行 ...
- xpath用法(持续更新ing)
article:选取所有article元素的所有子节点 /article:选取根元素article article/a:选取所有属于article的子元素的a元素 //div:选取所有div元素 ar ...
- 原生开发之css样式问题(持续更新)
·移动端开发将div高度设置为设备高度 div{ Height:100vh; } · select选择器文字设置: /*select文字右对齐*/ select{ direction: rtl; } ...
随机推荐
- 网络编程懒人入门(八):手把手教你写基于TCP的Socket长连接
本文原作者:“水晶虾饺”,原文由“玉刚说”写作平台提供写作赞助,原文版权归“玉刚说”微信公众号所有,即时通讯网收录时有改动. 1.引言 好多小白初次接触即时通讯(比如:IM或者消息推送应用)时,总是不 ...
- 吴恩达机器学习笔记24-神经网络的模型表示1(Model Representation of Neural Network I)
神经网络模型建立在很多神经元之上,每一个神经元又是一个个学习模型.这些神经元(也叫激活单元,activation unit)采纳一些特征作为输出,并且根据本身的模型提供一个输出.下图是一个以逻辑回归模 ...
- MySQL结构
MySQL属于关系型数据库管理系统(RDBMS),使用RDBMS时,最常见的系统结构就是客户端/服务器类型(C/S类型)这种结构. 服务器指的是用来接收其他程序发出的请求,并对该请求进行相应处理的程序 ...
- Kali学习笔记4:DNS信息收集
DNS记录 A记录 A记录是用来创建到IP地址的记录. A记录设置技巧 1.如果想创建不带www的记录,即cnblog.com,在主机记录中填写@或者留空,不同的注册商可能不一样. 2.创建多个域名到 ...
- Core 接口发布报错
An error occurred while starting the application 提示:启动应用程序时发生错误 这个错误在Startup启动项里面 要找具体的报错位置 如下 这样就可以 ...
- IT老人,给后辈的十一点建议
我已经在IT业打拼9年了,从完全自学成为技术团队leader到PM也确实总结了不少的经验,自己也经常跟学弟学妹聊天,分享职场经验,当老家有人报考计算机或者从事相关工作时也会咨询我的意见,我很明白IT人 ...
- Ocelot简易教程(一)之Ocelot是什么
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9557375.html Ocelot简易教程目录 Ocelot简易教程(一)之Ocelot是什么 Ocel ...
- vue 项目实战 (vue全家桶之--- vuex)
老规矩先安装 npm install vuex --save 在看下面内容之前 你应该大概的看了一边vuex官方的文档对vuex有个大概对了解 首先 vuex 是什么? vuex 是属于vue中的什么 ...
- sql server 索引阐述系列六 碎片查看与解决方案
一 . dm_db_index_physical_stats 重要字段说明 1.1 内部碎片:是avg_page_space_used_in_percent字段.是指页的填充度,为了使磁盘使用状况达到 ...
- springboot rabbitmq整合
这一篇我们来把消息中间件整合到springboot中 ===================================================================== 首先在 ...