盒模型

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. excel工资表，转化为word工资单
			
    1.新建excel表,.xls格式; .xlsx格式的添加到word中会报错‘无法打开数据源’(office 2007): 2.新建word文档.docx格式: 3.邮件——开始邮件合并——信函,选择 ...
    
			
    2. 
						
  2. 有用的link
			
    资料 了解oi 刘汝佳代码仓库(紫书 c++参考手册 2018年洛谷日报索引 2019年洛谷日报索引 (其他oj: luogu 虚拟判官(名校oj都有 离线bzoj题库 (有时候进不去请点:rxz大爷 ...
    
			
    3. 
						
  3. table表格属性
			
    
			
    4. 
						
  4. 常见算法合集[java源码+持续更新中...]
			
    一.引子 本文搜集从各种资源上搜集高频面试算法,慢慢填充...每个算法都亲测可运行,原理有注释.Talk is cheap,show me the code! 走你~ 二.常见算法 2.1 判断单向链 ...
    
			
    5. 
						
  5. Python基础-day02-3
			
    循环 目标 程序的三大流程 while 循环基本使用 break 和 continue while 循环嵌套 01. 程序的三大流程 在程序开发中,一共有三种流程方式: 顺序 -- 从上向下,顺序执行 ...
    
			
    6. 
						
  6. vue前端post请求之坑
			
    最近用的vue请求数据,坑死,还是对前端vue框架不熟. 与后端通信有问题,要么是json加入到url有问题.要么是json解析有问题. 解决方法: 1.请求参数一个用url传 var json=[{ ...
    
			
    7. 
						
  7. vue+element 动态表单验证
			
    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...
    
			
    8. 
						
  8. 转 推荐 33 个 IDEA 最牛配置，写代码太爽了！
			
    本文由 简悦 SimpRead 转码, 原文地址 https://mp.weixin.qq.com/s/neyvJouuG1Rmxn3BwfRXVg 作者:琦彦 blog.csdn.net/fly91 ...
    
			
    9. 
						
  9. Linux(CentOS)启动时自动执行脚本(rc.local)
			
    下面说说通过rc.local文件进行开机启动 1.首先创建一个启动脚本,这里以启动docker为例 创建 docker-startup.sh 脚本 #! /bin/bash /usr/bin/mk-d ...
    
			
    10. 
						
  10. SpringBoot与Swagger整合
			
    1 SpringBoot与Swagger整合https://blog.csdn.net/jamieblue1/article/details/99847744 2 Swagger详解(SpringBo ...
    
			
    11.