1、大小：width：宽；heigh：高

2、背景：1）background-color：背景颜色

2）background-image：背景图片url路径

3）background-repeat：图片的平铺方式。no-repeat：不平铺，repeat：平铺，repeat-x：水平平铺，repeat-y：垂直平铺

4）background-position：图片位置。center，left，right，top，bottom；eg：左上:left 20px top 20px

5）background-attachment：背景是否随着滚动条滚动。fixed：图固定，滚动条动。scroll：图片与滚动条一起动

6）background-size：图片的大小

3、字体：1）font-family：字体样式，通用微软雅黑，宋体

2）font-size：字体大小（像素来表示）

3）font-weight：bold加粗

4）color：字体颜色

5）font-style：italic倾斜

6）text-decoration：underline：下划线，overline：上划线，line-through：删除线，none：无下划线基本用于去除超链接的下划线

4、对齐方式：1）text-align：水平对齐 center，left，right

2）vertical-align：垂直对齐 top，bottom，middle与行高一起使用才能实现垂直方向的对齐方式

3）lineheight：行高

4）text-indent：首行缩进，用像素来表示

<title>无标题文档</title>

<style type="text/css">

#a{ width:600px;

 height:1200px;

background-color:#09F;

background-image:url(3493a9cb04c2c33b-858fc65577150bf6-919559d39712ddfd37f2e7e9cdbc369a.jpg);

background-repeat:no-repeat

background-position:left 20px top 20px;

background-attachment:scroll;

background-size:300px 200px;

font-family:微软雅黑;

font-size:16px;

color:#;

font-weight:bold;

font-style:italic;

text-align:center;

vertical-align:middle;

line-height:1200px;

}

</style>

</head>

<body>

<div id="a">

测试文字

<a style="text-decoration:none;" href="#">shouye</a> </div> <p style="text-indent:30px">大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文大家爱上海富恶化哇哦不能次文化大家爱上海富恶化哇哦不能次文化</p> </body>

边界和边框：1、margin：外边距。margin-top（left/right/bottom）：上边距或者margin：10px 0px 0px 10px。若是margin：10px表示距离每一个边界都为10px

2、padding：内边距。表示这个元素内的内容和他的距离。元素相应的变大。用法与margin相同

3、border（边框）：1px（边框粗细） solid（边框样式） #F0F（边框颜色）

也可以分写：border-width:5px;border-style:solid;border-color:#963

border-top（left，right，bottom）:5px dashed #FF6666;上边框

 .text{ width:200px;

  height:200px;

   border:5px solid #0FF}

</style>

</head>

<body>

<div class="text"></div>







分开的border

 .text{ width:200px;

   height:200px;

    border-top:5px dashed #FF6666;

  border-bottom:10px solid #0F3;

  border-right:5px dashed #0033CC;

  border-left:10px solid 

   }

</style>

</head>








利用边界的属性完成彩色方块




.text{ width:0px;

   height:0px;

   border-top:100px solid #0F0;

   border-bottom:100px solid #C33;

   border-left:100px solid #CF6;

   border-right:100px solid #03F;}

</style>

</head>

<body>

<div class="text"></div>








格式与布局：1、position：1）absolute：绝对位置，当前元素相对于浏览器的边界


2）fixed：固定位置，不会随着滚动条的动而动


3）relative：相对定位，相对于该元素本来应该出现的位置。


top，left，right，bottom（像素可正可负）


2、流式：float：left往左流，right往右流


截断：<div sytle="clear:both"></div>


3、z-index：值越大越往上靠，控制层级
												


											
css样式，边界和边框，格式和布局的更多相关文章
	

    
						
  1. CSS控制边界、边框与外轮廓
		
    一.CSS控制边界 1.内边距 padding(内边距也叫内填充) padding-bottom 长度/百分比 元件下端边线的空隙 padding-left 长度/百分比 元件左端边线的空隙 padd ...
    
		
    2. 
						
  2. HTML 学习笔记 CSS样式（外边框 外边框合并）
		
    CSS外边距 围绕在元素边框的空白区域就是外边距  设置外边距会在元素外创建额外的空白 设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位.百分数值甚至负值. CSS ma ...
    
		
    3. 
						
  3. 各种CSS样式设置细线边框
		
    基础知识回顾 : cellspacing:单元格与单元格之间的边距:cellpadding:单元格内的内容与单元格边沿的边距 简单实用的样式,设置所有的单元格为细线效果 <style type= ...
    
		
    4. 
						
  4. css样式表之边框
		
    方框和边框, 边框的顺序为, 上右下左 框的width和height不包括边距的宽度, 设置多少就是多少, margin代表外边距, padding代表内边距, border是边框, 边框border ...
    
		
    5. 
								
  5. css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）
		
    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...
    
		
    6. 
						
  6. css样式表：样式分类，选择器。样式属性，格式与布局
		
    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...
    
		
    7. 
						
  7. CSS样式表与格式布局
		
    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...
    
		
    8. 
						
  8. Java 新手学习  CSS样式列表  排版 格式布局
		
    1,样式表分为  内联样式表   内嵌样式表  外部样式表  三种. 内联样式表是直接写在标签里面的  比如 <p style=“”></p>  <div style=& ...
    
		
    9. 
						
  9. css样式表  格式与布局
		
    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Unity Debug类
			
    静态变量 developerConsoleVisible 报告是否开发控制台是可见的.开发控制台不能出现使用: isDebugBuild 在构建设置对话框中有一个叫做"发展构建"复 ...
    
			
    2. 
						
  2. SourceTree 无法查看组织仓库
			
    error log: Pushing to remote: Repository not found. 在使用SourceTree进行版本控制,代替git命令行,而且作为免费 跨平台 功能完备的git ...
    
			
    3. 
						
  3. 【转载】stm32定时器-----珍藏版
			
    今天看到一个讲解定时器特别细致入微的文章,真是难得... 原文地址:http://www.cnblogs.com/zjvskn/p/5751591.html 一.STM32通用定时器原理 STM32  ...
    
			
    4. 
						
  4. collection and map and Collections
			
    两者的区别: 两者都是接口: Collectoin是java集合框架的一个顶级接口,存储的元素可以是任意类型的对象: Map是java集合框架的映射接口,以键值对的形式存储对象: 也就是说,colle ...
    
			
    5. 
						
  5. Linux Shell——流程控制
			
    1. 创建交互式脚本 使用 echo命令的选项 关于各种命令的使用,可以使用man 命令来查看命令的详细用法介绍.例如,我想看下 echo 的用法和各种选项.可以执行 man echo.执行结果如下: ...
    
			
    6. 
						
  6. [ext4]07 磁盘布局 - 块/inode分配策略
			
    Ext4系统从设计上就认为数据局部性是文件系统的文件系统的一个理想品质. 在机械硬盘上,相关联的数据存放在相近的blocks上,可以使得在访问数据时减少磁头驱动器的移动距离,从而加快IO访问. 在SS ...
    
			
    7. 
						
  7. Spring框架基础知识
			
    本人博客文章网址:https://www.peretang.com/basic-knowledge-of-spring-framework/ Spring框架简介 Spring , 一个开源的框架 , ...
    
			
    8. 
						
  8. hdu1151有向图的最小顶点覆盖
			
    有向图的最小路径覆盖=V-二分图最大匹配. Consider a town where all the streets are one-way and each street leads from o ...
    
			
    9. 
						
  9. 分享几个日常调试方法让js调试更简单
			
    下面分享几个日常调试代码的时候在Console命令行显示你的操作,让你的js调试更简单. console显示信息的命令 在浏览器按f12在console上显示你的文本. <!DOCTYPE ht ...
    
			
    10. 
						
  10. python 爬取淘宝的模特照片
			
    前段时间花了一部分时间学习下正则表达式,总觉得利用正则要做点什么事情,所以想通过爬取页面的方式把一些美女的照片保存下来,其实过程很简单. 1.首先读取页面信息: 2.过滤出来照片的url地址: 3.通 ...
    
			
    11.