你好牛蛙！

什么是高度塌陷在文档流中，父元素的高度默认是由子元素撑开的，等于说子元素多高，父元素就多高，但是当为子元素设置了浮动之后，子元素会脱离文档流，此时，将会导致子元素无法撑起父元素的高度，会导致父元素的高度塌陷高度塌陷会导致的问题会使父元素下面的兄弟元素都想上移动，会使页面布局变化，影响原来的布局未塌陷之前塌陷之后：解决高度塌陷问题第一种：直接设置父元素的高和宽，使其固定不方便，不推荐，这样设置父元素的高度不会适应子元素的高度第二种用Block Formatting Context简称

块元素在文档流中默认垂直排列。要我们设置块元素水平排序，我们可以设置块元素为行内块元素或者设置块元素脱离文档流float使块元素脱离文档流(浮动)floatw3school上面这么解释语法：float:值可能的值：left 元素脱离文档流向左浮动。right 元素脱离文档流向右浮动。none 默认值。元素不浮动，并会显示在其在文本中出现的位置。inherit 规定应该从父元素继承 float 属性的值。这是正常情况下块元素在文档流中的情况：当使div2脱离文档流：这里设置

文档指的就是网页，一个网页就是一个html文档文档流网页是一个是多层的结构，而文档流就是网页中的一层，文档流属于最基础的那一层。我们所创建的元素都默认处在文档流中元素在文档流中的特点1.块元素：块元素在文档流中会独占一行，他默认是自上向下而排列的块元素在文档流中默认宽度是父元素的100%，宽度值是auto块元素在文档流中高度默认被子元素撑开的高度但他如果脱离了文档流他不一定就会这么排列，也不一定就会独占一行了2.内联元素内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中

子元素内容的溢出子元素默认是存在于父元素的内容区中，理论上子元素最大可以等于父元素内容区大小，但是如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素之外的位置显示超出的内容，我们称之为溢出的内容父元素默认是将溢出内容在父元素内容区外面显示，我们可以设置这个属性overflow设置父元素如何处理溢出内容overflow语法：overflow:值overflow可能值：visible 默认值。内容不会被修剪，会呈现在元素框之外。hidden 内容会被修剪，并且其余内容是不可见的。s

dispalydispaly规定元素应该生成的框的类型语法：dispaly:值下面是dispaly的值none 此元素不会被显示。block 此元素将显示为块级元素，此元素前后会带有换行符。inline 默认。此元素会被显示为内联元素，元素前后没有换行符。inline-block 行内块元素。（CSS2.1 新增的值）list-item 此元素会作为列表显示。run-in 此元素会根据上下文作为块级元素或内联元素显示。compact CSS 中有值 compact，不过由于缺乏广泛支持

内容区：内联元素不能设置内容区的width和height水平方向内边距内联元素可以设置水平方向的内边距还会影响布局垂直方向内边距内联元素可以设置垂直方向内边距，但是他不会影响页面布局，他只是显示效果发生变化span设置了上下内边界，但是上面的超过了上边页面边界隐藏进去了，下面的还把div覆盖住了边框内联元素也可以设置边框，但是他的边框也是只能影响水平方向的布局，不能影响垂直方向的布局，就跟上面的内边距一样外边距内联元素也是只支持水平方向的外边距设置，不支持垂直方向的外边距的设置。水平

浏览器为了在页面没有样式时，也有一个比较好的显示效果，所以为很多元素都设置了一些默认的margin（外边距）和padding（内边距）但是这些样式，在正常情况下我们为不需要的所以，我们往往在编写样式之前需要将浏览器中的margin和padding的值去掉去除的方法这个方法不太好，先凑着用即设置margin或padding的值为0，覆盖掉浏览器的默认样式，当然我们一个一个的设置会很麻烦，所以我们可以用*(全部选择器)来统一设置去掉如下：...

何为外边距：外边距指的是盒子与其他盒子之间的距离，他不会影响可见框的大小，而是会影响盒子的位置外边距(margin)四个外边距：margin-top : 上外边距margin-right : 右外边距margin-bottom : 下外边距margin-left : 左外边距外边距的设置语法：margin-xxx:值注意：这个外边距设置的值可以理解为最小值，即最小的外边距，因为页面中的元素都是靠左上放置的，有的时候当设置了右边和底部的外边距的值，但是盒子距离右边框和底边框还是很远。

何为内边距：即盒子的内容区与盒子边框之间的距离内边距(padding)四个边框，共有四个内边距可以通过四个属性分别设置内边距padding-top ： 上内边距padding-right ： 右内边距padding-bottom ： 下内边距padding-left ： 左内边距内边距也会影响盒子可见框的大小颜色背景会延伸到内边距绿色的为div盒子内容区大小，下面黑色的是下内边距盒子大小由内容区，内边距和边框共同决定盒子可见框的宽度=border-left-width + pa

盒子模型又叫做框模型要点：1.css处理网页时，他认为每个元素都包含在一个不可见的盒子里面2.如果我们把所有的元素都想象成盒子，我们对网页中进行布局就可以看作是在网页页面中摆放盒子3.我们只需要把盒子摆放在相应的位置我就能完成网页的布局盒子的组成部分：内容区(content) 最里面是内容区(content)，即放东西的区域，放子元素边框(border): 最外层是边框(border)内边距(padding): 内容区跟边框的距离叫做内边距(padding)外边距(margi

border属性border-bottom: border-right: border-left: border-top:

设置行间距css中没有提供一个具体的设置行间距的方法，所以我们只能通过设置的行高来设置行间距。行间扭矩=行高 --字体大小行高：之前说过，文字都是在看不见的线格子中的里面，类似于上学的时候用的单线本，行高就是这些线与线的距离。在网页中文字会默认在行高中垂直居中显示。设置行高属性：line-height: 值...

字体大小设置的释义：一般浏览器设置的字体大小都是16px其实我们的字体都是在一个个我们看不见的格子里面，我们font-size设置的都是格子的大小，一般来说字体都是会比格子小一些的，但是小多少是有字体效果决定的，但也有些字体比格子大，比如微软雅白字体。兼容问题：而且，不同浏览器可能设置不同，然后导致字体在不同的浏览器上面的显示效果不同但，我们可以主动去设置字体字体的设置 font-family通过font-family可以指定字体格式如下当浏览器不支持文字字体：浏览器使用的字体默认就是

直观的颜色单位在css可以直接使用颜色的单词来表示不同的颜色，比如，red，blus，greenRGB值rgb是red，green，blue三元色(光的三元色)通过这三种颜色的不同浓度来表示出不同的颜色。rgp(红色的浓度，绿色的浓度，蓝色的浓度)颜色浓度需要用一个0~255之间的一个值来设置，255最大，0表示没有如：我们如果想要知道某个颜色的rgb的值我们可以用截图工具，比如QQ自带的截图工具如下右边的就是QQ截图工具对颜色的判断当然我们也可以用百分号代替0~255,0是0%，2

像素px像素是我们在网页中使用的最多的的一个单位一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的，比如电脑像素：1366 X 768就是指电脑屏幕横着有1366个像素点，纵向有768个像素点。当然当电脑屏幕大小固定，电脑像素点越多说明每个像素点越小，那么画面就越清晰。就是指我们设置的px就是指它占多少个像素点因为手机屏幕和电脑屏幕大小不同，所以在电脑上设置的像素大小在手机上不一定适用，所以当开发手机上的网站的时候，需要注意这一点，大部分，电脑上的一个像素等于手机上的四个

em标签是文本标签，可设置文本斜体strong标签文本标签，设置文本加粗i标签文本标签，设置文本斜体，跟em一样b标签文本标签，加粗文本，和strong一样但是！！！这里语义有区别，i和b就单纯表示斜体和加粗，但是，em表示的是语气，strong表示的是着重。单纯要效果用i和b要语义用em和strongsmall标签文本标签，一般嵌套父元素使用，它可设置子元素中的文本比父元素中的小h5中一般用这个表示细则，比如网站版权bjg标签文本标签，一般嵌套父元素使用，它可设置子元素

css样式选择优先级在遇到css设置同一个标签的同一个样式的时候，哪个优先级高就执行哪个选择(1000级最高)1000级：内联样式(即写在页面或者标签里面的样式 直接写在标签里面的优先级更高)100级：id选择器10级：类和伪类1级：元素选择器0级：*通配选择器没有优先级：继承的样式当选择器包含多种选择器时，需要将多种选择器的优先级相加然后进行比较大小，大的级数更高。但是，选择器的优先级计算不会超过他的最大数量级，比如，本来类和伪类优先级是10的不可能10个加到一起变成100，这个最多加

<form action="url地址" method="提交方式" name="表单名称"> ........ ........ 数据内容 ........ <input type="reset"/> <!--重置按钮--> <input type="submit"/> <!--提交按钮--></form>问题1：表单提交的时候，数据没有发送给服务器有三种情况1.表单项没有name值 当表单项没有设置nam

formform标签即表单标签 用于声明表单区域 即囊括其中的元素属性和数据 使他们成为一个部分最主要的用处是给提交和重置按钮设置一个生效区域别的没什么用<form> ........ ........ 数据内容 ........ <input type="reset"/> <!--重置按钮--> <input type="submit"/> <!--提交按钮--></form>inputinput标签&

ul标签用来创建一个无序列表<ul></ul>li标签用于向无序列表里面添加内容<ul> <li>李老</li> <li>李王</li> <li>李刘</li> <li>李哥</li></ul>type用于改变li打印的内容前面的符号样式<ul type="circle"> <li>李老</li&

IDid是用于给标签加入标记的<p id="p1">哒哒哒哒哒哒</p>类<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>选择器</title> <style type="text/css"> #p1{ color: aquamarine; font-size: 10px;/*选择ID

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p:not(.淦){ background: black; } /*否定calss为淦的p选择其他的p（.符号用于选中类 #符号用于选中id）*/ </style> </head

块元素如p / div / h1这种独占一行的元素释义：div块元素 独占一行 不设置样式 块元素一般用于设置布局可包含内联元素块元素可以包含块元素和内联元素内联元素如span这样只占文字大小的元素种类：a img iframe span释义：span是一个内联（行内元素）即只占文字大小，不会占用一行常见的内联元素有 a img iframe span块元素一般用来包括文字 一般不会用来包含块元素a可以用来包含除了本身以外的任意元素p不能用来包含任意的块元素<!DOCTYP

titletitle属性作用title可以给任何标签使用可对元素增加一个提示作用 即 原被作用元素生效后 鼠标移入到元素生效的区域不动 会提示增加的提示内容比如 p打印出字体后 加入title属性 则当鼠标移入对应的字体后 会显示提示内容语法<p title="笋a贼">有本事把鼠标放上来别动嗷</p>效果图属性选择器选择含有指定特殊位置的属性 比如一个p元素的title设置为ABCD 另一个设置为bcde 我们想选择title中开头为A的元素 这时候

伪类伪类专门用来表示元素的一种特殊状态，跟伪元素有点像 一般用于为这些特殊状态的超链接设置样式比如 访问过的超链接 获取焦点的文本框 普通的超链接伪类选择器选择伪类 多用于给连接设置样式link用于设置未点击过的链接的颜色语法 a:link{}a:link{ color: red;/*设置未点击过的链接的颜色*/ }visited语法 a:visited{}visited设置点击过的链接的颜色为保证用户的隐私 只能设置字体的颜色浏览器根据根据历史记录来判断你是否点击过

伪元素伪元素则代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。伪元素作用伪元素用来表示 原正常元素中的 特殊位置比如first-letter就是一个伪元素 用来表示p段落(p中段落就是一个元素)中第一个字 通常借此来对一些元素中特殊位置的字符进行修改first-letterfirst-letter 选定段落中第一个字first-linefirst-line 选定一整行before选定段落最前 即就跟打字的时候把光标移动到段落最开头一样 可借

兄弟元素选择器语法“前一个”~“后一个”<style "type:text/css"> span~p{ /*为span后面所有的p设置样式*/ background: black; } </style>“前一个”+“后一个”<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

后代自动继承祖先样式 这个可用于给祖先后代设置基本的样式不是所有的样式都还会被后代继承 比如背景样式 背景样式设置的是一个块的背景 在其内部打印的东西都会打印在这个背景上 详细介绍看代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="font-

<!dectype html><html> <head> <meta charset="utf-8"/> <title>三</title> <style type="text/css"> p{ color:red; font-size:40px; } </style> <!-- 内部样式表 在head中设置所有的<p></p>中的字体 --&gt

p:first-child选择第一个子元素（p是body的子元素）但是当第一个不是p则什么都选不到 这个的意思是不仅要是第一个还要同时是p元素p:last-childlast是指所有的父元素中最后一个子元素 这里前面标签为p所以最后的子元素也得同时是p不然没用p:nth-child(2)这个可以选中指定位置的子元素 括号中填入几就会选择所有父元素中对应位置的为p的子元素当括号内填入even 则选择偶数位置的子元素填入odd 选择奇数位置的子元素p:first-of-type选择父元素中第一

父元素：直接包含子元素的子元素：直接被父元素包含的祖先元素：直接或间接包含后代的，父元素也是后代元素：直接或间接被祖先元素包含的，子元素也是兄弟元素：拥有相同父元素的互相叫兄弟元素<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>父子元素</title> <style type="text/css"> #d1 sp

表格的跨行跨列跨列(即横着占两个或两个以上的单元格)colspan元素<td colspan="2">1 1</td>设置单元格跨横向两列<td rowspan="2">2 1</td>设置单元格跨横向两行当引号中的数字设置为2 则会占两列挨着的单元格 数字为几则会占几格<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <

table标签table标签是表格标签 用这个可以创建一个表格在标签中可以设置表格的相关属性tr标签和td标签一个<tr></tr>标签代表一行 一个<td></td>代表一个单元格（一行中的一个元素）width hight是css样式 控制表的高和宽borger标签语法：border="1"可用来给表加边框 ""中的数字代表最外层边框的宽 数字越大越宽cellspacing标签语法：cellspacing="0"用来设置单元格间距 ""中的