2018.2.7 css 的一些方法盒子模型
css 的一些方法
1.盒模型代码简写
盒模型的外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的;上右下左。具体应用在margin和padding的
例子如下
margin:10px 15px 12px 14px; //上设置10px右设置为15px、下设置为12px、左设置14px
通常有下面三种缩写方法
1.如果top、right、bottom、left的值相同,如下面代码:
margin:10px 10px 10px 10px ;
可缩写为:10px;
2.如果top和buttom值相同、left和right的值相同,如下面代码:
margin:10px 20px 10px 20px;
可缩写为:margin:10px 20px;
3.如果left和right的值相同,如下面的代码:
margin:10px 20px 30px 20px;
可缩写为:margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的
2.颜色值缩写
RGB格式
例子:
rgb(255,0,0)
十六进制格式
例子1
关于颜色的css样式也是缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
p{color:#00000;}
可以缩写为:
p{color:#000;}
p{color:#336699;}
可以缩写为:
p{color:#369;}
颜色名称
例子: red
3.css背景详细介绍
background 属性用于定义HTML元素的背景。定义元素北京效果的CSS属性有以下五种:
(1)background-color 背景颜色
该属性定义了元素的背景颜色。页面的背景颜色可以使用body元素选择器进行定义:
body{
background-color:gray;
}
(2)background-image 背景图像 //属性描述了元素的背景图像。默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
body{
background-image:url('images/wallpaper.jpg');}
(3)background-repeat 背景图片设置水平或垂直平铺或不平铺
默认情况下,background-image 属性会在页面的水平或者垂直方向平铺。一些图象如果在水平方向与垂直方向平铺,这样看起来很不协调,如果图像只在水平方向平铺(repeat-x) ,页面背景会更好些:background-repeat:repeat-x,定义垂直方向平铺语法:background-repeat:repeat-y。
(4)background-position:背景图像设置定位
背景图像与文本显示在同一个位置,这样不利于文本的阅读,为了让页面排版更加合理,可以利用background-position属性改变图像在背景中的位置:
body{
background-image:url('images/wallpaper.jpg');
background-repeat:no-repeat;
background-position:right top;//图片显示在右上角
}
//注意:如果background-position可以使用关键字表示left|right|center 仅指定一个关键字,其他值将会是“center”
也可以使用百分比表示:x% y%,默认值为:0%0%,第一个值是水平位置,第二个是垂直位置。左上角是0%0%右下角100%100%。如果仅指定了一个值其他值将是50%
//还可以使用长度单位精度表示,单位可以是像素或任何其他CSS单位,通常使用像素。第一个是水平位置,第二个是垂直位置,左上角是0 0 ,两个数值之间用空格隔开,例如: background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是12px,垂直方向是24px。该属性就是图像左上角相对于元素左上角的位置偏移,如果取负值,则向上向左偏移。该方法在制作CSS雪碧图(即CSS Sprite,也叫做CSS精灵)时,将十分重要。
(5)background-attachment:背景图像设置固定或滚动
background-attachment 属性设置背景图像是否福鼎或者随着页面的其余部分滚动,默认值是scroll,背景图片随页面其余部分公董。如果需要设置图像不随着页面的其余部分滚动,那么属性值则使用fixed,定义背景图像是固定的,如下:
<head>
<style>
body{
height:2000px;
background-image:url('images/fix.gif');
background-repeat:no-repeat;
background-attachemet:fixed;
}
</style>
</head>
<body>
<p>我是一个段落,我是一个段落。</p>
<p>我是一个段落,我是一个段落。</p>
<p>我是一个段落,我是一个段落。</p>
<p>我是一个段落,我是一个段落。</p>
</body>
(6)背景属性简写
设置页面的背景效果时,通过很多的单个属性来进行定义,这样代码就显得很繁琐,为了简化这些属性代码,可以将这些属性合并在同一个属性合并在同一个属性中,如下:
body{
background:green url('images/fix.gif') no-repeat fixed 12x 24px;
}
background属于复合属性,也叫跨界属性,他可以简化代码,提高页面的运行效率,但是在使用JS时却不能使用复合属性来获取元素的央视,需要使用单个属性精确获取,如果一个元素定义了多个背景样式,那么使用符合属性获取,浏览器并不知道你到底需要那个样还i,就出错了。类似这样的符合属性还有:font、border、padding和margin等。
在使用背景图象时,默认会平铺重复显示,这样不仅不具有美感,还会影响文本的排版。如果不想图像平铺,并且直线式一次,那么就这么定义:
background-repeat:no-repeat;
例子
<head>
<style>
body{
background-image:url('images/wallpaper.jgp');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1 class="center col">class选择器</h1>
<p class="center col">我是一个段落。</p>
<p class="center col font">我是另一个段落。</p>
<h2 class="center">h2标题</h2>
</body>
4.一般写作属性顺序
background-color--->backgrouund-image-->background-repeat--->background-attachment-->background-position
以上属性无需全部使用,可以按照页面的实际徐uyaoshiyong,比如之定义背景颜色,就可以这样设置:background:#90C
2018.2.7 css 的一些方法盒子模型的更多相关文章
- [CSS属性设置,盒子模型,网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- CSS Box Model(盒子模型)
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- css的两种盒子模型
css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
- CSS——(2)盒子模型与标准流
上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...
- CSS魔法堂:盒子模型简介
本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型 二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...
- 【转】CSS(10)盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...
- css笔记17:盒子模型加强版的案例
1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...
- css笔记16:盒子模型的入门案例
1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- css笔记15:盒子模型
1.流 流:html元素在网页中显示的顺序 标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示. 非标准流:在html之中,当某个元素脱离了标准流,那么它处于非标准流 ...
随机推荐
- 洛谷P2580(trie)
第一行一个整数 n,表示班上人数.接下来 n 行,每行一个字符串表示其名字(互不相同,且只含小写字母,长度不超过 50).第 n+2 行一个整数 m,表示教练报的名字.接下来 m 行,每行一个字符串表 ...
- NodeJS什么都能做,为什么还要JAVA?
这张图看起来简单而且很好理解,但没尝试过,会有很多疑问. SPA模式中,后端已供了所需的数据接口,view前端已经可以控制,为什么要多加NodeJS这一层? 多加一层,性能怎么样? 多加一层,前端的工 ...
- Java 引用类型
若内存中一个对象没有任何引用的话,则可以认为该对象已经不再使用了,可以成为GC的候选.不过由于垃圾回收器的运行时间不确定,可被垃圾回收的对象的实际被回收时间是不确定的.对于一个对象来说,只要有引用的存 ...
- Gradle安装配置
1.构建工具的简单介绍在代码世界中有三大构建工具,ant.Maven和Gradle. 现在的状况是maven和gradle并存,gradle使用的越来越广泛. Maven使用基于XML的配置,Grad ...
- postgresql删除还有活动连接的数据库
select pg_terminate_backend(pid) from pg_stat_activity where datname='testdb' and pid<>pg_back ...
- hadoop map 个数 源码分析
本文转自http://ronxin999.blog.163.com/blog/static/42217920201279112163/
- Django学习笔记(13)——Django的用户认证(Auth)组件,视图层和QuerySet API
用户认证组件的学习 用户认证是通过取表单数据根数据库对应表存储的值做比对,比对成功就返回一个页面,不成功就重定向到登录页面.我们自己写的话当然也是可以的,只不过多写了几个视图,冗余代码多,当然我们也可 ...
- 【密码学】MD5算法原理
MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权费用. MD5功能: 输 ...
- ElasticSearch服务器操作命令
在win7环境,进入elasticsearch安装目录的bin目录: 1. elasticsearch.bat 就可以启动elasticsearch了.运行这个插件的好处是:elasticsearch ...
- C# 的两种debug 方法
第一种:需要把调试方法改成debug代码用 #if DEBUG 包裹 using System; using System.Collections.Generic; using System.Text ...