css学习笔记

css三大特性
层叠性 ：就近原则

继承性：文字类的继承 例：font:12px/1.5 Microsoft YaHei 继承行高为文字大小*1.5

优先级： ！important > 行内 > id > class > 元素 > 继承或者*
注意：永远大于，且继承的权重为0！！！

css属性书写顺序： 布局定位》自身属性》文本属性》其他属性css3
}

页面布局{
1.盒子模型：
实际内容content
边框border， border: 1px solid pink;
内边距padding, padding: 10px 5px 5px 10px;
边框和内边距会影响盒子大小，当不给盒子宽度或者高度，则padding不会撑宽盒子
外边距margin｛
margin: 0 auto;块元素居中
行内元素或者行内块元素居中就给父元素添加text-align: center
嵌套块元素会可能造成塌陷问题，解决方法，给父元素加边框或边距或 overflow:hedden

圆角边框：border-radius:length
盒子阴影 box-shadow
文字阴影 text-shadow

｝

2.浮动 {2.1浮动元素特性：行显示 具有行内块元素特性
准则1：多个块级元素纵向排列标准流，多个块级元素横向排列找浮动
准则2：先设置盒子大小之后设置盒子位置

浮动的元素不会压着标准流的文字或图片，绝对定位（固定定位）会完全压住盒子

设置了浮动则脱离标准流，浮动的盒子不再保留原先位置
浮动元素经常搭配标准流的父元素：（父元素有时候可以不给高度，但是如果子元素全部浮动则父元素没有高度，这是需要清除浮动 {clear both} ）
一个元素浮动了，理论上兄弟元素也要浮动。浮动的盒子只会影响浮动盒子后面的标准流，不影响前面的

清除浮动{
1.隔墙法

2.给父级元素添加 overflow:hidden auto 

3. :after 伪元素法   :    clearfix:after{...}

4.双伪元素清除           clearfix:before, clearfix:after{...}

}

3.定位 {
3.1定位可以让盒子自由的在某个盒子里内移动位置或者固定屏幕中某个位置 ，并且可以压住盒子

定位 = 定位模式position +边偏移top buttom left right

定位模式position
静态定位
相对定位（占有原位置），
绝对定位（不再占有原位置，以最近一级父元素为参考点，口诀：子绝父相），
固定定位 （不再占有原位置，以浏览器的可视化窗口为参照）
粘性定位

定位叠放次序： z-index:权重

边偏移top buttom left right
}

页面布局思路{
1.可视区（版心），确认盒子宽度
2.分析页面中的行模块，一级每个行模块中的列模块（第一准则）
3.一行中的列模块经常浮动布局，先确定列模块的大小之后确定位置（第二准则）

}

css复合选择器 {
后代选择器

子选择器 > 大于号

并集选择器 ，

链接伪类选择器 ,存在顺序问题
link visited hover active

focus 表单input光标伪类选择器
}

元素显示模式 {
1.块元素:独占一行，可以设置高度宽度，内外边距，宽度默认为父级元素的100%，是一个容器盒子
注意：文字类元素内不能放块元素 p , h ,

2.行内元素： span, a,strong,em,b,del,s
一行可以显示多个，高度宽度直接设置无效，默认宽度为内容宽度，只能容纳文本或者其他行内元素。
注意，链接里不能再放链接，a里特殊情况下可以放块级元素

3.行内块元素：img input td 一行可以显示多个，但有空白缝隙.默认宽度为内容宽度,可以设置高度宽度内外边距

4.元素显示转换
4.1 display:block 吧行内元素转换成块元素

4.2 display: inlink 把块元素转换成行内元素

4.3 display: inlink-block 转换为行内块元素

5.单行文字垂直居中 line-height = height
}

背景{
约定简写 ： 颜色 源 平铺 固定 位置
background: #000 url(mgb201912.jpg) no-repeat fixed center 40px;
背景色半透明 : rgba(0,0,0,0.5)
}

元素的显示和隐藏 {
1.display 隐藏后不占位置
2.visibility 隐藏后占位置
3.overflow 有定位的盒子慎用overflow：hidden
}

精灵图 {
1.主要用于小背景图片
bg-position X Y

}