CSS总结摘要
一 概述
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总结摘要的更多相关文章
- CSS学习摘要-定位实例
CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...
- CSS学习摘要-定位
CSS学习摘要-定位 注:全文摘自MDN-CSS定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者始终保持在浏览器视窗内的同一位置. 本文解释的是定位 ...
- CSS学习摘要-引入样式
CSS学习摘要-引入样式 注:主要是摘录自MDN 网络开发者这个网站的. CSS 实际上如何工作? 当浏览器显示文档时,它必须将文档的内容与其样式信息结合.它分两个阶段处理文档: 浏览器将 HTML和 ...
- CSS学习摘要-盒子模型
注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
- CSS学习摘要-层叠和继承
当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上? 其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元素那里获得属性值)有关. 元素的最终样式可以在多个地方定义,它们以复杂的形式相 ...
- CSS学习摘要-布局
注:全文摘自MDN-介绍CSS布局 CSS页面布局技术允许我们拾取网页中的元素,并且控制它们相对正常布局流.周边元素.父容器或者主视口/窗口的位置.在这个模块中将涉及更多关于页面布局技术的细节: 浮动 ...
- CSS学习摘要-浮动与清除浮动
以下从浮动到BFC的段落 摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部 ...
- CSS学习摘要-数值和单位及颜色
在CSS中,值的类型有很多种,一些很常见,一些你却几乎没怎么遇到过.我们不会在这篇文档中面面俱到地描述他们,而只是这些对于掌握CSS可能最有用处的这些.本文将会涉及如下CSS的值: 数值: 长度值,用 ...
- CSS学习摘要-语法和选择器
主要摘自网络开发者. 从最基本的层次来看,CSS是由两块内容组合而成的: 属性(Property):一些人类可理解的标识符,这些标识符指出你想修改哪一些样式,例如:字体,宽度,背景颜色等. 属性值(V ...
随机推荐
- CF960G Bandit Blues 分治+NTT(第一类斯特林数)
$ \color{#0066ff}{ 题目描述 }$ 给你三个正整数 \(n\),\(a\),\(b\),定义 \(A\) 为一个排列中是前缀最大值的数的个数,定义 \(B\) 为一个排列中是后缀最大 ...
- Git的一些用法(下)
(4) 提交分支 提交分支命令 : 将本地的分支提交到 GitHub中; git push origin experiment (5) 分支合并移除 合并分支命令 : 合并分支之后, 分支中有的文件在 ...
- HTML-CSS样式表-★★★常用属性★★★及基本概念、分类、选择器
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
- df -h 卡死 如何解决
df -h 卡死的情况,那是因为无法统计挂载的目录的大小 一般是因为还挂载了一些外部的目录,如nfs的目录 可以用mount | column -t 命令查看哪些目录 然后umount这些目录, 一般 ...
- [原创] 项目 watch EMFILE 报错处理过程
目录 事件 处理过程 参考资料 小知识点 单进程文件句柄限制 系统总文件句柄限制 inotify 文件系统事件监控 事件 公司XX游戏 S114服启动失败(使用 pomelo - node.js 框架 ...
- python(unittest)报告导出(二):使用 BeautifulReport导出
BeautifulReport(导出的报告比HTMLTestRunner更全面) 下载地址及安装位置 https://github.com/TesterlifeRaymond/BeautifulRep ...
- 2019.4.18 HTML + CSS相关整理
目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...
- 论文阅读 | CenterNet:Object Detection with Keypoint Triplets
相关链接 论文地址:https://arxiv.org/abs/1904.08189 代码链接:https://github.com/Duankaiwen/CenterNet 概述 CenterNet ...
- 2.5 Go 算术运算与变量使用技巧
变量作用域 简单来说,GO的变量以块为范围:一个if-else的块,就可以包含一个变量的生命周期.变量的声明,要在使用之前. package main import ( "fmt" ...
- vue中nextTick的使用(转载)
转载自:https://www.cnblogs.com/chaoyuehedy/p/8985425.html 简介 vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量 ...