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 的一些方法盒子模型的更多相关文章

  1. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  2. CSS Box Model（盒子模型）

    CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...

  3. css的两种盒子模型

    css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...

  4. CSS——（2）盒子模型与标准流

    上篇博客<CSS--(1)基础>中简单介绍了CSS的概念和几种使用方法,现在主要是介绍其的核心内容. 盒子模型 为了理解盒子模型,我们可以先从生活中的盒子入手.盒子是用来放置物品的,内部除 ...

  5. CSS魔法堂：盒子模型简介

    本文讨论的是块级盒子(Block-level box)的盒子模型(Box Model) 一.W3C标准的盒子模型   二.IE盒子模型 三.两种模型的区别 W3C标准盒子模型: 外盒模型 元素空间宽度 ...

  6. 【转】CSS（10）盒子模型

    CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 外边距(marg ...

  7. css笔记17：盒子模型加强版的案例

    1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...

  8. css笔记16：盒子模型的入门案例

    1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  9. css笔记15：盒子模型

    1.流 流:html元素在网页中显示的顺序 标准流:在html文件中,写在前面的元素在前面显示,写在后面的html元素在后面显示. 非标准流:在html之中,当某个元素脱离了标准流,那么它处于非标准流 ...

随机推荐

  1. [Xcode 实际操作]五、使用表格-(6)UITableView滑动到指定单元格

    目录:[Swift]Xcode实际操作 本文将演示如何使表格滑动到指定的索引路径. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...

  2. 由奇葩cookie导致服务器500来认识cookie

    问题:cookie中文会导致服务器报500错误. 一:cookie的特点 1.以键值对的形式出现的,比如:a=b;b=c 2.中文的值需要转义 cookie的例子 <!DOCTYPE html& ...

  3. Memento模式(备忘录设计模式)

    Memento模式? 使用面向对象编程的方式实现撤销功能时,需要事先保存实例的相关状态信息.然后,在撤销时,还需要根据所保存的信息将实例恢复至原来的状态.这个时候你需要使用Memento设计模式.(以 ...

  4. 11-散列3 QQ帐户的申请与登陆 （25 分）

    实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤),随后给出N行指令.每行指令的格式为:“命令符(空格)QQ号码( ...

  5. 判断文件是否存在 local/hdfs

    在Linux文件系统中,我们可以使用下面的Shell脚本判断某个文件是否存在: # 这里的-f参数判断$file是否存在 if [ ! -f "$file" ]; then ech ...

  6. 09-----JS事件流的概念（重点）

    在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文 时间的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...

  7. Ubuntu14.04 查看安装的jetty的版本

    1.首先找到start.jar , Ubuntu14.04 在/usr/share/jetty 目录下, 2.然后运行 java -jar start.jar -- version 参考

  8. 【密码学】Https握手协议以及证书认证

    1. 什么是https Https = http + 加密 + 认证 https是对http的安全强化,在http的基础上引入了加密和认证过程.通过加密和认证构建一条安全的传输通道.所以https可以 ...

  9. 如何让nginx支持ThinkPHP框架（重点参考）

    公司有一款即将上线的应用服务端是基于ThinkPHP写的,本地测试无异常,上传到外网服务器后无法连接.这可把我和我的小伙伴们吓死了,怎么回事儿,本地测试都是对的呀! 我和我的小伙伴们开始找原因,换了一 ...

  10. pat1034. Head of a Gang (30)

    1034. Head of a Gang (30) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue One wa ...