css 选择器优先级,标签>id>class 权重 id>class>标签 只记录能想到的以免遗忘: 1.字体css可继承 2.表格:表格细线的合并,表格单元格合并,单元格内容水平居中,首行和首列的标签,这些应该够了 3.边框.背景属性 border:dotted/solid 5px #f00; 可拆分成三个来写 border-style:solid; border-5px; bogrder-color:#00f; css由上至下执行 背景属性: 背景图片div background-imge:url(1.png);//相对路径 挡图片小于div背景大小时会默认横向铺满和纵向铺满; background-repeat:repeat-x/y/norepeat 横纵不铺满 background-position:10px 20px 距离左边值,上边值 控制图片方位 background-color:#ccc;控制背景颜色 希望背景图片固定不随滚动轴滚动 background-attachment:fixed; background:blue url("xxx.jpg") no-repeat fixed 10px 20px;//颜色 地址 不重复 固定 左边 右边 4.隐藏,滚动条,zindex属性 内容超出div的情况,超出部分隐藏 overflow:hidden//不占位置 overflow:auto//超出部分自动产生滚动条,一般使用此项 overflow:scroll//不论是否超出都产生滚动条 visibility:hidden;占据页面位置,块的隐藏 position:absolute;脱离文档流 5.鼠标,列表,垂直居中属性 cursor:pointer; cursor:wait; cursor:help; <ul type="">尽管某些html属性可修改外观,但是我们不会去改html,而是去改css list-style-type:none/disc/circle;空,实心圆,空心圆 列标签加图片 list-style-image:url("1.jpg"); 垂直居中属性 img{ vertical-align:middle/text-top/text-bottom;垂直居中,置顶,置地 } 6.行内元素和块级元素 块级元素:div, div{ height:100px; width:100px; border:solid 1px red; } 块级元素特点: 1.块级元素的内容,默认显示在块的左上角 2.块元素,单独占满一行.(文档流,) 常用的块级元素: div p h1-h6 form menu pre table 三种列表 olli ulli dldt 行内元素 <span>只显示文字内容</span>//1.可存在于同一行2.设置高度宽度无效 常用的行内元素 span a lable img textarea strong input select 7.行内元素和块级元素相互转换 块级元素->行内元素 display:inline; 行内元素->块级元素 display:block; display:inline-block;既有行也有块元素 8.浮动 块级元素的并排,浮动 <div id="d1">1</div><div id="d2">1</div><div>3</div> #d1{ float:left; } #d2{ float:left; } 第一个div往左边漂浮,第二个跟在第一个后面向左面漂浮 若前一个div有浮动,会影响后一个div的css样式所以要清除被影响div的左边浮动 清除左边浮动 clear:left; clear:right;清除下一个div的浮动影响 同时清除左右 clear:both; 9盒子模型 上下左右边框 #d1{ width:100px; height:100px; boder:solid 1px red; border-bottom/top/left/right } 设置内边距 padding:10px;上下左右 padding:10px 2px;上下左右 padding:1px 2px 4px;//上左右下 padding:1px 2px 4px 2px;上下左右 padding-top left right bottom 设置之后div会变大,相应的div要变下,从下,右边开始减少 是指外边距 margin:10px;上下左右 margin:10px 2px;上下左右 margin:1px 2px 4px;//上左右下 margin:1px 2px 4px 2px;上下左右 margin-top left right bottom 同时支持行内元素 CSS定位 staitc :默认,和不设置情况一样 relative 1,相对定位没有脱离文档流,会单独占满一行,他的方位会受到top left bottom right影响 2.相对于块的最近的父元素定位,会被兄元素占位挤开,不管父元素是否定位 3.可设置浮动,依旧会被兄元素占位挤开 absolute:脱离文档流 1.脱离文档流,不会单独占满一行,他的方位只会收到top.left,bottom right影响, 2.一个块的top,left,bottom,right是相对于什么? 1)如果他的父元素做了定位,就相对于的是最近的一个父元素 2)如果父元素没有定位就相对于body定位 fixed :固定定位 1.脱离文档流,相对于body当前页面,不会单独占满一行 2.top left right bottom 始终相对于的是body top.left right bottom 只有设置了定位(相对,绝对,固定)的时候才有用 css3圆角,阴影,背景铺满 #d1{ width:100px; height:100px; border:solid 2px red; border-radius:10px;//表示以此间距进行圆角处理,100%为圆 border-radius:10px 20px;//左上和游侠是10,右下和坐下时20 border-radius:10px 20px 0px ;//左上是10,右下是0 忧伤和坐下时20 border-radius:10px 0 0 0 ;//只显示左上的10圆角 box-shadow:10px 10px 10px #ccc;//阴影的横向,纵向,半径,颜色 } body{ background-img:url("1.png"); background-repeat:no-repeat; background-size:cover;//会铺满该元素 } css3旋转,倾斜,位移,平滑过渡,缩放 *{ padding:0px; margin:0px; } #d1{ widht:150px; height:150px; border:solid 2px red; background-color:#fc9 position:200px; left:200px; transform:rotate(30deg) scale(0.5) translate(20px,30px) skew(30deg,0deg);//沿顺时针旋转30度,-30deg则沿逆时针旋转30度--scale(0.5)放大or缩写n倍; //--位移,x,y距离,--倾斜角度横竖 } //平滑过渡动画,当鼠标放到div上 #d1:hover{ transform:rotate(30deg) scale(2); transtion:transform/all 1s ease/ease-in/ease-out;//所有属性 时长 缓慢 渐渐 } css3自定义动画--//浏览器可能不兼容 加个前缀 //-webkit-:兼容谷歌浏览器 moz- ms-ie o- opera 明白了 #d1{ position:absolute; top:100px; left:100px; width:750px; height:438px; -webkit-animation:donghua 20s infinite/2 ease;//动画名称,播放时长,播放次数/一直播放/2次 播放快慢 } @keyframes donghua{ 0%{ transform:translateX(0deg); } 50%{ transform:rotateX(180deg); } 100%{ transform:rotateX(360deg); } } css3渐变效果 线性渐变 #d1{ widht:300px; height:200px border:solid 1px red; background:-webkit-gradient(linear,left top,left bottom,from(blue) to(red),color-stop(0.4,#fff),color-stop(0.4,#333));//-webkit-谷歌浏览器支持写法,填充渐变色,中间加个白色色标过度,色标可加多个 } 径向渐变 #d1{ widht:300px; height:200px border:solid 1px red; background:-webkit-gradient(radial,center center,0,center center,200,from(blue),to(red),color-stop(0.4,#fff)); } 10响应式布局 同一个页面在不容的设备看到的是不同的效果 <div id="header">头部</div> <div id="main"> <div id="main-left">主题-左边</div> <div id="main-center">主题-中间</div> <div id="main-right">主题-右边</div> </div> <div id="footer"></div> 通过 @media screen and (min-900px)//如果你的pc最小宽度是900px; @media screen and (max=600px)//手机上看 <style type="text/css"> /*屏幕宽度大于900的时候*/ * { padding:0px; margin:0px; font-family:"微软雅黑"; } #header { height:100px; border:solid 1px red; margin:0px auto; } #main { margin:10px auto; height:400px; } #footer { margin:0px auto; height:100px; border:solid 1px red; } @media screen and (min-900px) { #header,#footer { width:800px; } #main { width:800px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:394px; height:400px; border:solid 1px red; float:left; } #main-right { width:200px; height:400px; border:solid 1px red; float:left; } } @media screen and (min-600px) and (max-900px) { #header,#footer { width:600px; } #main { width:600px; height:400px;; } #main-left { width:200px; height:400px; border:solid 1px red; float:left; } #main-center { width:396px; height:400px; border:solid 1px red; float:left; } #main-right { display:none; } } @media screen and (max-600px) { #header,#footer { width:300px; } #main { width:300px; height:400px;; } #main-left { display:none; } #main-center { width:300px; height:400px; border:solid 1px red; } #main-right { display:none; } } </style> </head> <body> <div id="header">头部</div> <div id="main"> <div id="main-left">主题-左边</div> <div id="main-center">主题-中间</div> <div id="main-right">主题-右边</div> </div> <div id="footer"></div> </body>