HTML/CSS学习笔记

HTML/CSS

1.HTML的基本标签

p标签

​ -作用：告诉浏览器哪些文字是一个段落

​ -注意点：在浏览器中会单独占一行

img标签

​ -属性：

​ -title：鼠标悬停图片显示的内容

​ -alt：当图片找不到时显示什么内容

​ -注意点：img标签不会独占一行

<img src="image/baidu.png" alt="对不起，没有此图片" title="百度">

a标签

​ -作用：用于控制页面与页面之间的跳转

​ -属性：

​ -target属性

​ target="_self"：不打开新选项卡跳转页面

​ target="_blank"：打开新选项卡跳转页面

<a href="指定需要跳转的目标界面" target="_self">需要点击的文字</a>

​ -text-decoration:none;作用：去掉a标签的下划线

base标签

​ -作用：专门用来统一的指定当前网页中所有的超链接(a标签)需要如何打开。

​ -注意点：

​ 1.base标签必须写在head标签的开始标签和接受标签之间。
​ 2.就近原则，a标签中的target比base中的target更高级

<base target="_blank">

锚点

​ -作用：可以把超链接定位到指定的位置，需要标注a标签

​ -要想通过a标签跳转到当页指定位置分两步：

​ 1.指定目标位置id属性
​ 2.告诉a标签跳转位置的id属性

格式
<h2 id="xx"></h2>
<a href="#xx">跳转到对应位置</a>

无序列表

​ -作用：给一堆数据添加列表语义，并且着一堆数据中所有的数据都没有先后之分

​ -注意点：

​ 1.ul标签是用来给一堆数据添加列表语义的，而不是用来给她们添加小圆点的

​ 2.ul最好只放li标签，但是在企业开发中，li标签中的内容可能会很复杂，所以我门可以在li标签中继续添加其他标签来完善我们的界面。

格式
<ul>
	<li>需要显示的条目内容</li>
</ul>

​ -list-style:none;的作用是去处无序列表的原点（用在ul）

​ -快捷键： ul>li*2，生成1对ul，2个li

有序列表

​ -作用：给一堆数据添加列表语义，并且着一堆数据中所有的数据都有先后之分

​

格式
<ol>
	<li>需要显示的条目内容</li>
</ol>

​

定义列表

​ -作用：

​ 1.给一堆数据添加列表语义

​ 2.先通过dt标签定义列表中的所有标题，然后再通过dd标签给每个标题添加描述信息

​ -应用场景：

​ 1.做网站尾部的相关信息

​ 2.做图文混排

​

：用来定义列表中的标题

​

：用来定义标题对应的描述

​ -注意点：一个dt可以对应多个dd，但是推荐使用一个dt对应一个dd

格式
<dl>
  <dt>北京</dt>
  <dd>中国的首都</dd>
  <dt>上海</dt>
  <dd>中国的魔都</dd>
</dl>

​

表格标签

​ -作用：用来给一堆数据添加表格语义，其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式

​ 代表表头

​ 代表一行

​ 代表一行中的一个单元格

​ -属性：

​ -width/height：设置表格的高和宽(table和td皆可用)

​ -align：center、left、right（table tr td都可用）设置表格或者文字的水平对齐方式

​ -valign：top、center、bottom（只有tr td可用）设置表格或者文字的垂直对齐方式

​ -cellspacing：外边距，单元格之间的距离，默认是2px（相当于表格边框线的粗细）

​ -cellpadding：内边距，文字和单元格之间的距离，默认是1px

​ -border：边框属性，使表格有看的见的框体

​ -bgcolor：规定文档的背景颜色（table、tr、td都可用）

​ -合并单元格：

​ -水平：colspan属性，合并水平方向向后合并，水平方向需要调整数量
​ -垂直：rowspan属性，合并垂直方向合并后，垂直向下需要调整数量

​ 列如：
​
​ 含义：把当前单元格当做两个单元格来看待

格式
<table border="1" width="500" align="center" height = "500" cellspacing="2" cellpadding="0" bgcolor="black">
  <tr align="center" bgcolor="white">
    <th>表头</th>  <!--colspan="3"--> <!--rowspan="2"-->
    <th>表头</th>
    <th>表头</th>
  </tr>
  <tr align="center" bgcolor="white">
    <td>1.1</td>  <!--colspan="3"--> <!--rowspan="2"-->
    <td>1.2</td>
    <td>1.3</td>
  </tr>
  <tr align="center" bgcolor="white">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
</table>

表单标签

​ -form表单

​ -明文输入框：

​ -暗文输入框：

​ -日历输入框：

​ （日期加时间）

​ -邮箱标签：（可以判断邮箱格式是否正确，不正确则会提示）

​ -数字标签：（只能输入数字，不能输入其他字符）

​ 给输入框设置默认值，在input标签里加上value标签

​ 例如：

​

​ -outline: none;可以消除input输入框点击后选中的状态

​ -单选框：

​ -单选框注意点

​ 1.在默认情况下单选框不会互斥，要想单选框互斥那么必须给每一个单选框标签都设置一个name属性，然后name属性还必须设置相同的值。

​ 2.如果要让单选框默认选中某一个框子，那么可以给input标签添加一个checked属性。

​ 例如：

性别：
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender">女

​ -多选框：

​ 例如：

爱好:
<input type="checkbox" checked="checked">唱歌
<input type="checkbox" checked="checked">跳舞
<input type="checkbox" checked="checked">绘画
<input type="checkbox">篮球
<input type="checkbox">足球

按钮标签

​ -普通按钮：

​ -图片按钮：

​ -重置按钮： (清空表单中的内容)

​ -提交按钮： (将表单中的数据提交到远程服务器)

​ -隐藏域：（配合提交按钮，在后台提交一些数据，用户看不到）

​ 注意：可以添加value属性改变按钮的文字显示

label标签

​ -默认情况下，文字和输入框没有关联关系。添加该标签，可以让文字和输入框聚焦，绑定在一起 （点击文字也可输入）

​ 格式：

​ 1.文字用label 标签包裹起来

​ 2.给输入框添加id属性 id=“aaa”

​ 3. 在label标签中添加for属性，for=“aaa”

<label for="account">账号：</label>
<input type="text" id="account" name="act">

datalist标签

​ -作用：给输入框绑定待选项

请输入你喜欢的车型：<input type="text" list="cars">
<datalist id="cars">
  <option>奔驰</option>
  <option>宝马</option>
  <option>路虎</option>
  <option>宾利</option>
  <option>布加迪威龙</option>
</datalist>

​

下拉列表

<select name="" id="">
  <optgroup label="河北">
    <option>唐山</option>
    <option>张家口</option>
    <option>承德</option>
    <option>保定</option>
  </optgroup>
  <optgroup label="北京">
    <option selected="selected">朝阳区</option>
    <option>通州区</option>
    <option>昌平区</option>
    <option>海淀区</option>
  </optgroup>
</select>

​ -注意：selected="selected"是默认选中

​

textarea标签

 <textarea cols = "2" row = "5"> </textarea>

​ -文本输入区域，定义一个可以输入多行的输入框

​ -cols row 改变宽和高,可以无限拉伸 用CSS resize属性控制有无

多媒体标签

 A:video属性:播放视频
  1.autoplay: 自动播放
  2.controls: 控制条
  3.poster: 占位图片
  4..loop: 广告视频循环播放
  5.muted: 静音
  6.preload: 预加载视频和autoplay冲突
  7.height: 800px
  8.width: 300px
	B:第二种格式 浏览器适配问题 三种适配格式
   <video>
       <source src = ""  type = "video/webm"> </source>
       <source src = ""  type = "video/mp4"> </source>
       <source src = ""  type = "video/ogg"> </source>
  </video>

  video播放视频浏览器必须支持HTML5 用JS框架html5media

  audio播放音频标签和video基本一样 但是属性height/width/poster不能用

详情和概要标签：
  <details>
	   <summary>概要名称</summary>
	        概要详情信息
  </details>
marquee标签:不是W3C推荐标签，官方文档查询不到，但是各大浏览器支持
作用：跑马灯 在屏幕中 滚动
<marquee
direction=(滚动方向）
scrollamount=滚动速度
loop=次数
behavior=slide(滚动到边界停止）=alternate（滚动到边界弹回去）
img src=图片地址  w/h>内容</marquee>
<marquee direction="left">内容</marquee>
<marquee direction="up">内容</marquee>

2.css文字属性

1.规定文字样式的属性
font-style：italic倾斜/normal正常.
快捷键：fs、fsn、
2.规定文字粗细的属性
格式：font-weight：bold：
bold：加粗
bolder：更粗
lighter：细线，默认是细线
快捷键:fwbr,fwb,fwl.
还可以用数字表示粗细，100-900px
3.规定文字大小的属性
格式：font-size
单位：px
注意点：通过font-size改变字体大小要带上单位；
快捷键：fz30；
4.规定文字字体的属性
格式：font-family：”楷体“
注意点：
1.如果取值是中文，需要用双引号或者单引号括起来。
2.设置的字体必须是用户电脑里已经安装的字体。
快捷键：ff




1.如果设置的字体不存在，那么系统会使用默认的字体来显示宋体
2如果设置的字体不存在，而我们又不想用默认的字体来显示怎么办？
可以给字体设置备选方案
格式：font-family：”“，”“
3.如果想给中文和英文分别单独设置字体，怎么办？
但凡是中卫字体，里面都包含了英文
但凡是英文字体，里面都没有包含中文
也就是说中卫字体可以处理英文，而英文不能处理中文。
注意点：如果想给界面中的英文单独设置字体，那么英文字体必须写在中文的前面

补充：在企业开发中最常见的字体有以下几个
中文：宋体/黑体/微软雅黑
英文：”times new roman” /Arial
还需要知道一点， 就是并不是名称是英文就一定是英文字体，因为中文字体其实都有自己的英文名称，所以是不是中文字体主要看能不能处理中文

font：italic bold 10px ”楷体
补充：
缩写格式
font：style weight size family；、
注意点：
在缩写格式中，有的属性值可以省略
style可以省略
weight可以省略
-在这种缩写格式中，style和weight的位置可以交换
-在这种简写格式中，size和family不能省略，并且size和family不能交换的



文本属性：
1.文本的装饰属性：格式：text-decoration：取值：underline下划线、line-through中间划线、overline上划线、none
None:常用于去掉超链接的下划线。
快捷键：tdu/tdl/tdo/td
2.文本对齐的属性：格式：text-align：取值：left、right、center
快捷键：tal/tar/tac
3.文本缩进的属性：text-indent：2em；取值：2em，em是单位，1个em代表缩进一个文字的宽度。
快捷键：ti/ti2e




文字颜色赋值的方法：
color：red；
主要用于调试，不是所有的颜色都可以用英文单词来表达。
color：rgb（255,0,0）；red,green,bue
黑色 rgb（0,0,0） 白色（255,255,255）
三原色
color：rgba（255,0,0,1）;
CSS3推出，a的意思是透明度，取值是0~1
color:#ff0000;
color:#F00;

在css中只要十六进制的颜色每两位的值都是一样的，那么久可以简写成一位
注意点，如果当期对应的两位数字不一样，那么就不能简写，
2。如果两位相同的数字不是属于同一个颜色的，也不能简写

例如
<style type="text/css">
        p{
            font-style: italic;
            font-family: "Microsoft YaHei";
            color: rgb(200,200,200);
            font-weight: bold;
            font-size: 50px;
            text-decoration: overline;
            text-align: left;
            text-indent: 2em;
        }
    </style>

3.css选择器

id选择器
什么id选择器？
作用：根据指定的id名称找到对应的标签，然后设置属性
注意点：
1.必须在id前面写上“#”，不然没有效果
2.每个标签都可以设置一个id，
3.在同一个界面中，id的名称不能是重复的。
4.id的名称是由一定的规范的
4.1，id的名称只能有字母、数字、下划线组成。
4.2开头不能是数字
4.3.id名称不能是HTML标签的名称。
4.4在企业开发中，一般情况下，仅仅是为了设置样式，我们不会使用id，
因为在前端开发中id是留给js使用的

<!--<p id="ins">我是ID选择器</p>-->

1.什么是类选择器？
作用：根据指定的名称找到对应的标签，然后设置属性
格式：
.类名{
       属性：值；
}
注意点:
1.每个HTML标签都有一个属性叫做id,也就是说e一个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写class选择器时一定要在class名称前面加上.
4.类名的命名规范和id名称的命名规范一样
5.类名就是专门用来给某个特定的标签设置样式的
6.在HTML中每个标签可以同时绑定多个类名
格式：
<标签名称 class“类名1 类名2....">
错误的写法
<p class="para1"  class="para2">我是段落
<!--<p class="pp">我是类选择器</p>-->


后代选择器
作用：找到指定标签的所有后代标签，设置属性
格式
标签名称1 标签名称2 标签...
{
属性：值；
}
先找到名称叫做标签名称1的标签，然后再在这个标签下面去查找所有
名称叫做标签名称2的标签，然后在设置属性
注意点：
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子，也包括孙子/从孙子，
只要最终是放到指定标签中的都是后代
3。后代选择不仅仅可以使用标签名称，还可以使用其他选择器
（比如类选择器和id选择器）。
4.可以无限延伸



子元素选择器：
作用：
找到指定标签中所有特定的直接子元素，然后设置属性
格式：
标签名称1>标签名称2{
属性：值；
}
注意点：
1.子元素选择器只会选择查找儿子，不会查找其他被嵌套的标签
2.子元素选择器之间要用>符号链接，并且不能有空格
3.子元素选择器不仅可以使用标签名称，还可以使用其他选择器，
可以混着用
4.也可以无限延伸



1.后代选择器和子元素选择器之前的区别？
1.1后代选择器使用>作为连接符号
1.2后代选择器会选择指定标签总所有的特顶后代标签，
子元素选择器只会选中特定的子元素标签
2.后代选择器和子元素选择器之间的共同点
2.1后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2.2他们都可以通过各自的连接符号一直延续下去
3.在企业开发中如何选择
如果想选中指定标签中的所有特定的标签，那么久使用后代选择器
如果该只想选中指定标签中 所有的特定子元素，那么久使用子元素选择器。



1.什么是交集选择器？
作用：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：
选择器1选择器2{
属性：值
}
注意点：
1.选择器和选择器之间没有任何连接符号
2.选择器可以使用标签名称/ID名称/class名称
3.交集选择器仅仅作为了解。



1什么是并集选择器？
作用：给所有选择器选中的标签设置属性
格式：
选择器1，选择器2{
属性：值；
}
注意点
1.并且选择器必须用，来连接
2.选择器可以使用标签名称/ID名称/class名称



1.相邻兄弟选择器  CSS2
作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式：选择器1+选择器2{
属性：值；
}

2.通用兄弟选择器 CSS3
作用：给指定选择器后面的所有选择器选中的所有标签设置属性。
格式：
选择器1~选择器2{
属性：值；
}

注意点：
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签。
3.通用兄弟选择器必须通过~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中



同级别的第几个,注意点：不区分类型
:first-child， 选中同级别中的第一个标签
:last-child， 选中同级别中的最后一个标签
:nth-child(n)，选中同级别中的第n个标签
:nth-last-child(n)，选中同级别中的倒数第n个标签
:only-child ,选中父元素中唯一的标签（只能存在一个标签）
同类型的第几个
:first-of-type,选中同级别中同类型的第一个标签
:last-of-type，选中同级别中同类型的最后一个标签
:nth-of-type(n)，选中同级别中同类型的第n个标签
:nth-last-of-type（n）选中同级别中同类型的倒数第n个标签
:only-of-type，选中父元素唯一类型的某个标签（同种类型标签只能存在一个，可存在其他不同类型标签）




:nth-child(odd) 同级别奇数
:nth-child(even)同级别偶数
:nth-of-type(odd)同类型奇数
:nth-of-type(even)同类型偶数
上述odd 可以换成2n+1
even换成2n，也就是说可以定义表达式 n从0递增
可以换成xn+y



什么是属性选择器
作用：根据指定的属性名称找到对应的标签，然后设置属性
格式：
[attribute]
例：p[id]{属性：值;}
[attribute=value]
例：p[class=cc]{属性：值；}
最常见的应用场景，就是用于区分input属性



1.属性的取值是以什么开头的
[attribute|=value]css2只能找到以-符号连接的
[attribute^=value]css3 只要是value开头的都能找到
2.属性的取值是以什么结尾的
[attribute$=value]css3
3.属性的取值是否包含某个特定的值
[attribute~=value]css2
[attribute*=value]ess3
区别在与css2里只能找到单独隔开的单词。
css3中只要包含value的就能找到



通配符选择器
作用：给当前界面上所有的标签设置属性
格式：
*{
属性：值；
}
注意点：
由于通配符选择器是设置界面上所有的标签 的属性，所以在设置之前会遍历所有的的标签，
如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器

4.css三大特性

继承性:
作用：给父元素设置一些属性，子元素也可以使用
 注意点：
1.并不是所有的属性都可以继承，、
只有color/font-/text-/ line开头的属性才能继承；
2.在css的继承中，不仅仅是儿子可以继承，只要是后代
都能继承
3.继承性中的特殊性
3.1 a标签的文字和颜色 和下划线是不能继承父元素的
3.2  h标签的文字大小也是不能继承父元素的
应用场景：
一般用于设置网页上的一些共性信息，例如网页的文字颜色，
字体，文字大小灯内容
格式：
body{属性：值;}



优先级：（三一）
作用：当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，
如何层叠就优先级来确定。
2.优先级判断的三种方式
2.1  是否直接选中（间接选中就是指的是继承）
如果是间接选中，谁离目标标签比较近就听谁的。
2.2是否是相同的选择器。
如果是相同选择器，那么就是谁写在后面就听谁的。
2.3不同的选择器
如果都是直接选中，并且不是相同类型的选择器，那么就会按照
选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认


!important：
注意点：
1，用于直接选中的标签
2.通配符选择器选中的标签也是直接选中的
3.！important只能提升被指定的属性的优先级，
没有指定的属性不会被提升。
4.important必须写在属性值的分号前面、
5.！important前面的感叹号不能省略

优先级之权重问题
1.什么是优先级的权重？
作用：当多个选择器混合在一起使用时，我们可以通过计算权重来判断谁的优先级最高。
2权重的计算规则
2.1首先，计算选择器中有多少额id，id多的选择器优先级最高
2.2如果id的个数一样，那么再看类名的个数，类名个数多的优先级高。
2.3如果类名的个数一样，那么再看标签名称的个数，标签个数多的优先级最高。
2.4如果id、类名、标签都是一样多那么不会再往下计算，谁在后面听谁的。
注意点：
1.只有选择器是直接选中标签的才需要计算权重。

5.css显示模式

1.什么是div？
作用：一般用于配合css完成网页的基本布局
2.什么是span？
作用：一般用于配合css修改网页中的一些局部信息

3.div和span有什么区别？
1.div会单独占领一行，而span不会单独占领一行
2.div是一个容器级别的标签，而span是一个文本级的标签


4.容器级的标签和文本级的标签的区别？
容器级的标签中可以嵌套其他素有的标签
文本级的标签中只能嵌套文字/超链接/图片


在HTML中将所以标签分为两类，分别是容器级和文本级
在css中css也将所有的标签分为两类，分别是块级元素和行内元素
1.什么是块级元素，什么是行内元素？
块级元素会独占一行
行内元素不会独占一行
2.块级元素和行内元素的区别？
2.1块级元素
独占一行，
如果没有设置宽度，默认和父元素一样宽。
如果设置了宽高，就按照设置的来。
2.2行内元素
不会独占一行
如果没有设置宽度，默认和内容一样宽
行内元素是不可以设置宽度和高度的
2.3行内块级元素
为了能够让元素既能够不独占一行，又能够设置宽度和高度
那么就出现了行内块级元素。



1.如何转换css元素的显示模式？
设置元素的display属性
2.display取值
block 块级
inline 行内
inline-block行内块级
3快捷键
di
db
dib

​

6.css背景和精灵图

​ -背景颜色：background-color

​ -背景图片：background-image:url()

​ -注意：图片的地址必须放在url()中，图片的地址可以是本地的地址也可是网络地址

​ -背景平铺属性：background-repeat

​ -取值：

​ repeat 默认：在水平和垂直都需要平铺

​ no-repeat 在水平和垂直方向都不平铺

​ repeat-x 只在水平方向平铺

​ repeat-y只在垂直方向平铺

​ -背景定位：background-position

​ -具体的方位名词

​ 水平方向: left center right
​ 垂直方向: top center bottom

​ 例如

background-position:left top;//图片在左上角
background-position: 100px 200px;//图片的起始位置，默认是0px 0px

​ --background-color:transparent;背景为透明，可以给input标签用

​ -背景关联方式：默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式

​ -background-attachment：scorll（默认值）/fixed.

​ -scorll：会随着滚动条滚动而滚动

​ -fixed：不会随着滚动条的滚动而滚动

​ -背景图片和插入图片的区别？

​ 1.背景图片仅仅是一个装饰，不会占用位置
​ 2.背景图片有定位属性，而插入图片没有定位属性。
​ 3.插入图片的语义被背景图片的语义要强，所以在企业开发中如果你的图片想被搜索
引擎收录，那么推荐使用插入图片

​ -CSS精灵图

​ -CSS精灵图是一种图像合成技术

​ -作用：可以减少请求的次数，以及可以降低服务器处理压力

​ -使用CSS精灵图：CSS的精灵图需要配合背景图片和背景定位来实现

7.盒模型

边框属性border

​ -边框：表框就是环绕在标签宽度和高度周围的线条
​ -格式
​ 1.连写（同时设置四条边的边框）
​ -border：边框的宽度 边框的样式 边框的颜色；

例如：border:5px red solid ;

​ 2.连写（分别设置四条边的边框）
​ -border-top：边框的宽度 边框的样式 边框的颜色

​ -border-right：边框的宽度 边框的样式 边框的颜色

​ -border-bottom：边框的宽度 边框的样式 边框的颜色

​ -border-left：边框的宽度 边框的样式 边框的颜色

​ 3.连写（同时设置四条边的同一个属性）

​ -border-width：5px 10px 15px 20px;（每条边框宽度）

​ -border-style:solid dashed dotted double;（每条边框线的风格）

​ -border-color:bule green purple pink; （每条边框的颜色）

​ （一次是上右下左边框）

​

内边距padding属性

​ -内边距：边框和内容之间的距离就是内边距

​ -非连写

​ padding-top: 5px;

​ padding-right: 5px;

​ padding-bottom: 5px;

​ padding-left: 5px;

​ -连写

​ padding: 上 右 下 左;

​ -注意点：

​ -给标签设置内边距之后, 标签占有的宽度和高度会发生变化

​ -给标签设置内边距之后, 内边距也会有背景颜色

​

外边距margin属性

​ -外边距：标签和标签之间的距离就是外边距

​ -非连写

​ margin-top: 5px;

​ margin-right: 5px;

​ margin-bottom: 5px;

​ margin-left: 5px;

​ -连写

​ margin: 上 右 下 左;

​ -注意点：浏览器中body的默认margin是有8px的，所以如果想消除缝隙可以添加代码

*{padding:0;margin:0;}

​ -外边距合并现象：

					--默认布局的垂直方向上，默认情况下外边距会出现合并现象，谁的外边距大就听谁的。（水平方向则不会合并）

​ 例如： 上div margin-bottom：100px ；下div margin-top：20px。 上下div中间不会距离 120px。而是100px。因为是垂直方向上，有相邻的外边距设置。

					附：margin：0 auto；的方式来让里面的盒子在外面的盒子水平居中。
						margin：0 auto；只对水平方向有效，对垂直方向无效。

盒子模型

​ -CSS盒子模型仅仅是一个形象的比喻，HTML中所有的标签都是一个盒子。

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQpnF9T1-1592274780311)(/Users/yaojiyuan/Library/Application Support/typora-user-images/image-20190821084958650.png)]

​ -蓝色区域：宽度和高度，存放内容的区域（height和width是内容的宽度和高度）

​ -绿色区域：内边距

​ -浅黄色区域：边框，盒子自身

​ -浅橙色区域：外边距

​ -注意点：

​ -增加了padding之后元素的宽高也会发生变化

​ -如果增加了padding之后还想保持元素的宽高，那么就必须减去内容区域的宽高

​ -增加了border之后元素的宽高也会发生变化

​ -如果增加了border之后还想保持元素的宽高，那么就必须减去内容区域的宽高

​

代码
span{
      display: inline-block;
      height: 100px;
      width: 100px;
      margin: 20px;
      padding: 4px;
      border: 2px solid #000;
      box-sizing: border-box;
    }

box-sizing属性

​ -作用：保证增加padding和border之后要保证盒子元素的宽高不变

​ -取值：

​ -contenet-box：默认，此时 元素的宽高= 边框+内边距+内容宽高

​ -border-box：元素的宽高 = width属性/height属性

box-sizing: border-box;

盒子模型嵌套

​ -注意点：

​ 1.如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部的外边距看，外面的一个盒子

也会被顶下来。

​ 2.如果外面的盒子的盒子不想被一起定下来，那么可以给外面的盒子添加边框属性。

​ 3.在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑

padding，其次在考虑margin。

​ 4.margin本质上是用于控制兄弟关系之间的间隙的，而不是用来控制父子关系之间的间隙的

​ 5.在嵌套关系的盒子中，我们可以利用

​ -margin：0 auto；的方式来让里面的盒子在外面的盒子水平居中。
​ -margin：0 auto；只对水平方向有效，对垂直方向无效。

​ -text-align:center;和margin:0 auto;的区别？

​ -text-alian:center;只是设置文字和图片水平居中。

​ -margin:0 auto;让盒子自己居中。

清空默认边距

​ -为什么要清空默认边距（外边距和内边距）？
​ -在企业开发中为了更好的控制盒子的位置和计算盒子的宽高等等。

​ -格式：
​ -第一种方法
​ *{
​ margin:0;
​ padding0;
​ }

​ -注意点通：配符选择器会找到当前界面中所有的标签，所以性能不好
​ -在企业开发中用这个开头清空

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}

​ -在企业开发中可以从这个网址中拷贝：http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高和字号

​ -行高和盒子高度不同

​ -line-height:行高；（一行文字的高度是多少）

​ 默认情况下，文字在行高中默认垂直居中，行高会撑高盒子，
​ *在企业开发中，经常将 只要行高和盒子高一样，文字就会垂直居中。（不适用盒子中有多行文字）

​ -height：盒子高；

前端经验：盒子中存储的文字，一般已盒子左边内边距为基准，不会已右边距为基准，右边距有误差，文字左边距是准确的，右边距一般不准。因为右边如果放不下一个文字，文字就会换行显示，所以文字和内边距间距离就会有误差。

8.浮动

浮动元素高度问题

​ -1.在标准流中内容的高度可以撑起父元素的高度。

​ 2.浮动流中浮动元素是不能撑起父元素的高度的。

清除浮动方式一

​ -给前面一个父元素设置高度

​ -注意点：在企业开发中，我们能不写高度就不写高度

清除浮动方式二

​ -给后面盒子添加属性clear：left ，right ，both ，none。

​ -none：默认取值，按照左浮动找左浮动，右浮动找右浮动；

​ -both：企业开发中一般写both，不要找前面的左浮动，和右浮动。
注意：

​ clear：both这个属性会导致margin属性失效。