盒模型

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. linux passwd批量修改用户密码
			
    linux passwd批量修改用户密码 对系统定期修改密码是一个很重要的安全常识,通常,我们修改用户密码都使用 passwd user 这样的命令来修改密码,但是这样会进入交互模式,即使使用脚本也不 ...
    
			
    2. 
						
  2. 环形链表 II
			
    给定一个链表,返回链表开始入环的第一个节点. 如果链表无环,则返回 null. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 - ...
    
			
    3. 
						
  3. Manthan, Codefest 18 (rated, Div. 1 + Div. 2) E bfs + 离线处理
			
    https://codeforces.com/contest/1037/problem/E 题意 有n个人,m天,在第i天早上,x和y会成为朋友,每天晚上大家都要上车,假如一个人要上车那么他得有至少k ...
    
			
    4. 
						
  4. 【2019.8.12 慈溪模拟赛 T2】汪哥图（wang）（前缀和）
			
    森林 考虑到题目中给出条件两点间至多只有一条路径. 就可以发现,这是一个森林. 而森林有一个很有用的性质. 考虑对于一棵树,点数-边数=\(1\). 因此对于一个森林,点数-边数=连通块个数. 所以, ...
    
			
    5. 
						
  5. AtCoder Grand Contest 036
			
    Preface 这篇已经鸽了好久的说,AGC037都打完了才回来补所以题目可能都记不大清楚了,如有错误请指正 这场感觉难度远高于上一场,从D开始就不会了,E没写(看了题解都不会写),F就是抄曲明姐姐的 ...
    
			
    6. 
						
  6. Asp.Net Core 工作单元 UnitOfWork UOW
			
    Asp.Net Core 工作单元示例 来自 ABP UOW 去除所有无用特性 代码下载 : 去除所有无用特性版本,原生AspNetCore实现 差不多 2278 行代码: 链接:https://pa ...
    
			
    7. 
						
  7. Go 中 ORM 的 Repository（仓储）模式
			
    ORM 在业务开发中一直扮演着亦正亦邪的角色.很多人赞颂 ORM,认为 ORM 与面向对象的契合度让代码简洁有道.但是不少人厌恶它,因为 ORM 隐藏了太多的细节,埋下了超多的隐患.在 Go 中,我们 ...
    
			
    8. 
						
  8. Python连载41-yield from详解、委派生成器
			
    一. 1.yield from (1)调用协程为了得到返回值,协程必须正常终止 (2)生成器正常终止会发出StopIteration异常,异常对象的value属性保存返回值. (3)yield fro ...
    
			
    9. 
						
  9. FaaS（函数即服务） + BaaS（后台即服务）
			
    作者 | 黄子毅(紫益) 阿里前端技术专家 导读:前端开发者是最早享受到 “Serverless” 好处的群体,因为浏览器就是一个开箱即用.甚至无需为计算付费的环境!Serverless 把前端开发体 ...
    
			
    10. 
						
  10. LeetCode 150：逆波兰表达式求值 Evaluate Reverse Polish Notation
			
    题目: 根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. Evaluate the value of an arithm ...
    
			
    11.