盒模型
来源:互联网 发布:求生之路2知乎 编辑:程序博客网 时间:2024/04/28 08:15
调整整个页面上文本的行高
line-height:1.6em;
(em /px /百分数)
合模型
每个盒子由一个内容区以及可选的内边距、边框和外边框组成。
内容区(content area):包含文本或图像
内边距(padding):透明的
边框(border)
外边框(margin)
所有的元素都被当做盒子
class属性
在.html文件中
<p class="guarantee">
打开对应的.css 文件
.guarantee{ border-color: white; <!白色边框> border-width: thin; <!边框宽度> border-style: solid; <!实线> background-color: #a7cece;<!背景颜色> padding: 45px; <!在内容的周围增加45像素的内边距> padding-right: 80px; <!在内容的右边的内边距为80像素> margin: 50px; <!在内容的四周增加50像素的外边距> margin-left: 250px; <!左外边距> margin-right: 250px; <!右外边距> line-height: 1.9em; font-style: italic; <!斜体> color: #444444; <!字体颜色> font-family: Georgia,"Times New Roman",Times,serif; background-image: url(images/background.gif);<!背景图片,会在内容区和内边距的后面显示,不会延伸到外边距> background-repeat: no-repeat;<!由于背景图默认重复,背景图设为不再重复> background-position: top right;<!图片放置在左上角>}
background-repeat有repeat
no-repeat
repeat-x 在水平方向上重复
repeat-y 在垂直方向上重复
inherit 按夫元素的设置来处理
background-position有: top right
bottom right
top left
top right
border
border-style
1. soild 实线
2. double 双线
3. groove 槽线,看起来像页面中的一个槽
4. outset 外凸
5. dotted 点线
6. dashed 破折线
7. inset 内凹
8. ridge 脊线
border-width
可以用关键字或者像素
关键字:thin medium thick
指定某一边的边框
border-top-color:black;
border-top-style:dashed;
…….
指定某一边为圆角
border-radius:15px;
border-top-left-radius:3em;
border-bottom-right:0px;直角
锯齿
border-style:dashed;
border-color:white;
id属性
使用id属性为元素指定一个唯一的名字。
还可以用id属性为元素提供唯一样式。
一个页面上有给定id的元素只能有一个。
可以使用id选择器按id选择元素。例如:#myfavoriteid.
一个元素只能有一个id,但是它可以属于多个类。
.html中
<p id="footer">
.css中
#footer{}
类名要以字母开头,id可以以一个数字或者字母开头,id和类名都可以包含字母数字下划线,但是不能有空格
混合样式表
在html中可以指定多个样式表如果两个样式表包含冲突的属性定义,HTML中最后链接的样式表为最优先
样式表不在只是面向浏览器
根据将要显示页面的设备类型来调整页面的样式
利用media属性
<link href="loung.css" rel="stylesheet" media="screen and (max-device-width:480px)">
media 属性允许你指定应用这个样式表的设备类型
screen:这个查询指定了有屏幕的设备
屏幕宽度不超过480px
<link href="loung-print.css" rel="stylesheet" media="print">
媒体类型为print时才能使用
查询中还有很多属性可以使用
如
min-device-widthmax-device-width
以及显示方向
orientation:landscape 横向orientation:portrait 纵向
在css中增加媒体查询
不是在link标记中使用媒体查询,还可以直接写在css中
例如:
@media screen and (min-device-width:481px){ #guarantee{ margin-right:250px; }}@media screen and (max-device-width:480px){ #guarantee{ margin-right:30px; }}
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 盒模型
- 宏定义 使用分析
- android——8点控制裁剪框
- C++ string assign()赋值常用方法
- Linux strace命令
- SpringMVC:生成Excel和PDF
- 盒模型
- PHP防止sql语句注入终极解决方案
- 解决listview中checkbox复用的问题
- cocos creator学习笔记2017.2.9
- 欢迎使用CSDN博客
- ExtJS的grid排序
- 实时通信基础
- 电子签名使用范围、作用和价值、应用前景 ?
- 如何让条码打印软件条形码下标仅显示数字怎么做