CSSの神小结-简单备忘一下(亲测可用)

css
选择器优先级,标签>id>class
权重 id>class>标签
只记录能想到的以免遗忘:
1.字体css可继承
2.表格:表格细线的合并,表格单元格合并,单元格内容水平居中,首行和首列的标签,这些应该够了
3.边框.背景属性
border:dotted/solid 5px #f00;
可拆分成三个来写
border-style:solid;
border-width: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-width:900px)//如果你的pc最小宽度是900px;
@media screen and (max=width: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-width: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-width:600px) and (max-width: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-width: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>