第四天笔记
1.互联网前端3层：
- HTML：超文本标记语言
- CSS：层叠样式表
- JS:Javascript：轻量级脚本语言
2.css引入方式
<p style="color:red;background-color:blue;">...</p>
<head>
<style type="text/css" >
p{
color:red;
background-color:blue;
}
</style>
</head>
<head>
<link rel="stylesheet" href="mass.css" type="text/css"/>
</head>
3.css中的选择器
- 1.标签选择器： div p ul li dd dt dl em i del u strong b input label form table
- 2.类选择器：
-
.class名：同一页面能有无数个相同的class名；
/*标签同时设置多个类选择器，之间用空格链接*/
<div class="div1 div2 div3">...</div>
- 3.ID选择器：
-
#id名 ：同一个页面中只能有一个ID名；（ID名不能重复）
注：实际开发过程中，class用于设置样式，id用于获取元素；
- 4.后代选择器：
div p即父级标签与子级标签之间用空格连接；
含义指在div容器下，子子孙孙的p元素都选择上；
- 5.子选择器：
div>p及父级标签与子级标签之间用大于号连接；（兼容IE7+）
含义指：只选择div容器下的儿子元素，不选择孙子级元素；
- 6.交集选择器：
div.mass即两个选择器之间没有东西；
指：同时满足两个条件，必须是div标签，同时还要满足class名为mass；两个条件同时满足才能，设置此样式；
- 7.并集选择器：
div,p即两个选择器之间用逗号连接；
指：div与p标签设置相同的样式；
- 8.通配符：
*即代表所有的元素；
- 9.序选择器：（兼容IE8+）
-
div > p:first-child即代表div容器下所有p儿子级别标签中的第一个；
-
div > p:last-child即代表div容器下所有p儿子级别标签中的最后一个；
- 10.下一个兄弟选择器：
ul li+li{}指从ul下的第一个li开始，选中后面的所有li元素；
4.CSS的继承性和层叠性
- 以font开头的属性都能够继承
- font-size;
- font-family:"宋体";
- font-weight:bold;
- font-style:italic;
- color可以继承（background-color也可以);
- text开头的也可以继承
- line开头的也可以继承(line-height);
5.CSS权重
- !important权重无穷大；（放在分号前面）
- id的权重大于class的权重；
6.CSS盒子模型
- css盒子模型有5部分组成：
- 内容的宽高+padding+border+margin;
- 单行文本的垂直居中：height和line-height相等；
- 多行文本的垂直居中：padding和line-height;
- padding：
- padding是内边距；
- padding的颜色和内容的颜色一致；background-color填充的是border以内的颜色；
- padding是复合值；
- margin:外边距；
- border:边框，复合值
- border: 1px solid red;
- border-width: 1px;
- border-style: solid(实线)/dashed(虚线)/dotted(点线)；
- border-color: red;
7.行内元素 块状元素 内联块状元素
- 文本元素：p span a i em u b strong img;
- p标签虽然是文本标签，但它可以当做容器来使用，p标签内一定不能放div;
- 容器元素：div li dd dt h级（不建议）;
- 文本元素中除了p，其他的都是行内元素；
- 所有容器级别的元素都是块元素；
- 块和行内元素的相互转化：
- display:inline;（行内元素）
- display:block; （块状元素）
- display:inline-block; （内联块状元素）
-
注意：
- 行内元素：
- 正常情况下：不能设置宽高，不继承父级行高。所以宽高都默认跟本级内容宽高相同；背景色填充是添加元素内容+padding区域，即高度区域；
- 块状元素：
- 宽度：如果不设置的话，默认跟父级宽度一样宽，没有父级的话，则默认与屏幕可视区域一样宽；
- 高度：如果不设置的话，默认跟本级内容的高度一样高，不继承父级的高度（但是会继承父级的行高，子元素在未设置高度时，继承行高后会默认其高度值等于行高值，即此时子元素的高度为行高值）；
- 脱离文档流：无论是行内元素还是块状元素，脱离文档流后，在不设置宽高的情况下：宽度跟内容的宽度一样，不继承父级宽度；高度与内容的高度一样高，不继承父级的高度（但是会继承父级的行高，子元素在未设置高度时，继承行高后会默认其高度值等于行高值，即此时子元素的高度为行高值）；
8.定位
- 定位分为绝对定位，相对定位，固定定位三种；
- 绝对定位：position:absulute; 相对于上一级的定位元素定位，若无定位元素，则以body；原来位置消失，脱离文档流；
- 特点：1）脱离标准文档流；2）位置跟随；3）宽高不占据任何尺寸；
- 相对定位：position:relative;相对于自身位置移动；原来位置保留；
- 固定定位：position:fixed;相对于浏览器窗口定位移动，内容滚动，其位置不动；
- 关于脱离标准文档流的方法：
- 浮动：float:left;设置浮动后元素脱离文档流；
- 绝对定位；
- 固定定位；
- 重点：
- 父相子绝：绝对定位位置移动，其父级元素必须有定位元素，但是一般规定，绝对定位的父元素设置相对定位；
- 行内元素正常情况下不能设置宽高；在脱离文档流（即设置浮动，绝对定位，固定定位）后，就可以设置宽高了；
9.浮动
- 作用：能够使内联元素（内联块状元素）紧密相连；在正常情况下，内联元素在html代码中，为了方便观看，是换行书写，这样就会使两个内联元素之间后存在一个空格，显示出来，不会紧密相连，当添加浮动后，元素紧密相连；
- 浮动的设计初衷：文字环绕效果；
- 添加浮动影响：对父容器的影响：添加浮动后，元素脱离文档流，致使父容器内没有东西，使父容器高度为零，即高度塌陷。
- 消除浮动带来的父容器高度塌陷影响的方法：
- 给父容器设置高度，包含住原来的子元素；
- clear方法：
- 给容器中子元素的后面（父容器的后面）添加一个空的div，给其添加样式
clear:both;；（弊端：影响代码美观）
- 给父容器添加一个类选择器：名为clearfix,便于添加消除浮动影响的样式；
- 浏览器IE6/IE7下，给父元素添加
{*zoom:1;},因为只有在IE6/7浏览器中才会支持以*号开头的属性，即
.clearfix{
*zoom:1;
}
- 浏览器IE8+下：给父级元素添加after伪元素，即
.clearfix:after {
height: 0;
content: "";
display: block;
clear: both;
overflow: hidden;
}
.clearfix{
_zoom: 1;
}
.clearfix:after{
content: "";
display: table;
clear: both;
overflow: hidden;
/*此设置不确定*/
}
- 给父容器添加BFC：添加overflow可激发BFC,一般情况下添加
overflow:hidden;
