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. cmd中添加snmpd被控
			
    在cmd中添加snmpd被控,减少手动操作步骤. net stop sharedaccess reg add HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\s ...
    
			
    2. 
						
  2. Hibernate考试试题（部分题库）含答案
			
    Hibernate考试试题 (题库) 1.  在Hibernate中,下列说法正确的有( ABC ).[选三项] A．Hibernate是一个开放源代码的对象关系映射框架 B．Hibernate对JD ...
    
			
    3. 
						
  3. bootstrap快速入门笔记（三）响应式，行,列，偏移量，排序
			
    一,响应式列重置 .clearfix <div class="row"> <div class="col-xs-6 col-sm-3"> ...
    
			
    4. 
						
  4. waiting for spring......
			
    世间哪得双全法,不负如来不负卿....<仓央嘉措>
    
			
    5. 
						
  5. MySQL常见建表选项以约束
			
    一.CREATE TABLE 选项 1.在定义列的时候,指定列选项 1)DEFAULT <literal>:定义列的默认值 当插入一个新行到表中并且没有给该列明确赋值时,如果定义了列的默认 ...
    
			
    6. 
						
  6. shell 分割字符串存至数组
			
    shell 分割字符串存至数组 shell编程中,经常需要将由特定分割符分割的字符串分割成数组,多数情况下我们首先会想到使用awk但是实际上用shell自带的分割数组功能会更方便.假如a=”one,t ...
    
			
    7. 
						
  7. CSS之定位布局（position，定位布局技巧）
			
    css之定位 1.什么是定位:css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静态(默认))通过定位属性可以设 ...
    
			
    8. 
						
  8. 进击 spring ！！
			
    1.spring简介 Spring 是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的主要优势之一就是其分层架构,分层架构允许您选择使用某一个组件,同时为 J2EE 应用程序开发提供集成 ...
    
			
    9. 
						
  9. zabbix监控docker
			
    [toc] 1.下载模版 然后把模版放到/usr/local/lib/zabbix/agent下 github地址内含监控模版 2.修改 zabbix-agentd 配置文件 vim /usr/loc ...
    
			
    10. 
						
  10. MFC六大关键技术
			
    视频教程地址观看:http://pan.baidu.com/s/1mhKQ6kK 1.MFC六大关键技术sada)MFC程序的初始化过程:从CWinApp类派生一个应用程序类:使用派生类定义的全局变量 ...
    
			
    11.