css学习笔记
选择器：
1.标签选择器
2.类选择器
3.id选择器
4.通配符选择器
字体属性：
文本属性：
文字居中：文字居中，可让line-height行高等于盒子高度
css引入方式：
快速生成html标签
css的复合选择器：
1.后代选择器
2.子选择器
3.并集选择器
4.链接伪类选择器（a链接在浏览器有默认样式，要给链接单独指定样式）
5.focus伪类选择器
css的元素显示模式：
css的背景：
盒子模型：
简写属性（顺时针）左上角，右上角，右下角，左下角，border-top-left-radius，border-top-right-radius，border-bottom-right-radius，border-bottom-left-radius，
如果是正方形，设置成圆就把数值改成高度或者宽度的一般就好，或者直接写50%
如果是个矩形，设置成高度的一半就好
内边距影响盒子大小： （如果盒子有了宽度高度，再指定内边距会影响盒子实际大小（宽度高度再加上两边内边距大小），解决办法在一开始设置盒子高度宽度减去两边内边距大小）
内边距不影响盒子大小：如果盒子本身没有指定width/height属性，padding不会撑开盒子大小
给固定盒子宽度不合适：例如盒子适合放四个子，但是放两个字就有点大；解决办法：不给盒子宽度，只设置四个字和两个字的内边距相等
外边距margin:
设置外边距，控制盒子盒子之间距离：margin left，right，top，bottom，简写方式和padding完全一致
外边距让块级盒子水平居中满足两个条件：1.盒子指定了宽度 2.盒子的左右外边距都设置为auto （最常用）margin：0 auto； margin：auto；margin-left：auto；margin-right：auto；
让行内元素或者行内块元素水平居中是给其父元素添加text-align：center即可
相邻块级元素垂直外边距的合并：（解决方案：尽量只给一个盒子添加margin值）
上下两个兄弟块级元素，上面块级元素有下外边距margin-bottom，下面块级元素有上外边距margin-top，它们两个块级元素合并后的间距是两个值中较大的间距。
嵌套块元素垂直外边距的塌陷：
对于两个嵌套（父子）关系的块元素，父元素和子元素都有上外边距，此时父元素会塌陷较大的外边距值。
解决方案（1.为父元素定义上边框 2.父元素定义上内边距 3.为父元素添加overflow：hidden
清除内外边距：
*{
margin：0；
padding：0；
}
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上线内外边距，转换为块级元素和行内块元素就可以了
盒子阴影：box-shadow，不占用空间，不影响其他盒子排列
h-shandow 必需，水平阴影的位置
v-shandow 必须，垂直阴影的位置
blur： 可选，模糊距离
spread： 可选，阴影的尺寸
color： 可选，阴影的颜色
insert： 可选，将外部阴影改为内部阴影，注意：默认是outset外阴影，但不可以写outset否则导致阴影无效
文字阴影：text-shadow
h-shadow：必需，水平阴影的位置
v-shadow：必需，垂直阴影的位置
blur：可选，模糊的距离
color:可选，阴影的颜色
浮动：
css三种传统布局方式：普通流（标准流），浮动，定位（实际开发基本都是包含了这三种布局方式）
普通流（标准流）：标签按照规定好默认方式排列，最基本的布局方式
浮动：选择器{float：属性值：none（默认值），left，right}
网页布局第一准则：标准流负责多个块级元素纵向排列，浮动负责多个块级元素横向排列
为什么需要浮动：很多效果标准流无法完成，浮动可以改变元素标签默认的排列方式
什么是浮动：float属性用于创造浮动框，将其移动到左边缘或右边缘触及包含快或另一个浮动框的边缘
浮动特性：
1.浮动元素会脱离标准流的控制（浮）移动到指定位置（动）（脱标）
2.浮动的盒子不再保留原先的位置
3.浮动元素一行：
显示多个盒子都设置了浮动，会按照属性值一行内显示并且顶端对齐，浮动元素无缝隙贴靠在一起，如果父级宽度装不下这些浮动盒子，多出的盒子另起一行对齐
4.浮动元素具有行内块元素的特性：
任何元素不管之前是什么模式，加了浮动后都具有行内块元素的特性，盒子大小由内容来决定
如果行内元素有了浮动，就不需要转换为块级或者行内块元素就可以直接给高度和宽度了
如果块级盒子没有设置宽度，默认宽度和父级一样宽，添加浮动后大小根据内容来决定
5.浮动元素经常和标准流父级搭配使用：
先用标准流的父元素排列上下位置，之后内部子元素浮动排列左右位置
6.一个元素浮动了，理论上其余的兄弟元素也要浮动；浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
为什么要清除浮动：
由于父盒子很多情况下不方便给出具体高度（子盒子自动撑开），子盒子浮动后不占有位置，父盒子高度为0，影响下面的标准流盒子
清除浮动本质：
清除浮动元素脱离标准流造成的影响
清除浮动策略：
闭合浮动，只让浮动在父盒子内部影响，不影响外边的其他盒子（关起门来收拾）
清除浮动方法：（选择器{clear：属性值（left，right，both常用）} ）
1.额外标签法：
缺点：影响整体结构，结构和表现没有分离，添加许多无意义标签
优点：但通俗易懂书写方便
在最后一个浮动的子元素后面添加一个额外空标签（必须是块级元素独占一行），然后添加浮动样式
2.父级添加overflow：（选择器{overflow：属性值（hidden、auto、scroll）}）
缺点：无法显示溢出部分，会切掉
优点：代码简洁
3.after伪元素法：（额外标签法的升级版，给父元素添加）
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
.clearfix:after{
content:"";
display:block; //默认是行内元素，转化为块级元素
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom: 1; //照顾低版本浏览器
}
4.双伪元素清除浮动：(给父元素添加）
优点：代码更简洁 缺点：照顾低版本浏览器
.clearfix:before，.clearfix:after {
content:"";
display:table;
}
..clearfix:after {
clear:both;
}
.clearfix{
*zoom: 1; //照顾低版本浏览器
}
定位：
1.定位=定位模式+边偏移（指定元素在文档中的定位方式、决定元素的最终位置）
定位模式：静态定位（static）、相对定位（relative）、绝对定位（absolute）、固定定位（fixed）
边偏移：top、bottom、left、right
2.静态定位：选择器{position：static；}
元素的默认定位方式，无定位的意思
静态定位按照标准流特性摆放位置，没有边偏移，布局很少用到
**3.相对定位：选择器{position：relative；}
a.相对于自己原先位置移动的
b.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保持在原来位置）
** 4.绝对定位：选择器{ position：absolute； }
元素移动位置时候，相对于它祖先元素
a.如果没有祖先元素或者祖先元素没有定位，以浏览器为准定位（Document文档）
b.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置
c.绝对定位不再占有原先的位置（脱标）
5.子绝父相：子级绝对定位，父级相对定位
a.子级绝对定位，不占位置，可以放到父盒子的任何位置并且不影响其他的兄弟位置
b.父盒子布局时要占有位置（要不然后面的盒子会占掉脱标后的父盒子位置，不能绝对定位）只能是相对定位，父盒子加定位后限制子盒子在父盒子里面显示
相对定位经常用来作为绝对定位的父级
总结：子盒子不需要占位置绝对定位，父盒子需要占位置相对定位
**6.固定定位： 选择器{ position： fixed； }
固定定位是元素固定于浏览器可视区的位置
a.以浏览器可视窗口为参照点移动元素（和父元素无关，只和可视窗口）
b.固定定位不再占有原先的位置，也是脱标的，可以看成特殊的绝对定位
小技巧:固定在版心右侧位置
a.让固定定位的盒子left：50% ； 走到版心的一般位置
b.让固定的盒子margin-left：版心宽度的一般距离 ； 多走版心宽度的一半位置，就右侧贴合了
7.粘性定位：选择器{ position ：sticky ；top ：10px; }
a.以浏览器的可视窗口为参照点移动元素
b.粘性定位占有原先的位置
c.必须添加top,left,right,bottom其中一个才有效
跟页面滚动搭配使用，兼容性较差，IE不支持
8.定位叠放顺序：选择器{ z-index：1； }
单位布局时出现盒子重叠的问题，可以用z-index来控制盒子的前后次序
a.数字可以是正整数，负整数，0，默认是auto，数值越大盒子越靠上，数字后面不能加单位
b.如果属性值相同，则按照书写顺序，后来者居上
c.只有定位的盒子才有z-index属性
9.绝对定位的盒子居中：
加了绝对定位的盒子不能通过margin：0 auto水平居中
a.left：50% ; 让盒子的左侧移动到父级元素的水平中心位置
b.margin-left: 盒子宽度一半的数值; 让盒子向左移动自身宽度的一半
10.定位的特殊性：
a.行内元素添加绝对或者固定定位，可以直接设置高度和宽度
b.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
c.脱标的盒子（浮动元素，绝对定位（固定定位） ）都不会引起外边距合并的问题（外边距塌陷）
11.绝对定位（相对定位）和浮动元素下的文字
a.浮动元素只会压住下面标准流的盒子，不会压住下面标准流盒子里面的文字（图片），浮动产生的最初目的就是做文字围绕效果的
b.绝对定位（相对定位)会压住下面标准流的所有内容
元素的显示和隐藏：
本质：让一个元素在页面中隐藏或者显示出来
display属性：
display：none； 隐藏对象，隐藏后不再占有原有位置
display：block； 显示元素（还有转换为块级元素）
visibility可见性：
visibility：visible； 元素可视
visibility：hidden； 元素隐藏，隐藏后继续占有原有位置
overflow溢出：
visible：不剪切内容也不添加滚动条
hidden：将超出的内容隐藏
scroll：不管有没有超出内容，总是显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条
浙公网安备 33010602011771号