一 概述

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. NOIP前的模板

    1.筛\(phi\) \(logn\)求少数\(phi\) inline int phi(R int x){ R int res=x,tmp=x; for(R int i=2;i*i<=x;i+ ...

  2. 对csrf的理解

    用户浏览并登陆信任网站A 通过验证,在用户浏览器产出A的cookie 用户在没有登出A的情况下访问攻击网站B B要求访问第三方站点A,发出一个请求 根据B的请求,浏览器带着A的cookie访问A A不 ...

  3. MODBUS协议相关代码(CRC验证 客户端程序)

    Modbus协议是一种已广泛应用于当今工业控制领域的通用通讯协议.通过此协议,控制器相互之间.或控制器经由网络(如以太网)可以和其它设备之间进行通信.Modbus协议使用的是主从通讯技术,即由主设备主 ...

  4. 【转】IDEA中xml文件头报错:URI is not registered (Settings | Languages & Frameworks | Schemas and DTDs)

    有时候在IDEA中配置spring文件时会出现这个错误  URI is not registered (Settings | Languages & Frameworks | Schemas ...

  5. Angular material mat-icon 资源参考_Connection

    ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...

  6. 关于如何爬虫妹子图网的源码分析 c#实现

    网上也出现一些抓取妹子图的python 代码,今天我们用c#实现爬虫过程. 请看我的网站: www.di81.com private void www_94xmn_Com(string url, st ...

  7. Jenkins添加maven插件

    1.1.1 安装Maven插件 我们要使用Jenkins+Maven对Java项目进行构建,需要安装Maven Project Plugin,具体安装过程请参考插件管理部分 1.1.2 3.Linux ...

  8. es第四篇:Query DSL

    Query and filter context Match All Query 最简单的search请求,匹配所有文档,文档的_score值都是1,示例: get twitter/_search{  ...

  9. php中die(),exit(),return的区别

    die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续代码,exit()可以显示内容.return就是纯粹的返回 ...

  10. setSelectionRange方法解决光标错位问题

    inputElement.setSelectionRange(value.length, value.length);