CSS基础
说明:本文属于笼统的总结css入门的知识点,当中需要深入的知识点,我会继续学习并总结;
css的引入:
l 使用HTML标签style : <style> </style>;
l 使用link标签,引入外部css文件 : <link rel=’stylesheet’ href=”./XX.css”>;
l 使用内联样式即标签的style属性 : <div style=”width:200px;height:200px;”> </div>;
l 使用@import导入css文件 :
- @import url("global.css");
- @import url(global.css);
- @import "global.css";
@import与! important 是不一样前者是引入css文件有媒体查询功能,后者是提升css属性样式的权重;
二.选择器:
1.元素选择符:
通配符选择符(*);会渲染所有节点;不建议使用
标签选择符(div;)
ID选择符(#id);
类选择符(.class)
2.关系选择符
包含选择符( E F);
子选择符(E>F);
相邻选择符(E+F);
兄弟选择符(E~F);
3.属性选择符
E[attr];
E[attr=”val”];
E[attr~=”val”]; 匹配attr属性，且属性值中有一个值为val;
E[attr^=”val”]; 匹配attr属性，且属性值以val开头;
E[attr$=”val”]; 匹配attr属性，且属性值以val结尾;
E[attr*=”val”]; 匹配attr属性，且属性值中含有val;
E[attr|=”val”]; 匹配attr属性，以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。
4.伪类选择符(列举常用)
E:link/E:visible/E:hover/E:active/E:focus
E:not(s),E下除了s之外的元素
E:root 根元素html;
E:first-child/E:last-child/E:only-child/
E:nth-child(n)/E:nth-last-child(n)/ E:nth-first-child(n)
E:first-of-type/E:last-of-type/ E:only-of-type
E:nth-of-type();
5.伪对象选择符
E:first-letter/E:first-letter
E:first-line/E:first-line
E:before/E:after
E::placeholder 浏览器兼容加前缀
E::selection
前缀 浏览器
- webkit chorme和safari
- moz Firefox
- ms IE
三.行内元素/块状元素/内联替换元素(inline/block/inline-bolck)
行内元素(常见的内联元素有 span, a, strong, em, label, input, select, textarea, img, br 等)
- inline元素会独占一行,多个相邻的行内元素可以排列在一行,(参照常见的行文字),元素占满一行会自动换行;宽度依据内容而定,高度依据line-height(content字体+上下行间距);
- inline元素设置width,height属性无效;
- inline元素的margin和padding属性,水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom,不会产生效果;
- 行内元素需要注意的相关属性有vertical-align/font-size/line-height
Vertical-aling:用于自身相对于其他行内元素的位置,行内元素默认基线对齐;
Line-height:内容区域+行上下间距,理论上讲，一行中的每个元素都有一个内容区域，它是由字体尺寸决定的,当行高小于字体大小时字体会下沉;行高具有继承性;
Font-size:默认情况下行高是由字体绝定的;
块状元素(常见的块级元素有 div, form, table, p, pre, h1~h6, dl, ol, ul 等);
- block元素会独占一行;默认宽是父元素的100%,;
-
block元素可以设置width,height属性.margin/padding属性;基于标准盒模型;
内联块状元素(常见标签img);
- 既具有block的宽度高度margin/padding特性又具有inline的同行特性;
- Block元素使用display:inline-block转换之后需要注意垂直方向基于基线对齐(有文字内容使用文字基线,无文字,使用元素content区域下边缘作为基线;所以在转换属性时,需要注意并加以利用;
四.盒子模型(margin/padding/border/content);
width和height包含的时content区域,不包含border和pdding
1.标准盒模型:
Margin:外边距left/right/top/bottom四个属性组成
取值:auto/length/percentage,可以有负值;
Percentage(百分比)取决于父元素宽度
Margin折叠:
❶margin折叠只发生在块级元素上；
❷浮动元素的margin不与任何margin发生折叠；
❸设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折叠。
❹绝对定位元素的margin不与任何margin发生折叠；
❺根元素的margin不与任何margin发生折叠
❻父元素与子元素（假设没有内边距或边框把外边距分隔开）它们的上和/或下外 边距也会发生合并；紧贴父元素取两者最大margin值；
对于没有设置宽高的普通的block元素下,水平方向上的margin(left/right)值可以拉伸(取负值)压缩(取正值)可视内容区域;
关于auto值:1.margin:0 auto;可以实现block元素水平居中;
2.margin: auto与position:absolute,在定位的父元素下会实现水平垂直居中;IE8+ 以上支持;
关于负值:对于没有设置宽高的元素,margin负值可以实现水平方向拉伸改变元素所占据的空间;可实现两列等高布局;
对于设有宽高的元素,margin负值会改变元素位置,发生位移效果,可实现两栏自适应布局;
Padding : 内边距left/right/top/bottom四个属性组成;
取值:length/percentage,不允许有负值;
Percentage(百分比)是相对于父元素的宽度设定;
内设padding值得标签元素ol/ul/input/textarea/button,单复选框无内置padding;
2.IE盒模型
通过box-size:border-box;属性设置;是IE特有属性; padding和border被包含在定义的width和height之内;
五.定位position
Static:对象遵循常规流;是默认属性;
Fixed:固定定位, 偏移定位以窗口为参考, 当出现滚动条时，对象不会随着滚动
Absolute:绝对定位, 对象脱离常规流偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素,则一直回溯到body元素.盒子的偏移位置不影响常规流中的任何元素,其margin值任然有效但不与其它margin发生重叠;
Relative:相对定位; 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
Absolute 1.具有包裹性即父元素设置absolute后会脱离文档流,且不会占据一行,会将子元素完全包裹
2.具有破坏性,父元素不设高度,子元素绝对定位后会使高度塌陷; overflow,也无法限制高度塌 陷,
3.在不设置left/top/right/bottom时absolute具有跟随性,可以使用margin属性来定位;,
六.布局(display/float/overflow);
Display:重点记住inline-block . block元素inline-block会产生空白节点,需要注意,其次对齐方式会默认基线对齐,元素内有文字,会基于文字基线,无文字会基于border-bottom下边缘作为基线;
Float:left/right/
浮动元素 1.具有包裹性(父元素浮动会包裹子元素,不会占据一行);;
2.具有破坏性(子元素浮动,会使没有设置高度父元素的高度产生塌陷);
清除浮动方法:
- 在父元素尾部生成伪类添加clear:both/left/right或者在尾部加空标签添加 clear:both/left/right;
- 父元素形成BFC;
七.BFC
BFC的全称是 Block Format Content，有三个特性
❶BFC会阻止垂直外边距（margin-top、margin-bottom）折叠：
（按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。 因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠）
❷BFC不会重叠浮动元素
❸BFC可以包含浮动
形成BFC:
❶float为 left|right
❷overflow为 hidden|auto|scroll
❸display为 table-cell|table-caption|inline-block
❹position为 absolute|fixed
总结形成BFC后内部发生什么都不会影响外部元素;
八.字体中的单位
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
Px是固定大小,em是相对大小(父元素);
10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%， 这就使em值变为 16px*62.5%=10px,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
八.css3
变换/过渡/动画/多列(column)/flex
1.变换:transform/transform-origin/transform-style/perspective/perspective-origin/backface-visibility
2.过渡transition:transition-property/transition-duration/transition-timing-function/transition-delay
3.动画animation:anination-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction/animation-play-state/animation-fill-mode
4.多列multi-column:
Columns-width/columns-count/columns-gap/columns-rule/columns-span/columns-fill
5.伸缩盒子flex;实现伸缩盒子样式需要给父元素添加display:flex 属性;
Flex:控制伸缩比例;
Flex-direction: 调整主轴方向（默认为水平方向）包括row、column、row-reverse、column-reverse;
Justify-content: 主轴方向对齐，可以调整元素在主轴方向上的对齐方式，包括flex-start、 flex-end、center、space-around、space-between几种方式
Align-items: 调整侧轴方向对齐方式，包括flex-start、flex-end、center、baseline、stretch;
Flex-wrap:控制是否换行nowrap(不换行)/wrap(换行);
