盒模型

1.属性:width :内容的宽度 书写内容的宽度

height:内容的高度 书写内容的宽度

padding:内边框 内容到边框的距离  可以有  background-color

border:边框 可以显示颜色 就是比作一个门框  border: 10px solid green;

margin:外边框 另一个边到另一个变的距离

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .box{

             width: 50px;

             height: 50px;

             background: aqua;

             border: 50px solid red;

             padding: 50px ;

         }

     </style>

 </head>

 <body>

 <div class="box"></div>

 </body>

 </html>

展示盒模型

2.关于移动

padding 是关于父子的移动  就是是本身在整个内容下进行整体的上下左右

用padding-left.top,right,buttom 来进行移动

margin 是关于兄弟之间的移动 可以通过margin-left... 移动像素

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .box{

             width: 100px;

             height: 100px;

             background: blue;

             padding-left: 100px;

             border: 1px solid red ;

         }

         span{

             background: crimson;

         }

         .qqq{

             margin-left: 50px;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <span>zq</span>

         <span class="qqq">zq</span>

 </div>

 <div class="box">

     <span>zq</span>

 </div>

 </body>

 </html>

margin 移动

盒模型的计算：
   总结：如果保证盒模型的大小不变，加padding 就一定要减width或者减height
   前提是：在标准文档流
         padding：父子之间调整位置
         margin: 兄弟之间调整位置

3.浮动
在一个盒子上,包含了许多了不同的div  要是能在一个界面上显示多种不同的颜色就需要颜色划分,但是在一个
已经分配好的布局上怎么加入其他的颜色呢,这就需要浮动,使其变成不标准的界面
float 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         .top-Bar{

             width: 100%;

             height: 40px;

             background: lightslategrey;

         }

         /*将这和区域居中*/

         .container{

             width: 1624px;

             height: 40px;

             background: red;

             padding: auto;

             margin: auto;

         }

         /*将这片区域用嵌套的方式并排掺入,因为引用了浮点,不再是标准的*/

         .top-Bar .top-1{

             width: 700px;

             height: 40px;

             background: darkslateblue;

             float: left;

         }

         /*将这片区域以右对的方式,同上*/

         .top-Bar .top-shop{

             width: 150px;

             height: 40px;

             background: darkolivegreen;

             float: right;

         }

         .top-Bar .top-info{

             width: 100px;

             height: 40px;

             background: sandybrown;

             float: right;

             margin-right: 20px;

         }

     </style>

 </head>

 <body>

     <div class="top-Bar">

         <div class="container">

             <div class="top-1">

             </div>

             <!--这里注意是包含在container里面 -->

             <div class="top-shop"></div>

             <div class="top-info"></div>

         </div>

     </div>

 </body>

 </html>

浮动

												


											
css 序的更多相关文章
	

    
								
  1. Matplotlib数据可视化（3）：文本与轴
		
      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
    
		
    2. 
						
  2. CSS列表逆序
		
    要使列表逆序的话,大多数人包括我一半都会选择在ol标签里使用reversed属性 <ol reversed> <li>first</li> <li>se ...
    
		
    3. 
						
  3. CSS font-family的順序
		
    2016年09月07日 13時51分 wanglinqiang整理 相信大家都知道基本的用法是這樣: font-family:font1,font2,serif; 系統有font1就先用font1 如 ...
    
		
    4. 
						
  4. HTML、CSS、JS 复习——序
		
    HTML在MVC中担任着M的角色.由HTML组成的节点称之为HTML DOM.要想成为一流的大神,就必须能分分钟建立起一个强大的HTML DOM.而要做到这点,就必须了解甚至精通HTML. CSS在M ...
    
		
    5. 
						
  5. IOS-程序员和设计师必备的20个CSS工具
		
    程序员和设计师必备的20个CSS工具   CSS工具是现今网站开发人员和设计人员使用的最必要和最重要的工具之一.这是因为这些CSS工具,可以为开发人员和设计人员简化手头的工作,大大减少web开发和设计 ...
    
		
    6. 
						
  6. 网站美化常见CSS
		
    伴随网络时代日新月异的发展,用户不仅仅满足于软件系统的功能需求,对软件系统的页面显示效果以及交互模式的要求也逐渐提高.尤其是展示性质的平台页面对于界面美化效果要求更高,有一句话说的好:Html是结构, ...
    
		
    7. 
						
  7. css权重计算方法浅谈
		
    在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
    
		
    8. 
						
  8. 前端试题本（HTML+CSS篇）
		
    CS1. 下面关于IE.FF下面CSS的解释区别描述正确的有?(不定项)CS2请选出结构正确的选项CS3.下面哪些是HTML5 新增的表单元素?CS4在使用table表现数据时,有时候表现出来的会比自 ...
    
		
    9. 
						
  9. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）
		
    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 创建一个任意大小的全色矩阵  python
			
    img = np.zeros((112,112,3))#cv2.imread('F:/project/Breast/InBreast/INBreast/outimgpatch/allnocalcifi ...
    
			
    2. 
						
  2. LG3237 「HNOI2014」米特运输  树形DP
			
    问题描述 LG3237 题解 问题转化为: 要求将这棵树,满足 结点 \(x\) 所有孩子权值相等 结点 \(x\) 权值等于所有孩子权值和 将乘法转化为 \(\log\) 加法 \(\mathrm{ ...
    
			
    3. 
						
  3. Python 基础排序算法
			
    冒泡排序(bubble sort) 思路 以升序为例: 从第一个数开始向后两两对比,将大的数一直向后移动,直至最大的数移到最后,再找第二大的数 最好情况:O(n) 一般情况:O(n^2) 最坏情况:O ...
    
			
    4. 
						
  4. oracle用户管理, 授权与回收权限
			
    一. 用户管理参数, 0.删除用户: drop user 用户名 [cascade] 当我们删除用户时, 如改用户已创建过数据对象, 那么删除用户时必须加cascade参数, 用来同步删除 改用户的所 ...
    
			
    5. 
						
  5. Note | PyTorch1.2 + CUDA10.0 + cuDNN7.6 + Anaconda3配置
			
    目标: 在2080Ti GPU上,运行PyTorch1.2 GPU版本. 经过确认,PyTorch1.2可以搭配CUDA10.0,而CUDA10.0搭配cuDNN7.6(官网下载页面可以直接看到).  ...
    
			
    6. 
						
  6. 解惑：如何使得寝室的电脑和实验室的电脑远程相互访问（Linux和Windows）
			
    解惑:如何使得寝室的电脑和实验室的电脑远程相互访问 一.前言 自从接触计算机网络之后就一直想着把实验室的电脑和自己寝室的电脑远程连接起来,结果总是郁郁不能成功,网上这样的教材也少的可怜,于是总是搁置下 ...
    
			
    7. 
						
  7. OneNote: 一站式笔记管理平台
			
    
			
    8. 
						
  8. linq 大数据 sql 查询及分页优化
			
    前提: 需要nuget   PredicateLib   0.0.5: SqlServer  2008R2 (建议安装 64 位): .net 4.5 或以上: 当前电脑配置: I7 4核  3.6G ...
    
			
    9. 
						
  9. 一个简单的 WPF 程序，用于显示实时时间
			
    直接贴代码了: TimeShowerWindow.xaml <Window x:Class="HelloWorld.TimeShowerWindow" xmlns=" ...
    
			
    10. 
						
  10. 爬虫常用正则、re.findall 使用
			
    爬虫常用正则 爬虫经常用到的一些正则,这可以帮助我们更好地处理字符. 正则符 单字符 . : 除换行以外所有字符 [] :[aoe] [a-w] 匹配集合中任意一个字符 \d :数字 [0-9] \D ...
    
			
    11.