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. NodeJS+express+mogondb学习笔记01
			
    0.准备工作  安装nodejs环境  官网地址:https://nodejs.org/en/  下载好了 直接一路安装 也没有什么可以说的 不得不说nodejs对于新手上手还是很友好的,再加上现在n ...
    
			
    2. 
						
  2. 【原创】10万条数据采用存储过程分页实现（Mvc+Dapper+存储过程）
			
    有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc4+Dapper+Dapper扩展+Sqlserver 目前主要实现 ...
    
			
    3. 
						
  3. angular 实现导航ng-click切换
			
    angular写的导航.自学angular已有一段时间. <!doctype html><html lang="en"><head> <m ...
    
			
    4. 
						
  4. CSS元素垂直居中方法总结
			
    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
    
			
    5. 
						
  5. 【lucene系列学习二】Lucene实现高亮显示关键词
			
    首先,导入下图所示库 然后,import org.apache.lucene.search.highlight.*; 下面,我们新建一个实现高亮显示功能的函数 public static String ...
    
			
    6. 
						
  6. java.util.zip.ZipException: invalid LOC header (bad signature)
			
    Debug on Server(Tomcat 9) 遇到这个exception: SEVERE: A child container failed during startjava.util.conc ...
    
			
    7. 
						
  7. java中使用fastjson、jackson、json-lib解析JSON-------------------妈妈再也不用担心JSON解析
			
    1.fastjson引入包<dependency> <groupId>com.alibaba</groupId> <artifactId>fastjso ...
    
			
    8. 
						
  8. linux服务器性能（网卡流量、CPU、内存、磁盘使用率）监控
			
    广义的网站的监控涵盖所有的非业务行为的数据采集与管理,包括数据分析师和产品设计师使用的网站用户行为日志.业务运行数据,以及供运维工程师和开发工程师使用的性能统计数据等. 本文主要是通过shell脚本来 ...
    
			
    9. 
						
  9. Saltstack自动化运维
			
    Saltstack三大功能 1,远程执行 2,配置管理(状态) 3,云管理 四种运行方式: Local         本地 Minion/Master C/S Syndic  代理模式 Salt S ...
    
			
    10. 
						
  10. mysql语句优化总结（一）
			
    Sql语句优化和索引 1.Innerjoin和左连接,右连接,子查询 A.     inner join内连接也叫等值连接是,left/rightjoin是外连接. SELECT A.id,A.nam ...
    
			
    11.