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. MySQL数据库主从同步配置
			
    主服务器必须打开开二进制日志. 主要是修改配置文件 , 一般在 linux 下安装的 mysql 配置文件是 my.cnf, 在 windwos 下是 my.ini, 修改主服务器配置文件 serve ...
    
			
    2. 
						
  2. STM32、Cortex-A、Cortex-R、Cortex-M、SecurCore
			
    STM32是就是基于Cortex-M3这个核生产的CPU. arm7是arm公司推出的以V4指令集设计出来的arm核--其代表的芯片有s3c44b0 arm9是arm公司推出的以V5指令集设计出来的a ...
    
			
    3. 
						
  3. yum仓库
			
    1.概念: Yum仓库则是为进一步简化RPM管理软件难度而设计的,Yum能够根据用户的要求分析出所需软件包及其相关依赖关系,自动从服务器下载软件包并安装到系统 yum的工作原理:执行yum命令――&g ...
    
			
    4. 
						
  4. bzoj1898 [Zjoi2005]沼泽鳄鱼
			
    Description 潘塔纳尔沼泽地号称世界上最大的一块湿地,它地位于巴西中部马托格罗索州的南部地区.每当雨季来临,这里碧波荡漾.生机盎然,引来不少游客.为了让游玩更有情趣,人们在池塘的中央建设了几 ...
    
			
    5. 
						
  5. bzoj2144 【国家集训队2011】跳跳棋
			
    Description 跳跳棋是在一条数轴上进行的.棋子只能摆在整点上.每个点不能摆超过一个棋子.我们用跳跳棋来做一个简单的游戏:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动把他 ...
    
			
    6. 
						
  6. 蓝桥杯-第一个数字-java
			
    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称:  ...
    
			
    7. 
						
  7. poj3264线段数求最大最小值
			
    链接:https://vjudge.net/contest/66989#problem/G 完完全全的水题,还是被坑了,一个return忘了写,de了半天bug!! #include<iostr ...
    
			
    8. 
						
  8. Oracle 12C 新特性之表分区带 异步全局索引异步维护（一次add、truncate、drop、spilt、merge多个分区）
			
    实验准备:-- 创建实验表CREATE TABLE p_andy(ID number(10), NAME varchar2(40))PARTITION BY RANGE (id)(PARTITION  ...
    
			
    9. 
						
  9. 使用Cmder的几个问题
			
    Cmder 全尺寸版本 [101022] 新版本的 Cmder Full 版本,安装包目录的 config 目录下,已经没有 aliases 文件,在 vendor 下的 init.bat 下也没有了 ...
    
			
    10. 
						
  10. 龟兔赛跑，杭电oj-2059
			
    原题地址:http://acm.hdu.edu.cn/showproblem.php?pid=2059 [Problem Description] 据说在很久很久以前,可怜的兔子经历了人生中最大的打击 ...
    
			
    11.