css基础,css

css基础,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 等)

  Vertical-aling:用于自身相对于其他行内元素的位置,行内元素默认基线对齐;

  Line-height:内容区域+行上下间距,理论上讲,一行中的每个元素都有一个内容区域,它是由字体尺寸决定的,当行高小于字体大小时字体会下沉;行高具有继承性;

  Font-size:默认情况下行高是由字体绝定的;

块状元素(常见的块级元素有 div, form, table, p, pre, h1~h6, dl, ol, ul
等);

内联块状元素(常见标签img);

 

四.盒子模型(margin/padding/border/content);     

                   width和height包含的时content区域,不包含border和pdding

                   1.标准盒模型:

        
                  图片 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.具有破坏性(子元素浮动,会使没有设置高度父元素的高度产生塌陷);

                   清除浮动方法:

  

七.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(换行);

        

 

说明:本文属于笼统的总结css入门的知识点,当中需要深入的知识点,我会继续学习并总结;
css的引入: l 使用HTML标签style : style /s…

标签:

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图