盒模型

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. 2017年蓝桥杯B组C/C++决赛题目
			
    2017年第八届蓝桥杯B组C/C++决赛题目 点击查看2017年蓝桥杯B组C/C++决赛题解     1.36进制 对于16进制,我们使用字母A-F来表示10及以上的数字. 如法炮制,一直用到字母Z, ...
    
			
    2. 
						
  2. 第七周第二次Scrum会议
			
    工作: 根据上个周对前端的布置学习,布置大家开发了相应的界面.(界面开发成果写在测试报告) 地点: 二餐二 会议照片: 忘记拍了... 核心问题: 如何编写统一风格的前端界面. 解决: 将相应资源打包 ...
    
			
    3. 
						
  3. 【Spring JDBC】数据源配置（二）
			
    一.Spring内置数据源 1. 创建Maven Project,修改pom.xml <properties> <!-- JDK版本 --> <java.version& ...
    
			
    4. 
						
  4. Matlab各种拟合
			
    作者:Z-HE链接:https://zhuanlan.zhihu.com/p/36103034来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1) polyfit 代码 ...
    
			
    5. 
						
  5. 【2019.8.6 慈溪模拟赛 T3】集合（set）（线段树上DP）
			
    线段树上\(DP\) 首先发现,每个数肯定是向自己的前驱或后继连边的. 则我们开一棵权值线段树,其中每一个节点记录一个\(f_{0/1,0/1}\),表示在这个区间左.右端点是否连过边的情况下,使这个 ...
    
			
    6. 
						
  6. django restful framework教程大全
			
    一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...
    
			
    7. 
						
  7. 代码问题【TADT//CVPR2019】
			
    paper:Li X, Ma C, Wu B, et al. Target-Aware Deep Tracking[C]. //CVPR2019 调用adam.m时候报错 结构体内容引用自非结构体数组 ...
    
			
    8. 
						
  8. 在Azure DevOps Server中运行基于Spring Boot和Consul的微服务项目单元测试
			
    1 概述 谈到微服务架构体系,绕不开服务发现这个功能.服务发现机制是简化微服务配置.实现容灾.水平扩缩容.提高运维效率的重要方式.在服务发现工具中,Consul在部署和使用方面与容器结合的天衣无缝,成 ...
    
			
    9. 
						
  9. SpringBoot整合log4j2导入新的依赖出现jar冲突解决
			
    1.问题复现: 之前在SpringBoot中配置整合了log4j2,今天在pom文件中,导入新的依赖(依赖如下)之后, <dependency> <groupId>com.gi ...
    
			
    10. 
						
  10. vue做的项目每次打开新页面不会显示页面顶部的解决办法
			
    在main.js 中添加代码: router.afterEach((to,from, next) => { window.scrollTo(0,0) }) 然后就会发现每次打开页面都是显示的是页 ...
    
			
    11.