前端基础知识_CSS

//width:300pxCSSBasicselectorIDselector#id{}classselector.cls{}elementselectordiv{}div.cls{}以上三个基本的选择器可以拼接在一起进行更精准的匹配例如：div.cls{}selection选择器的作用：匹配HTML元素CSS高级选择器组合选择器元素，element{}通配符选择器*{}后代选择器pElementsubElement{}子元素选择器pElem>subElem{}相邻兄弟选择器div+a{}//选择相邻的a标签属性选择器[attribute]{}element[attribute]{}element[attribute=value]{}伪类选择器a:link{color:#FF0000}/*未访问链接*/a:visited{color:#00FF00}/*链接已访问*/a:hover{color:#FF00FF}/*鼠标移动到链接*/a:active{color:#0000FF}/*选中的链接*/p:first-child{}伪元素选择器div::after{content:""}div::before{content:""}CSS优先级内部和外部样式合并！导入ant>lineBetweenStyles>ID选择器>类选择器/属性选择器/伪类选择器>元素选择器/伪元素选择器>通配符选择器.cls{}//0-0-0-1-0#id{}//0-0-1-0-0div.cls{}//0-0-0-1-1CSS常用样式文字字体：font-family:"TimesNewRoman",Times,serif;颜色：颜色：红色；字体大小：字体大小：40px；字体粗细：字体粗细：900；字体样式：字体样式：斜体；边距：边距：15px；边距：填充：20px；边框:border:1pxsolid#999;宽度：宽度：500px；高度：高度：400px；背景：#0079D2url(img/jt.jpg)不重复固定50%20%；单属性写法：背景图片大小：background-size:80px60px；背景颜色：背景颜色：黄色；背景图片位置：background-position:center;背景图片重复：background-repeat:no-repeat；背景图片：background-image:url('paper.gif');行高line-height:30px;//文本居中使用的值可以是%,value,pixeldisplayandhide1,displayhiddenstyle:display:none;displaystyle:display:除none以外的其他值2、visibilityhidden:visibility:hidden;显示：可见性：可见；positioning位置值：absolute、relative、fixed1、绝对定位CSS布局html标签分类块级元素（block）1、宽高可设置，不设置宽度，默认100%2、排他行3、block级元素可以嵌套块级元素和行内元素内联元素（inline）1.内联元素不占一行。多个相邻的内联元素会排在同一行。直到一条线放不下时才会更换新线。2、不支持设置width、height、width和height随着元素内容的变化而变化3、内联元素只能嵌套行内元素，不能嵌套块级元素和inline-block元素。行内块元素（inline-block）1.宽高可以设置2.行内元素不会独占一行3.块级元素可以嵌套块级元素和行内元素清除浮动，子元素需要浮动(float:left/right;)/*清除浮动代码*/.clearfloat:after{display:block;clear:both;content:"";}.clearfloat{zoom:1}/*可以解决ie6和ie7的浮动问题*/