盒模型

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. Centos 7 编译安装mariadb 5.5
			
    一.环境 OS :Linux 3.10.0-693.el7.x86_64 mariadb下载地址: ]# wget https://downloads.mariadb.org/interstitial ...
    
			
    2. 
						
  2. Html学习之六（CSS选择器的使用--基础选择器的使用）
			
    一.基础选择器 1.id选择器 2.class选择器 3.元素选择器 <!DOCTYPE html> <html> <head> <meta charset= ...
    
			
    3. 
						
  3. day57 choise字段与ajax
			
    一.choice字段. 在django的orm中,创建如同性别,民.族等可选择的字段时,可以选择使用choice字段进行定义. 这样的定义可以使用简单的数字代替数据量大的字符,减少数据库的负担. ch ...
    
			
    4. 
						
  4. 不获取元素，直接使用id操作dom元素
			
    今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...
    
			
    5. 
						
  5. luoguP3292 [SCOI2016]幸运数字(倍增做法)
			
    题意 线性基套上树上倍增即可,注意边界. code: #include<bits/stdc++.h> using namespace std; typedef long long ll;  ...
    
			
    6. 
						
  6. luoguP2480 [SDOI2010]古代猪文
			
    题意 考虑所求即为:\(G^{\sum\limits_{d|n}C_n^d}\%999911659\). 发现系数很大,先用欧拉定理化简系数:\(G^{\sum\limits_{d|n}C_n^d\% ...
    
			
    7. 
						
  7. Vue v-for操作与computed结合功能
			
    <!doctype html> <html lang="en"> <head id="head"> <meta cha ...
    
			
    8. 
						
  8. AtCoder Beginner Contest 139F Engines
			
    链接 problem 给出\(n\)个二元组\((x,y)\).最初位于原点\((0,0)\),每次可以从这\(n\)个二元组中挑出一个,然后将当前的坐标\((X,Y)\)变为\((X+x,Y+y)\ ...
    
			
    9. 
						
  9. 认识一下transition
			
    transition 以前的CSS属性切换时,由于只有开始和截止两个状态,切换时略显生硬 jquery.animate 传说中的jquery在保证兼容性之后,又为开发者提供了简洁的过渡(动画其中之一效 ...
    
			
    10. 
						
  10. PyCharm2019.3.1专业版激活
			
    PyCharm2019.3.1专业版激活 Python的IDE非常多,但个人感觉PyCharm最好用.JetBrains 致力于为开发者打造最高效智能的开发工具,与2019.12.19带来新的版本20 ...
    
			
    11.