web前端———CSS基础知识点总结

1、web冃iu而,CSS基础知识点总结CSSCSS（cascadingstylesheet）汉译为层叠样式表（层叠性）,是用于控制网页样式WEB标准中的表现标准语言，在网页中主要对网页信息的显示进行控制。目前推荐遵循的是W3C发布的CSS3.0版本；用来表现HTML或者XHTML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0CSS语法css语法由两部分组成：选择符、声明。声明包括：属性和属性值选择符（选择器）属性:属性值;属性:属性值;pwidth:100px;height:200px;1）每个css样式由两部分组成，即选择符和声明，声明又分为属性和属性值；2）声明必

2、须放在花括号中，属性与属性值用冒号连接。（html属性与属性值用等号链接）3）每条声明用分号结束。4）当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。5）在书写样式过程中，空格、换行等操作不影响属性显示。（html会受空格换行影响）表单表单标签（内联块标签）属性：action=接口地址method=get/postname=表单名称表单控件属性：type=控件类型name:属性标识表单域的名称；Value:属性定义表单域的默认值，其他属性根据type的不同而有所变化。maxlength:控制最多输入的字符数，Size:控制框的宽度（以字符为单位）1）文本框2）密码框3）提

3、交按钮4）重置按钮5）空按钮CSS样式表内:部样式表语法：css语句注：使用style标记创建样式时，最好将该标记写在;2:外部样式（1）语法：说明：使用link元素导入外部样式表时，需将该元素写在文档头部，即与/head之间。rel:用于定义文档关联，表示关联样式表；type:定义文档类型；（2）、导入外部样式表importurl（目标文件的路径及文件名全称”）；3:内联样式表/标签CSS样式表的权重关系1）内联样式表的优先级别最高2）内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高。3）同在一个样式表中的优先级和书写的顺序也有关，后书写的优先级别高。（被覆盖的只是相同属性

4、的样式）CSS选择符（器）CSS基本选择符：类型选择符、id选择符、class选择符（类选择符）、包含选择器Css选择符分类：类型选择符（标记选择器）类选择符（class选择符）ID选择符（id选择器）伪类选择器通配符（*）设置全局属性群组选择符（集合选择器）包含选择符（后代选择器）属性选择符伪对象选择符选择符权重css中用四位数子表示权重，权重的表达方式如：0，0，0，0；权重规则：HTML标签（类型选择符）的权重是1,class的权重是10,id的权重是100。类型选择符的权重为0001class选择符的权重为0010id选择符的权重为0100属性选择符的权重为0010伪类选择符的权重为0

5、010伪元素（对象）选择符的权重为0001包含选择符的权重：为包含选择符的权重之和内联样式的权重为1000继承样式的权重为0000群组集合选择符权重为他本身注：如果权重相同时，则执行后写的样式；css属性继承不可纟继承的：display、margin、border、padding、background、height、min-height、max-height、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align所有元素可继承：visi

6、bility和cursor。内联元素可纟继承：letter-spacing、word-spacing、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform。块状元素可继承：text-indent和text-align列表元素可纟继承：list-style、list-style-type、list-style-position、list-style-image。表格元素可继承：border-collapse。盒模型盒模型组成=c

7、ontent（内容）+padding（内填充）+border（边框）+margin（外边距）标准盒子模型亡ontDntbonder-toppaddingtopmargintopborder-bottommargin-bottompadding-bottompadding内填充5:如果给单一方向添加paddingpadding-top/bottom/left/right6:padding的设置特点：padding:30px;四周padding:10px30px;上下左右padding:10px30px50px上左右下padding:10px30px50px100px上右下左margin外边距、边

8、界3:给单一方向添加marginmargin-left/right/top/bottom4:margin设置方法：margin:30px;四周margin:10px30px;上下左右margin:10px30px50px上左右下margin:10px30px50px100px上右下左定位position性值static默认値（iMiSBSistatic的元養会正常显示它始弊会处于文档流给予的位瓷（static元素会忽略任何top、bottom.1申或right声明）absolute相对于己经定彳立父级元素的绝对定位，浮出、脱韶布局流E不占据空间就是我们所说的层其位国目对于最近的已定位父兀素而言

9、的位辽可直接指定WfT、J,topbrightIU及“botsnr属性.若父级都没有達位则lilhtml根元素）（层髻的顺序z-index:value）relative是相对于默认位置的相对定仏通11设置left.top.right,bottom值可将基移至相对于其正常位宣的地万相对于自己的开始的性宣发生的位置上的移动【不会破坏正常的布局:施占据空间】）fixed相对浏览器的绝对走位是相对于浏览器窗口的指定坐标逬行走位。此元蠹的位章可1eft-top-right1以及-bottom-属性乘规走.不论窗口滚动与否，元素都会留在那个位聋。sticky可UA看出是position:relative和

10、position:fixed的绪合体当兀素在*liiE3口口冃止豆三丄1_*_i锚点命名锚点链接的应用：命名锚点的作用：在同一页面内/其他页面的不同位置进行跳转。制作锚标记：1）给元素定义命名锚记名语法：/标记2）命名锚记连接语法：扩展：scroll-behavior:smooth;CSS3选择符属性选择器1、Eattr:只使用属性名，但没有确定任何属性值2、Eattr=value:指定属性名，并指定了该属性的属性值3、EattrA=value:指定了属性名，并且有属性值，属性值是以value开头的4、Eattr$=value:指定了属性名，并且有属性值，而且属性值是以value结束的5、Ea

11、ttr*=value:指定了属性名，并且有属性值，而且属值中包含了value伪类选择器结构性伪类选择器X:first-child匹配子集的第一个元素IE7就可以支持X:last-child匹配父元素中最后一个X元素X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始X:nth-last-child(n)从最后一个开始算索引。X:first-of-type匹配同级兄弟元素中的第一个X元素X:last-of-type*匹配同级兄弟元素中的最后一个X元素X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素XX:only-of-type匹配属于同类型中唯一兄弟元素的XX:

12、nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素X动态伪类选择器a:link链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上a:visited链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上E:active用户行为选择器选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上E:hover用户行为选择器选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hoverE:focus用户行为选择器选择匹配的E元素，而且匹配元素获取焦点FLEXBOX布局(弹性盒)flex容器

13、属性1、display:flex、inline-flex注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。2、flex-direction属性决定主轴的方向(即项目的排列方向)flex-direction:row|row-reverse|column|column-reverse;3、flex-wrap属性，定义子元素是否换行显示flex-wrap:nowrap|wrap|wrap-reverse;4、flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap;5、j

14、ustify-content属性定义了项目在主轴（）上的对齐方式。justify-content:flex-start|flex-end|center|space-between|space-around;6、align-items属性定义项目在侧轴（单行）上如何对齐。align-items:flex-start|flex-end|center|baseline|stretch（默认值）；7、align-content属性定义了多根轴线的对齐方式。对于单行子元素，该属性不起作用。align-content:flex-start|flex-end|center|space-between|spa

15、ce-around|stretch;align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用flex项目属性1、align-self属性InternetExplorer和Safari浏览器不支持align-self属性说明：align-self属性规定灵活容器内被选中项目的对齐方式。注意：align-self属性可重写灵活容器的align-items属性。属性值auto默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为stretch。Stretch元素被拉伸以适应容器。Center元素位于容器的中心。flex-start元素位于容器的开头。flex-end元素位于容器的结尾。2、order说明：number排序优先级，数字越大越往后排，默认为0,支持负数。3、fle