10与元素亲密接触:盒元素(the box model)
line-height属性可以设置文本的行间距,可以用像素、em或百分比等于字体大小有关的值定义行间距line-height: 1.6em;(行间距为字体大小的1.6倍)
CSS把每一个单一的元素看作是一个盒子。每个盒子由内容区及可选的补白、边框和边界组成。可以用补白在盒子的内容和边框之间创建可视的空白。补白是透明的,本身没有颜色或修饰。如果两个盒子相邻,边界就相当于它们之间的空间,边界也是透明的,本身没有颜色或修饰。边界是元素之间的空间,而补白是内容周围多出来的空间。
用CSS添加边框
.guarantee{
border-color: black;
border-width: 1px;
border-style: solid;
}
padding属性可以用来设置补白大小,这个属性可以设置成多少像素或边框里面部分的百分之几。padding: 25px;在左侧添加补白padding-left: 80;
margin属性可以用设置边界大小,可以用百分比或像素定义边界。margin: 30px;只在右侧增加边界margin-right: 250px;
background-image属性可以给任何元素添加背景图像,但不能用它在页面中添加图像(此时应该用<img>)。background-img: url(XXXXX);background-position属性可以设置背景图像的位置,可以用像素、百分数或top、left、right、bottom、center这些关键字。background-position:top left;background-repeat属性可以用来控制平铺效果,可以设置为repeat、no-repeat、repeat-x、repeat-y、inherit。backgroud-repeat: repeat;
border-style属性用来控制边框的外观,一共有8种边框样式,solid、dotted、double、dashed、groove(看起来像凹进页面里)、inset(像是嵌入到页面中)、outset(像是从页面升起的一块凸处)、ridge(是页面中凸出的边界)。
border-width属性用来控制边框宽度,可以用关键字thin、medium、thick或像素值定义宽度。
border-color属性用来设置边框颜色,可以用颜色名称、rgb值或十六进制代码定义颜色。
和边界和补白一样,也可以定义任何一侧(上、下、左、右)的边框样式、宽度或颜色。border-top-color:black;
向应用一种样式到多个元素时用类。需要应用样式的只是一个元素并且页面上只有一个,就用id。严格来说,id属性是命名唯一的元素的。一个元素不能有多个id,而且同一页面中不能有一个以上的元素用同一个id。要通过一个元素的id选择它,在id前面叫一个“#”(在类中类名称之前用一个“.”)。类和id之间的唯一不同是id选择符只跟一个页面中的一个元素匹配。一个元素只能有一个id,但可以属于几个类。
样式表的顺序很重要,一个样式表会覆盖在它之前链接的样式表中的样式,即最下面的样式表优先权最高。
<link>元素有一个叫做media的属性,可以用来定义样式文件所需要的设备类型,screen、print、handheld。
<link type="text/css" rel="stylesheet" href="XXX" media="screen" />
10与元素亲密接触:盒元素(the box model)的更多相关文章
- CSS盒模型(Box Model)
阅读目录 1. 什么是CSS盒模型 2. IE盒模型和W3C盒模型 3. CSS3属性box-sizing 4. 关于盒模型的使用 在最初接触CSS的时候,对于CSS盒模型的不了解,撞了很多次的南墙呀 ...
- {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index
03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- 10套免费的 Photoshop UI 元素以及 PSD 素材
免费的 PSD 用户界面工具包以及可以编辑 Photoshop PSD 文件,有你需要的设计漂亮的用户界面和惊人使用体验.这些用户界面工具包可有免费下载,可随意定制的,而且这些 PSD 分层素材文件组 ...
- CSS学习笔记——盒模型,块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)
主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...
- 学习总结:CSS(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- 『心善渊』Selenium3.0基础 — 10、使用Seleniun定位页面元素归纳总结(超详细)
目录 1.Selenium中8种基本元素定位方式 (1)单数形式 (2)复数形式 2.By类定位的8种定位方式 (1)单数形式 (2)复数形式 3.XPath定位总结 (1)基础定位语法 (2)属性定 ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
随机推荐
- EF框架step by step(5)—处理实体简单属性
EF框架会对实体进行跟踪,对实体的每个属性当前值和原始值及其状态进行跟踪,记录.当前值是指实体属性当前的被赋予的值,而原始值是指实体最初从数据库读取或者附加到DbContext时的值. 先通过简单的代 ...
- Handling events in an MVVM WPF application
Posted: June 30, 2013 | Filed under: MVVM, WPF, XAML |1 Comment In a WPF application that uses the ...
- 桌面每日一句--桌面翻译工具(有道翻译,微软翻译,Google翻译)
现在的翻译软件功能越来越多,也越来越臃肿,还不时弹广告,真的很烦恼. 鉴于这种情况,自己做了个翻译软件,能满足日常需求就好了.需要用的时候可以直接在桌面输入单词翻译,或者直接使用快捷键呼出翻译窗口.最 ...
- Android -- shape 定义控件的属性
<shape> <!-- 实心 --> <solid android:color="#ff9d77"/> <!-- 渐变 --> & ...
- BZOJ1443: [JSOI2009]游戏Game
如果没有不能走的格子的话,和BZOJ2463一样,直接判断是否能二分图匹配 现在有了一些不能走的格子 黑白染色后求出最大匹配 如果是完备匹配,则无论如何后手都能转移到1*2的另一端,故先手必输 否则的 ...
- iOS 让启动页面延迟的方法
<1> 利用多线程的方法:[NSThread sleepForTimeInterval:300];
- C# 委托和Lambda---基础
[委托]是一个类可以把一个方法当作另一个方法的参数使用. 声明委托:delegate string 委托名(参数列表);//跟定义方法一样,只是没有方法体,必须使用关键字delegate使用委托的函数 ...
- IOS 蓝牙相关-app作为外设被连接的实现(3)
再上一节说了app作为central连接peripheral的情况,这一节介绍如何使用app发布一个peripheral,给其他的central连接 还是这张图,central模式用的都是左边的类,而 ...
- 优化MySchool总结习题
1) 在SQL Server 中,为数据库表建立索引能够( C ). A. 防止非法的删除操作 B. 防止非法的插入操作 C. 提高查询性能 D. 节约数据库的磁盘空间 解析:索引的作用是通过使用索引 ...
- ListView的HeaderView和Footer
HeaderView介绍 HeaderView用法 属性中添加 ListView中属性listHeader和overScrollHeader区别: android:overScrollHeader=& ...