CSS------属性值篇

display：　none | block | inline（默认值） | inline-block(css2新增) | inherit

　　　　　　　none :此元素不会再显示 {注：虽然visibility也是隐藏，但是他隐藏之后在页面上还是占位的，而display：none在页面上是不占位的}

　　　　　　　block:块元素，独占一行

　　　　　　　inline:行内元素，没有宽高，内容的多少就是他的宽高，也会是display的默认值

　　　　　　　inline-block:行内块元素，可以把一个元素转换成行内块元素，同时具有block和inline的特性

　　　　　　　inherit:继承，继承父元素的

display还有其他的

display：table | inline-table | table-header-group | table-row-group | table-footer-group | table-row| table-column-group | table-column | table-cell | table-caption

　　　　table:块级表格来显示（类似 <table>）

　　　　inline-table:内联表格来显示（类似 <table>）

　　　　table-header-group:一个或多个行的分组来显示（类似 <thead>）

　　　　table-row-group:一个或多个行的分组来显示（类似 <tbody>）

　　　　table-footer-group:一个或多个行的分组来显示（类似 <tfoot>）

　　　　table-row:一个表格行显示（类似 <tr>）

　　　　table-column-group:一个或多个列的分组来显示（类似 <colgroup>）

　　　　table-column:一个单元格列显示（类似 <col>）

　　　　table-cell:一个表格单元格显示（类似 <td> 和 <th>）

　　　　table-caption:一个表格标题显示（类似 <caption>）

margin (外边距): 上 右 下 左（值可以为像素，也可以为百分比）

　　margin-left:元素距离左边的距离

　　　  margin-right:元素距离右边的距离

　　     margin-top:元素距离上边的距离

　　     margin-bottom:元素距离下边的距离

注：让一个元素居中的方法

　　　#margin{margin:0 auto;}

position: static | relative | absolute | fixed |inherit

　　　　　　static:静态

　　　　　　  relative:相对定位

　　　　　　　　　　相对定位的元素仍在文档流之中，并按照文档流中的顺序进行排列；

　　　　　　　　　　参照物为元素本身的位置；

　　　　　　　　　　"left:20" 会向元素的 LEFT 位置添加 20 像素;

　　　　　　　　　　常用的用途为改变元素层级和设置为绝对定位的参照物；

　　　　　　  absolute:绝对定位

　　　　　　　　　　建立以包含块为基准的定位，其随即拥有偏移属性和 z-index 属性;

　　　　　　　　　　默认宽度为内容宽度;

　　　　　　　　　　脱离文档流;

　　　　　　　　　　参照物为第一个定位祖先或根元素（<html>元素）;

　　　　　　　　　　元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　　　　　　fixed:固定定位

　　　　　　　　　　默认宽度为内容宽度

　　　　　　　　　　脱离文档流

　　　　　　　　　　参照物为视窗

　　　　　　　　　　元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.

　　　　tip:任何元素都可以定位，一个元素加上绝对或固定定位后就自动转变为块级元素

　　　　

css常用的属性的更多相关文章

  1. css常用文本属性

    [CSS常用文本属性] 1. 字体.字号类: ① font-weight: 字体粗细. bold-加粗.normal-正常.lighter-细体 也可以使用100-900数值,400表示normal, ...

  2. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  3. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  4. css常用的属性方法 上篇

    自己是从java后台自学转前端的,所以平时一些简单的css+html就不写了,列出的都是新手常用的一些属性,会持续更新,大神勿喷,留给新手做个参考! 尤其是跟我一样自学前端的.     背景关联 ba ...

  5. 如何设置文本不换行省略号显示等CSS常用文本属性

    如何让多余的文本省略号显示首先要说几个属性的作用: whitespace:nowrap 中文行末不断行显示 overflow: 控制超出文本的显示方式:hidden 超出范围文本隐藏:scroll 始 ...

  6. CSS常用的属性命名

    页头:header   如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法 登录条:loginBar         标志:logo   ...

  7. css 常用的属性

    box-shadow: 10px 10px 5px #000000;  //给元素添加阴影 使用伪元素after要注意加上content属性 例如:.log:after{ content:" ...

  8. CSS基本属性—文本属性和背景属性

    一.CSS常用文本属性 [css中的颜色表示方式]   1.直接使用颜色的单词表示:red.green.blue    2.使用颜色的十六进制表示:#ff0000,#00ff00:    六位数,两两 ...

  9. [Web 前端] 010 css 常用的边框设置

    css 常用边框属性 概览 参数 释义 border u设置边框属性(可以多个) border-color 边框颜色 border-style 边框样式solid 实线,dotted 点状线,dash ...

随机推荐

  1. mysql知识点汇总

    1. 数据库的安装 2. 数据库设计需要注意什么 3. SQL语句优化 4. 怎样处理慢查询? 5. 怎样更好的利用数据库索引? 6. 事务隔离级别有哪些?怎么实现的? 7. 数据库锁有哪些? 8. ...

  2. 什么是Referer？Referer的作用？空Referer是怎么回事？

    什么是Referer? Referer是 HTTP请求header 的一部分,当浏览器(或者模拟浏览器行为)向web 服务器发送请求的时候,头信息里有包含 Referer.比如我在www.sojson ...

  3. springboot打成war包找不到文件

    项目在eclipse运行是可以的,但是打成war包到线上报错: FileNotFoundException: class path resource [static/apiclient_cert.p1 ...

  4. Django视图层

    本文目录 1 视图函数 2 HttpRequest对象 3 HttpResponse对象 4 JsonResponse 5 CBV和FBV 6 简单文件上传 回到目录 1 视图函数 一个视图函数,简称 ...

  5. Oracle中的位图索引和函数索引

    位图索引 同样的,先说是什么,再说为什么. 上篇我们说过BTREE索引是将数据表的索引列和行号排序后以树状形式存在磁盘中.那位图索引是什么样的呢? 现有如下日志表,有操作类型字段op_type,该字段 ...

  6. day19

    """ time 用于处理时间相关 1.获取时间 2.不同格式的时间转换 3.sleep函数"""import time# 浮点型的时间戳 ...

  7. bzoj1452 [JSOI2009]Count ——二维树状数组

    中文题面,给你一个矩阵,每一个格子有数字,有两种操作. 1. 把i行j列的值更改 2. 询问两个角坐标分别为(x1,y1) (x2,y2)的矩形内有几个值为z的点. 这一题的特点就是给出的z的数据范围 ...

  8. vue--简化项目逻辑属性

    computed属性对数据变化是实时响应的 因此当项目中某个数值发生变化,并且要在别的地方引用这个数值时,computed即可派上用场 来看一个例子: html部分: <div id=" ...

  9. “妄”眼欲穿-CSS之flex布局和边框阴影

    妄:狂妄: 不会的东西只有怀着一颗狂妄的心,假装能把它看穿吧. 作为一个什么都不会的小白,为了学习(zb),特别在拿来主义之后写一些对于某些css布局的总结,进一步加深对知识的记忆.知识是人类的共同财 ...

  10. Xilinx Vivado的使用详细介绍（1）：创建工程、编写代码、行为仿真

    Xilinx Vivado的使用详细介绍(1):创建工程.编写代码.行为仿真 Author:zhangxianhe 新建工程 打开Vivado软件,直接在欢迎界面点击Create New Projec ...