一 盒模型

1属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

2例子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>盒模型</title>

     <style>

         div{

             width:200px;

             height:200px;

             background-color: red;

             padding: 50px; #如果写四个数字顺序是上右下左

             border: 1px solid green;

         }

     </style>

 </head>

 <body>

 <div>

 </div>

 </body>

 </html>

 </body>

 </html>

3 图解

二 margin用法

标准文档流：
margin:调整兄弟之间的距离
padding:调整父子标签之间的位置，注意盒模型的计算

坑1：
margin垂直方向塌陷问题：
当设置第一个盒子为margin-bottom:50px;
第二个盒子为margin-top:100px;那么小的margin会掉到大的magin中，这就是margin塌陷
水平方向上不会出现塌陷问题。

非标准文档流（脱标）：

标准流下的标签,兄弟之间使用margin调整位置，父子之间使用padding调整子标签的位置（小心盒模型的计算）
脱标的元素，margin和padding可以任意使用
浮动的盒子： margin: 0 auto;不起任何作用
使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

例子一：标准文档流：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>margin用法</title>

     <style>

         .box{

             width:200px;

             height:200px;

             background-color: red;

             margin-bottom: 50px;

             /*margin-left: -20px;*/

         }

         .box2{

             width: 200px;

             height: 200px;

             background-color: yellow;

             margin-top: 50px;

         }

         span{

             background-color: red;

         }

         .t{

             margin-right: 20px;

             /*右边出现20px的距离，并不是他自己向右移动20px*/

         }

         .f{

             margin-left: 10px;

         }

     </style>

 </head>

 <body>

 <div class="box">

     漂洋过海来看你

 </div>

 <div class="box2">

 </div>

 <span class="t">看就看就看</span>

 <spanc class="f">大幅度发</spanc>

 </body>

 </html>

例子二：脱标情况下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动元素margin塌陷不会出现问题</title>

     <style>

         .father{

             width: 300px;

             height: 500px;

             border: 1px solid red;

         }

         .box1{

             width: 200px;

             height: 30px;

             background-color: yellow;

             margin-bottom: 50px;

             float: left;

         }

         .box2{

             width: 200px;

             height: 50px;

             background-color: green;

             margin-top: 50px;

             float: left;

         }

     </style>

 </head>

 <body>

 <div class="father">

     <div class="box1">

         1

     </div>

     <div class="box2">

         2

     </div>

 </div>

 </body>

 </html>

三 浮动float

1 浮动

（1）脱标：脱标的元素不在标准文档流下占位置
浏览器认为第一个盒子不是标准文档流的盒子，认为第二个盒子为标准文档流下的盒子
（2）浮动的元素互相贴靠
（3）浮动元素有字围效果
第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示
（4）凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置
浮动永远不是一个盒子在浮动，要浮动一起浮动

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         div{

             width: 200px;

             height: 200px;

         }

         .box1{

             background-color: red;

             float: left;

             height: 300px;

         }

         .box2{

             background-color: yellow;

             float:left;

             width: 230px;

         }

         .box3{

             background-color: blue;

             float: left;

             height: 100px;

         }

     </style>

 </head>

 <body>

 <div class="box1">

     1

 </div>

 <div class="box2">

     2

 </div>

 <div class="box3">

     3

 </div>

 </body>

 </html>

2 浮动的字围效果（文字围绕图片）

<!--第一个元素浮动，第二个元素不浮动，那么第二个元素的文字会围绕着第一个浮动元素显示-->
例子：
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>字围效果</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         .box{

             width: 200px;

             height: 200px;

             background-color: red;

             float: left;

         }

         p{

             margin-left: 150px;

             padding-left: 168px;

         }

         img{

             height: 200px;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <img src="../day10/test.jpg" alt="紫霞仙子">

 </div>

 <p>紫霞和青霞原是佛祖缠在一起的灯芯，两人前世斗争激烈。所以佛祖就把她们两个卷在一起变成一根灯芯，

     要她们苦练修行化解这段恩怨，可惜事与愿违，导致比以前斗得更厉害了。在电影里，他们两个用一个躯体，

     白天是紫霞，晚上是青霞。由于紫霞单纯执着，为爱痴狂，只羡鸳鸯不羡仙，为了寻找自己的爱情不顾一切私下凡间，

     发现至尊宝是自己的如意郎君后追求至尊宝，未遂，后迷失在大沙漠，被牛魔王救出并遭其逼婚。在影片最后，

     紫霞和青霞和好了。后来紫霞为保护变成孙悟空的至尊宝被牛魔王一叉刺死，青霞回到了如来佛祖那里当灯芯。

 </p>

 </body>

 </html>

3 只要是浮动的元素都可以设置宽高

例子：

 <!--（4）凡是脱标（浮动、绝对定位、固定定位）的元素，不区分行内标签还是块标签，宽高可以任意设置-->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动</title>

     <style>

         span{

             float: left;

             width: 100px;

             height: 100px;

             background-color: red;

         }

         div{

             float: left;

             width: 200px;

             height: 200px;

             background-color: yellow;

         }

     </style>

 </head>

 <body>

 <div>

     哈哈

 </div>

 <span>你好</span>

 <span>好啊</span>

 </body>

 </html>

4 浮动带来的问题

父盒子撑不起来了

解决办法：四种方法任选其一都可以

（1）给父盒子设置固定高度 百年不变导航栏
（2）内墙法：这个方法不常用
给最后一个浮动的元素添加一个块级标签，并且该标签设置属性 clear：both;
（3）伪元素清除法：********
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
clear: both
}
（4）overflow:hidden

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>浮动带来的问题</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         .father{

             width: 100%;

             margin: 0 auto;

             /*height: 200px;*/

             /*第一种解决办法给父盒子设置固定高度*/

             background-color: black;

             /*第四种方法：给父盒子加上overflow*/

             /*overflow: hidden;*/

         }

         .box1{

             width: 200px;

             height: 100px;

             background-color: red;

             float: left;

             margin: 0 auto;

         }

         .box2{

             width: 200px;

             height: 200px;

             background-color: yellow;

             float: left;

         }

         .box3{

             width: 200px;

             height: 100px;

             background-color: blue;

             float: left;

         }

         /*第二种方法内墙法*/

         .clearfix{

             clear: both;

         }

         /*第三种方法伪元素清除法*/

         /*.clearfix:after{*/

             /*content: '.';*/

             /*display: block;*/

             /*height: 0;*/

             /*visibility: hidden;*/

             /*clear: both;*/

         /*}*/

     </style>

 </head>

 <body>

 <div class="father">

     <div class="box1">

          1

     </div>

     <div class="box2">

          2

     </div>

     <div class="box3">

         3

     </div>

     <div class="clearfix">

     </div>

 </div>

 <div class="active"></div>

 </body>

 </html>

四 overflow用法

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>overflow用法</title>

     <style>

         body{

             overflow: auto;

         }

         div{

             width: 500px;

             height: 100px;

             border: 1px solid red;

             overflow: inherit;

             /*overflow: scroll;*/

         }

     </style>

 </head>

 <body>

 <div>

     唐朝（618年—907年），是继隋朝之后的大一统王朝，共历二十一帝，享国二百八十九年，因皇室姓李，故又称为李唐，是公认的中国最强盛的时代之一。

 隋末天下群雄并起，617年，唐国公李渊晋阳起兵，次年于长安称帝建立唐朝。唐太宗继位后开创“贞观之治”。唐高宗承贞观遗风开创“永徽之治”。690年，武则天以周代唐，定都洛阳，史称武周。神龙革命后恢复唐朝国号。 [1-11]  唐玄宗即位后励精图治，开创了万邦来朝的开元盛世。 [12]  天宝末全国人口达八千万上下。 [13-16]  安史之乱后藩镇割据、宦官专权导致国力渐衰，中后期经唐宪宗元和中兴、唐武宗会昌中兴、唐宣宗大中之治国势复振。878年，爆发黄巢起义破坏了唐朝统治根基，907年，朱温篡唐，唐朝覆亡，中国进入五代十国。 [17]

 </div>

 </body>

 </html>

五 backgrouad用法

background-image:url(./1.jpg)
background-repeat: repeat|no-repeat|repeat-x|repeat-y
background-position: x y;
x和y如果是正值，意味着调整当前图片的位置信息，相对于原来的位置进行调整
x和y如果是负值，切背景图，注意：一定要有明确的width和height

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>背景</title>

     <style>

         .jieyi{

             border: 1px solid red;

             width: 1200px;

             height: 1000px;

             background-image: url("./zixia.jpg");

             background-repeat: no-repeat;

             /*!*调整图片位置*,可以写正数，也可以写负数/*/

             background-position: -133px -97px ;

             /*设置固定背景图像，图像不会随着页面的其他部分滚动*/

             background-attachment: fixed;

         }

     </style>

 </head>

 <body>

 <div class="jieyi"></div>

 <div class="taobao"></div>

 </body>

 </html>

六 文字属性和文本属性

（11）line-height
(1)针对单行文本垂直居中

公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。

(2)针对多行文本垂直居中

行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px

第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文字属性和文本属性</title>

     <style>

         html{

             font-size: 20px;

         }

         body{

             font-size:20px;

         }

         .box1 {

             font-size: 30px;

             border: 1px solid red;

         }

         .box2{

             width: 200px;

             height: 160px;

             background-color: green;

             text-decoration: underline;

             color: blue;

             /*coursor鼠标放到上面所显示的样式*/

             cursor: pointer;

             text-align: center;

             font-size: 20px;

             line-height: 30px;

             padding-top: 40px;

             /*font-family: "Times New Roman","Microsoft YaHei","SimSun";*/

         }

         .box2:hover{

             text-decoration: none;

         }

     </style>

 </head>

 <body>

 <div class="box1">

     文字文字文字文字文字文字文字文字文字文字文字

 </div>

 <div class="box2">

     你好 啊

 </div>

 <div class="circle">

     哈哈哈

 </div>

 </body>

 </html>

七 阿里巴巴矢量图用法

1 登录网址：http://www.iconfont.cn/

2 搜索你所需要的图标

3 添加到项目库或者下载到本地

4帮助--代码应用查看如何使用

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>iconfont</title>

     <style>

         @font-face {

           font-family: 'iconfont';  /* project id 731660 */

           src: url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.eot');

           src: url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.eot?#iefix') format('embedded-opentype'),

           url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.woff') format('woff'),

           url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.ttf') format('truetype'),

           url('http://at.alicdn.com/t/font_731660_9t01w5nx8ml.svg#iconfont') format('svg');

         }

     .iconfont{

         font-family:"iconfont" !important;

         font-size:16px;font-style:normal;

         -webkit-font-smoothing: antialiased;

         -webkit-text-stroke-width: 0.2px;

         -moz-osx-font-smoothing: grayscale;

     }

     i{

         display: block;

     }

     a{

         text-decoration: none;

         color: #777;

     }

     a:hover{

         color: #ff6700;

     }

     </style>

 </head>

 <body>

     <a href="#" title="">

         <i class="iconfont"></i>

         手机

         <i class="iconfont"></i>

         电话卡

     </a>

 </body>

 </html>

如图所示：

11-2 css盒模型和浮动以及矢量图用法的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  3. 详解CSS盒模型

    原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

  4. 详解CSS盒模型（转）

    详解CSS盒模型   阅读目录 一些基本概念 盒模型 原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概 ...

  5. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  6. CSS盒模型

    CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...

  7. 第 16 章 CSS 盒模型[下]

    学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性 使用 vis ...

  8. 7.css盒模型

    所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...

  9. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

随机推荐

  1. Linux中管理员用户与普通用户之间的切换

    使用su进行用户切换 管理员用户切换至普通用户:  su [用户名] 使用su命令从高级别用户切换至低级别用户无需输入密码 普通用户切换至管理员用户:  普通用户切换至管理员用户使用 su - 使用l ...

  2. java并发系列(三)-----ReentrantLock(重入锁)功能详解和应用演示

    1. ReentrantLock简介 jdk中独占锁的实现除了使用关键字synchronized外,还可以使用ReentrantLock.虽然在性能上ReentrantLock和synchronize ...

  3. 用navicat把MYSQL一张表的数据批追加到另外一张表

    1. 表结构完全一样 insert into 表1 select * from 表22. 表结构不一样(这种情况下得指定列名) insert into 表1 (列名1,列名2,列名3) select ...

  4. io.spring.platform继承方式和import方式更改依赖版本号的问题

    使用io.spring.platform时,它会管理各类经过集成测试的依赖版本号. 但有的时候,我们想使用指定的版本号,这个时候就需要去覆盖io.spring.platform的版本号. 前面的文章总 ...

  5. c++中merge的操作

    merge:将两个有序序列合并成一个新的序列,并对新的序列排序 所在库:<algorithm> 注意:排序规则必须和原序列规则相同.存储时下标从0开始. 函数参数:merge(first1 ...

  6. web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例

    CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7.  CSS动画--页面特效 7.1  2D.3D转换 7.1.1  通过CSS3转换,我们能够对元素进行 ...

  7. web前端学习（二）html学习笔记部分（3）--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...

  8. Spring_事务

    事务管理: 用来确保数据的完整性和一致性 事务就是一系列的动作,它们被当做一个单独的工作单元.这些动作要么全部完成,要么全部不起作用 事务的四个关键属性 原子性 一致性 隔离性 持久性 Spring两 ...

  9. NOIP模拟 7.03

    Problem 1 抓牛(catchcow.cpp/c/pas) [题目描述] 农夫约翰被通知,他的一只奶牛逃逸了!所以他决定,马上出发,尽快把那只奶牛抓回来． 他们都站在数轴上．约翰在N(O≤N≤1 ...

  10. CSS中的margin和padding的用法和区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...