一、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用法总结(持续更新)的更多相关文章

  1. css用法(持续更新ing)

    *:选择所有节点 #container:选取id为container的节点 .container:选取所有class包含container的节点 li a:选取li下的所有a节点 ul +p:选取ul ...

  2. 标准化命名CSS类,持续更新

    放链接.持续化更新,以后可能会用上.https://github.com/zhangxinxu/zxx.lib.css/blob/master/zxx.lib.css

  3. css 技巧 (持续更新)

    1.滚动条样式   /*自定义滚动条-----隐藏型*/ .scroll::-webkit-scrollbar-track{ border-radius: 1px;   }   .scroll::-w ...

  4. vue中的一些用法,持续更新中......

    1.跳转用法 @1.在template模板中通常使用router-link to='url' @2.在js中 1.this.$router.push({path: ''/order/index''}) ...

  5. 记一些stl的用法(持续更新)

    有些stl不常用真的会忘qwq,不如在这里记下来,以后常来看看 C++中substr函数的用法 #include<string> #include<iostream> usin ...

  6. MySQL黑科技用法总结(持续更新)

    1.利用set插入数值 insert [into] 表名 set 列=值.  2.利用select对字段进行测试 ) ,并且有2条记录 ',num1+1的计算结果 tips:相等返回1,否则返回0 f ...

  7. 【小摘抄】关于C++11下 string各类用法(持续更新)

    http://blog.csdn.net/autocyz/article/details/42391155 提供了最简单的详解 下列对本人近期开发中的一些心得体会进行摘抄 1.string按照字符进行 ...

  8. xpath用法(持续更新ing)

    article:选取所有article元素的所有子节点 /article:选取根元素article article/a:选取所有属于article的子元素的a元素 //div:选取所有div元素 ar ...

  9. 原生开发之css样式问题(持续更新)

    ·移动端开发将div高度设置为设备高度 div{ Height:100vh; } · select选择器文字设置: /*select文字右对齐*/ select{ direction: rtl; } ...

随机推荐

  1. C语言窗口例子

    #include <windows.h> LRESULT CALLBACK WndProc( HWND, UINT, WPARAM, LPARAM ) ; //声明用来处理消息的函数 in ...

  2. WebView的知识

    一.基本介绍 WebView是一个显示页面的组件. 二.基本使用 访问网页需要网络,所以在AndroidManifest.xml文件中添加网络权限. <uses-permission andro ...

  3. Day9:html和css

    Day9:html和css <head> <meta charset="UTF-8"> <title></title> <me ...

  4. [Postman]授权(11)

    授权过程将验证您是否有权从服务器访问所需的数据.发送请求时,通常必须包含参数以确保请求具有访问权限并返回所需数据.Postman提供的授权类型使您可以轻松处理Postman本机应用程序中的身份验证协议 ...

  5. vim常用命令行备忘总结

    一 窗口切换 1 :sp    水平切换当前窗口 2 :vsp 垂直切换当前窗口 3 :clo 关闭活动窗口 4 : on 只保留活动窗口 5 : ctrl + w  在窗口间循环切换  ctrl + ...

  6. LVS DR模式配置

    关于LVS的相关介绍,以下两篇文章均做了具体的介绍: http://www.linuxvirtualserver.org/zh/lvs1.html http://www.cnblogs.com/liw ...

  7. RabbitMQ配置

    RabbitMQ Configuration RabbitMQ提供多种配置方式:配置文件.环境变量.运行时参数等等. 默认配置文件的位置在/etc/rabbitmq/ Config File Loca ...

  8. mysql 开发基础系列16 视图

    一. 什么是视图视图是一种虚拟存在的表,行和列数据来自,定义视图的查询中使用的表,并且是在使用视图时动态生成的.优势有: 简单: 使用视图的用户完全不需要关心后面对应的表的结构,关联条件,筛选条件. ...

  9. Android--UI之Radio、Check、Toggle

    前言 这篇博客讲解一下Android平台下,RadioButton.CheckBox以及ToggleButton三个控件的用法,因为这三个控件之中都存在一个选中或是没选中的状态,所以放在一起讲解. 这 ...

  10. SecureCRT 设置彩色和显示中文

    1.设置Options->SessionOptions->Emulation,然后把Terminal类型改成xterm,并点中ANSI Color复选框.