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. PROFINET如何实现实时性
			
    平时我们都听过文艺作品要“源于生活而高于生活”.PROFINET是基于工业以太网的,用文艺范儿的词汇说就是“源于以太网而高于以太网”.那么,PROFINET是怎么做到“高于以太网”的呢? 要做到比普通 ...
    
			
    2. 
						
  2. java 集合框架(TreeSet操作,自动对数据进行排序,重写CompareTo方法)
			
    /*TreeSet * treeSet存入数据后自动调用元素的compareTo(Object obj) 方法,自动对数据进行排序 * 所以输出的数据是经过排序的数据 * 注:compareTo方法返 ...
    
			
    3. 
						
  3. 学习Java之前操作环境的安装及配置
			
    1.根据自己的系统版本下载相应版本的JDK(Java开发运行时环境) 查看自己系统版本的方法:在桌面上右键计算机(win7,win10是此电脑,XP是我的电脑),点击属性,进入到计算机属性页面以后里面 ...
    
			
    4. 
						
  4. JTextArea自动换行以及设置滚动条
			
    应将JTextArea置于JScrollPanel中若要使只有垂直滚动条而没有水平滚动条,使用JTextArea.setLineWrap(true),自动换行. 文本换行代码片段如下: JTextAr ...
    
			
    5. 
						
  5. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器
			
    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...
    
			
    6. 
						
  6. 使用font-size：0去掉inline-block元素之间的空隙
			
    现代浏览器的最新版都支持inline-block,只有该死的ie6.7不支持inline-block,但ie6.7可以通过 display:inline: zoom:1: 来模拟 下面是inline- ...
    
			
    7. 
						
  7. Jenkins + Maven + Ansible + Tomcat 实现JAVA代码自动部署
			
    自动部署过程: jenkins从svn拉取代码,调用maven去打war包,用ansible去解压war包,最后重启tomcat. 前情回顾:在前面的文章我的环境已经有Jenkins+ansible  ...
    
			
    8. 
						
  8. 如何在Linux实现自动运行程序
			
    1.开机启动时 Linux加载后, 它将初始化硬件和设备驱动, 然后运行第一个进程init. init根据配置文件继续引导过程,启动其它进程.通常情况下,修改放置在 /etc/rc或 /etc/rc. ...
    
			
    9. 
						
  9. 【css笔记(2)】如何给元素应用规则?
			
    css选择器 在介绍之前我么你先来看看css大致分为几种选择器: 1.类型选择器(元素选择器) 2.后代选择器(元素的所有后代) 3.伪类(:active, :hover, :focus, :link ...
    
			
    10. 
						
  10. maven 热部署至tomcat
			
    1.配置tomcat的界面访问账号和权限./tomcat/conf目录下tomcat-users.xml添加 这里是根据自己的需求添加的一个角色权限 <role rolename="a ...
    
			
    11.