【Frontend blog-Ryan】03. CSS基础部分B

CSS文本属性

常用属性：width, height, font-size, color, background-color, text-align, line-height, margin, text-indent.

text-decoration: none; 适用于清除当前的文本修饰，例如清除超链接自带的下划线，很常用

CSS列表属性

list-style-type: disc/circle/square/none;

list-style-position: outside/inside;

list-style-image: url(icon.jpg); 能显示小图标，但是大小和位置调整不了

CSS边框属性

常用属性：border-width, border-color, border-top/bottom/left/right

border style: solid/dashed/dotted/double;

border: 5px solid blue; 简化写法

边框书写三角形：

.box{
	border: 10px transparent solid;
	border-top: 10px solid red;
	width: 0;
	height: 0;
	/* 边框书写三角形 */
}

CSS背景属性

background-attachment: scroll/fixed;

div{
	width: 500px;
	height: 500px;
	border: 5px solid blue;
	margin: 20px;
	font-size: 50px;
	background-attachment: scroll;
	/* 背景图随着滚动条移动，默认； */
	/* background-attachment: fixed; */
	/* 背景图会固定在浏览器窗口里，且显示范围是容器。
	固定后，调整背景position会根据浏览器变化而非容器*/
	/* background-position: center center;
	不在容器中间，而在浏览器的正中间 */
	/* background: red url() no-repeat center;
	优化简写 */	
}

background-image: url(bg.png); 背景图不占位，且默认平铺显示

background-repeat: repeat/repeat-x/repeat-y/no-repeat

background-position: center bottom / 200px 100px; 给数字时，对应往x轴和y轴移动的距离，css中x轴向右，y轴向下为正方向

CSS元素类型

块元素：有宽高，可调整，常用p, h1-h6, ul, div等

行内元素/内联元素：始终是横着排列，他们没有自己的形状，不能定义它的宽和高，例如span，a，b，strong，i，em。内联元素对于margin和padding上下间距显示不正确，识别回车为空格。
不过对margin左右是有效的。

行内块元素：具备两者特点，img，input，textarea

元素转换：

display: block/inline/inline-block/none; none为隐藏

CSS定位

为什么需要定位？

1. 想要一个盒子覆盖在另外一个盒子上的时候
2. 位置移动的时候

        position总结：

• position: static; 默认
• position: absolute; 绝对定位，脱离文档流
• position: fixed; 固定定位，脱离文档流
• position: relative; 相对定位，不脱离文档流，
• position: sticky; 粘性定位，css3新增，可以做吸顶效果

绝对定位：默认的时候，多个盒子给绝对定位之后，结构在后的盒子定位之后在最上方

.box1{
	width: 200px;
	height: 200px;
	background: red;
	position: absolute;
	/* 该盒子给了绝对定位之后，之后是悬在页面之上的，不在占据
	浏览器的位置，这种悬空不占位的现象，叫做脱离文档流。 */
	/* right: 50px;
	top: 0; */
	/* z-index: 1; */
	/* 改变z-index可改变盒子层数，zindex值越大，就在最上层。 */
}

参照物：
1. 当没有父元素，或者父元素没有定位，参照物是浏览器窗口的第一屏
2. 有父元素，且父元素有定位，父元素

固定定位：脱离文档流，参照物为浏览器的当前窗口 添加父元素也没有关系，也可以用z-index来改变

相对定位：非脱离文档流，给了相对定位之后，该盒子继续占据浏览器的位置。移动之后，原来位置还在。偏移时的参照物是原来的位置。最常用最实用的添加定位方式为父相子绝（父元素相对定位，子元素绝对定位）。

粘性定位：

.box1{
	width: 1200px;
	height: 40px;
	background: orange;
	position: sticky;
	top: 0px;
}

水平垂直居中的三种实现方式：

.box1{
	width: 300px;
	height: 300px;
	background: orange;
	position: absolute;
	top: calc(50% - 150px);
	left: calc(50% - 150px);
	/* calc()计算函数支持+ - * / 四则运算，但是+和-的符号前后必须加空格 */
}
.box2{
	width: 200px;
	height: 200px;
	background: green;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -100px;
	margin-left: -100px;				
}
.box3{
	width: 100px;
	height: 100px;
	background: red;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

网页优化

自适应的方法：
1. 宽度或者高度不写（若父元素高度不写，子元素浮动会引起高度塌陷）
2. 宽度或者高度使用百分比
3. 用max-width，min-width，min-height，max height调节 -->
高度塌陷的触发条件：
父元素高度不写，且所有的子元素都浮动了，那么父元素会高度塌陷。
高度塌陷的解决办法：
1. 给塌陷的盒子添加overflow：hidden
2. 在所有的浮动盒子的最下面添加一个空标签，且声明clear：both；（仅作了解，
造成代码冗余，对优化不友好）
3. 万能清除法：
塌陷的盒子:after{content:""; display:block; clear:both;}

精灵图

为什么要使用精灵图：
1. 通过图片整合来减少对服务器的请求次数，从而提高页面加载速度
2. 通过整合图片来减小图片体积

字体图标：

为什么要使用iconfont：
1. 设计不用再切图了，更不需要针对不同场景切出大小，颜色，格式等等；不同的
图片，只需维护一个图标项目库即可；
2. 字体图标缩放不失真，不会变模糊；
3. 开发者也不用引用大量图片，仅class名就可以完成，修改灵活；
4. 减少网络请求次数，一个css文件可包含所有图标，节约流量。

浏览器兼容问题

为什么会出现浏览器兼容问题？
因为各大主流浏览器由不同的厂家开发，所用的核心架构和代码很难重合。

五大浏览器内核：
1. Trident；IE浏览器，腾讯，360，遨游，世界之窗（不开源）
2. Gecko；Mozilla Firefox（开源），跨平台
3. Webkit；Safari，Chrome旧内核，开源
4. Presto；Opera的前内核
5. Blink；Google和Opera联合开发