一 盒模型

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. hive语句on和where一点小问题

    hive join 后面必须=(0.13版本后支持,不支持like,<>),on后面如需加条件语句必须放到where中不然会产生错误结果 (可以一对多,一对一,不可以多对多‘会出现数据翻倍 ...

  2. 2019-4-16-C#-在-8.0-对比-string-和-string_-的类型

    title author date CreateTime categories C# 在 8.0 对比 string 和 string? 的类型 lindexi 2019-04-16 10:16:56 ...

  3. Dijkstra,floyd,spfa三种最短路的区别和使用

    这里不列举三种算法的实现细节,只是简单描述下思想,分析下异同 一 Dijkstra Dijkstra算法可以解决无负权图的最短路径问题,只能应付单源起点的情况,算法要求两个集合,开始所有点在第二个集合 ...

  4. 洛谷P1313 [NOIP2011提高组Day2T1]计算系数

    P1313 计算系数 题目描述 给定一个多项式(by+ax)^k,请求出多项式展开后x^n*y^m 项的系数. 输入输出格式 输入格式: 输入文件名为factor.in. 共一行,包含5 个整数,分别 ...

  5. linux源码安装

    以安装xxx.tar.gz为例: 源码存放位置:/usr/local/src/ 安装路径:/usr/local/xxx/ 配置文件存放位置:/usr/local/xxx/etc/ 可执行文件存放位置: ...

  6. angular.module()创建、获取、注册angular中的模块

    // 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块 var createModule = angular.module("myModule", []); // 只 ...

  7. PHP判断一个文件是否能够被打开

    <?php // 需求:因为系统涉及大量的文档知识库,用户可以在线进行查看.为了验证文档是否正常打开.先需要从数据库取出路径和文件名,判断是否可以从对应的路径下打开文件.header(" ...

  8. 第二周<导学/分类>

    分类学习 分类算法各有不同 knn naivebyes regression dnn sklearn.linear_modlel 线性函数 sklearn.preprocessing 非线性函数 分类 ...

  9. 为Apple Watch而战-----（初级篇）

    重要 本文档是开发过程中使用的API或者技术的初步文档.苹果提供该文档以便于开发者使用苹果产品上使用技术和编程接口.后期该文档中信息会有所变动,所以依据本文档开发的软件应当使用最终的操作系统软件进行测 ...

  10. python装饰器2

    装饰模式有很多经典的使用场景,例如插入日志.性能测试.事务处理等等,有了装饰器,就可以提取大量函数中与本身功能无关的类似代码,从而达到代码重用的目的.下面就一步步看看Python中的装饰器. 一个简单 ...