一 概述

1.什么是CSS?

Cascading Style Sheet,层叠样式表,用于设定页面内容的显示样式。

2.为一个元素添加多个样式

一个元素可以同时定义多个类,不同类之间用空格隔开,如class=“xxx01 xxx02”。

3.为子元素添加样式

为子元素设定样式的方式:父元素+空格+子元素{},通常时候id+class。

二 常用属性

1.文本

  • text-align:center:文本居中。

2.内补丁

  • padding:内补丁,即内部宽度。格式:padding:5px(可以定义一个值,也可以定义4个值),用于设置相邻元素与其边界之间的距离。

3.外补丁

  • margin:在对象与其他对象之间增减空白间距,增加的间距在对象外部,所以称作外补丁,使用方法同内补丁padding。

4.布局

overflow:当对象的内容超出指定范围时设定处理措施。

  • auto:只有在必需时才采用滚动条或者剪切。
  • hidden:不显示超出范围的内容。
  • visible:默认值,不剪切,不添加滚动条。
  • scroll:总是显示滚动条。

display:改变对象的显示方式。

  • inline-block:将对象作为内联对象,对象的内容作为块对象。通常加上width设定对象的宽度,用于对齐。
  • none:隐藏元素,该元素不占空间。
  • visibility:hidden:隐藏对象,隐藏的对象依然占据空间。

(持续更新中.............)

CSS总结摘要的更多相关文章

  1. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  2. CSS学习摘要-定位

    CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...

  3. CSS学习摘要-引入样式

    CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...

  4. CSS学习摘要-盒子模型

    注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...

  5. CSS学习摘要-层叠和继承

    当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...

  6. CSS学习摘要-布局

    注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 ...

  7. CSS学习摘要-浮动与清除浮动

    以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...

  8. CSS学习摘要-数值和单位及颜色

    在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过.我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些.本文将会涉及如下CSS的值: 数值: 长度值,用 ...

  9. CSS学习摘要-语法和选择器

    主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...

随机推荐

  1. mongo的持久化之Journaling

    参考文章: http://database.51cto.com/art/201110/295772.htm http://blog.chinaunix.net/uid-15795819-id-3381 ...

  2. Rx

    more detailed in WIKI's document SDP :session description protocal book AAA AA-Answer 鉴权授权应答AAR AA-R ...

  3. [转] docker 部署 odoo

    [From] https://blog.csdn.net/qq_36178641/article/details/79775153 1.安装大象数据库. docker run -d -e POSTGR ...

  4. Linux云服务器下Tomcat部署

    基于阿里云Centos 7服务器的Tomcat 项目部署 工具:一台安装jdk1.8的Centos 6/7.X 云服务器(64位) Putty  ssh远程连接云服务器的软件 FileZillaCli ...

  5. kafka监控服务搭建

    wget https://github.com/Morningstar/kafka-offset-monitor/releases/download/0.4.1/KafkaOffsetMonitor- ...

  6. grunt 实例构建(四)

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

  7. Ubuntu 16.04 compare 软件安装

    1软件官网 http://www.scootersoftware.com/download.php?zz=kb_linux_install 2.打开上述网址可看到安装信息 终端安装方式: wget h ...

  8. Linux 中的rsh,ssh

    第一部分 rsh 的安装与配置 http://www.ttlsa.com/linux/configure-rsh-rcp-scp-on-centos/ http://www.ahlinux.com/s ...

  9. 初识unitest框架

    1.借助IED录制脚本 2.导出脚本,选择用Python语言 将脚本导出,保存为 baidu.py ,通过 python IDLE 编辑器打开 引入unittest框架解释,见代码的的注释 # -*- ...

  10. 上传base64格式的图片到服务器

    上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...