03-web前端初始-CSS

盒模型

盒模型：本质上是一个矩形盒子，也就是一个盛装内容的容器。css盒模型本质上是一个盒子，封装周围的html元素。css规定所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区、这就是盒模型

盒模型类型

• 标准盒模型（w3c）
• 怪异盒模型（IE）
  盒模型计算方式----盒模型的大小才是一个标记在网页中实际所占位置的大小
  注：1、标准盒模型的宽度= 左右margin + 左右border + 左右padding + width
  2、怪异盒模型宽度 = 左右margin + +width（包含了boredr和padding）怪异盒模型会比标准盒模型要小。

溢出属性

溢出隐藏，不仅可以隐藏文字也可以隐藏元素：overflow：hidden；
开始没有滚动条的，当内容超时出时才会有滚动条：overflow：auto;
无论有没有内容超出，滚动条的样式都会出现：overflow：scroll；
继承父元素的，父元素设置的是auto它就是auto：overflow:inherit;

省略号的编写方式

border:1px solid;
white-space:nowrap;/*强制不换行*/
overflow:hidden;/*超出隐藏*/
text-overflow:ellipsis;/*显示省略号*/

定位

1、定位的语法和介绍
a、position:static（默认值）/absolute（绝对定位）/relative（相对定位）/fixed（固定定位）
b、positoon属性的作用：可以让元素的位置发生改变—为了解决一些其它元素解决不了的问题而存在
c、什么是标准流？就是网页正常的排版顺序—块级、内联、内联块
d、什么是定位流？一个元素设置了position属性后，变成定位流–规则
e、position属性要配合left、right、top、bottom这几个值一起来使用。
①、relative相对定位：
特点： 1、相对定位是相对于自己以前在标准流中的位置进行定位的。
2、区分元素类型的—设置了相对定位，元素以前是什么类型的现在依旧是什么类型
3、不脱离文档流，占位置（空间）
4、作用：a、对元素进行微调 b、配合绝对定位来使用—
②、absolute绝对定位：
特点： 1、脱离文档流，不占空间（位置）
2、不区分元素类型的
3、相对于父元素（祖先）进行定位，绝对定位要定位时先找定位流，如果父元素是定位流就以父元素进行定位，如果不是继续往上一级进行查找，直到找到最外层还是没有的话，就body进行定位。
注意点：a、当所有的元素都设置了绝对定位，元素会进行层叠
b、后面的定位元素，显示在最上面
c、绝对定位的元素，有层级关系—z-index属性 可以改变定位的层级关系 属性值：auto（默认值） 数值（没有单位） 值越大排在越前面。
③、fixed固定定位：
特点： 1、固定定位相对于body进行定位
2、不区分元素类型
3、脱离文档流的，不占空间（位置）
4、不会随着滚动条的滚动而滚动

锚点----命名锚记

语法：

<a href="#名称"></a>
<标记 id="名称"></标记>

css sprite、css 精灵、雪碧图—图片整合技术

作用：图片整合技术是为了优化网站而使用的
1、10个小图标分别放置网页中，1个小图标浏览器要向服务器发送1次请求，10个图相当于要发生10次请求
2、把10个小图标整合成一张图，只需要向服务器发生一次请求就可以把所有的图标都下载下来。
3、一次性下载了所有的图表，然后使用background-position属性来改变它的位置就行
优势：减少了对服务器的请求次数，提高了加载速度 减小了图标的体积（相对的）

宽高自适应

1、在我们实际开发中，有时候网页中的某些区域不希望我们宽度和高度直接写死，比如：一个部分，开始内容是固定的，但是考虑到后面内容可能会发生变化，宽或者高直接设置死不利于后期的网页内容的改版
2、为了方便更改需求，提出了宽高自适应的概念
3、宽度自适应的话，不写宽度或者直接使用百分比，高度自适应，高度不写也可以使用百分比
4、有人提供出要是这样一个属性就好了，一开始给元素设置一个固定高度，这个高度会随着内容增多跟着变化
5、宽高自适应的属性的应用
min-height 最小高度 一开始有一个固定的高度。这个高度会随内容增多跟着增加。
max-height 最大高度 一开始是自适应，当内容超出设置的最大高度时，内容溢出
min-width 最小宽度 一开始
max-width 最小宽度 一开始有一个固定的宽度，当宽度小于设置的宽度时，可以实现自适应
min-height最小高度兼容问题：（了解）
1、在IE低版本的浏览器中，正常的高度相当于min-height
2、其它浏览器里面min-height是没有问题的

下划线过滤器：_height:200px; 其他浏览器不识别带有下划线的属性，IE浏览器可以识别

!important关键字过滤器 它的优先级最高>内联样式>id选择器

visibility:hidden; 和 display:none;区别 一个占位 一个不占位

伪对象选择符;作用：通过css的方式可以让我们多一个元素使用content:""
content内容，可以为空但是不能省略。

/*第一行的第一个字*/
	.p1::first-letter{
	font-size: 30px;
	color: red;
			}
/*第一行起作用*/
	.p2::first-line{
	color: yellow;
			}    

按钮大小不一样解决方法：

1、使用背景图
2、直接把默认的边框和轮廓（蓝色的边框）取消掉，重新设置样式
3、使用a标记模拟按钮 – 因为a标记也具有跳转功能

万能清除法

清除浮动：.clear::after{
				content: "";
				display: block;
				clear: both;
				height: 0;
				visibility: hidden;
			}
		  .clear{
				zoom: 1;
			}

margin-top:问题：（浏览器兼容问题：浏览器对于某些css属性的规则解析上存在偏差或者可以理解为存在解析错误）

	当我们给子元素设置了margin-top时，浏览器会解析的时候会误认为给父元素设置的，所以会出现元素整体往下掉的情况。条件：当子元素或父元素有浮动时不会出现这种情况。
解决方法：给父元素设置 overflow:hidden;
overflow:hidden;  解决问题：1、溢出隐藏 2、清除浮动 3、margin-top问题

总结：
a、当父元素和子元素都是背景时，会往下掉。当父元素是背景时，子元素是边框时，也会往下掉
b、当父元素是边框，子元素是背景时，不会往下掉。当父元素是边框子元素是边框时，不会往下掉。
2、元素类型： css把我们html（xhtml）标记进行了划分---块级元素 、内联元素 、内联块元素
1、块级元素---独占一行、可以设置宽和高、自上而下排列，块级元素一般用来作为其它元素的容器。
2、内联元素---横向排列、不能设置宽和高
3、内联块元素---横向排列、可以设置宽和高

关于元素类型的划分问题

a、最早的时候，元素类型划分为两类—块级元素和内联（行内）元素
b、后面有人提出把内联元素分为：行内、行内块元素—块级、内联、内联块
c、还有一种划分方式：置换元素和非置换元素
置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。且元素本身一般有固定尺寸（宽度、高度、宽高比）的元素，被称之为置换元素。img input select textarea button
非置换元素：html的大多数元素是非置换元素，即其内容直接表现给用户端。