css所有内容

选择器：
    .class{}    类选择器
    #id{}       id选择器
    p{}         标签选择器
    * {}        通用选择器

    li a{}        后代选择器
    div>p{}       儿子选择器
    div+p{}       毗邻选择器
    #i1~p{}       弟弟选择器

    p[title]{}    属性选择器
    p[title="article"]{}    属性值选择器
    [title^="article"]{}    有title属性并且title属性以article开头
    [title$="article"]{}    以article结尾
    [title*="article"]{}    包含article
    [title~="article"]{}    title可以有很多值，其中一个是article

    div,p{}        应用于每个
    .c1 p{}        后代选择器

    伪类选择器：
    a:link{}        未访问过的链接
    a:visited{}     访问过的链接
    a:hover{}       鼠标移动到链接上
    a:active{}      选定的链接
    input:focus{}   input输入框获取焦点时的样式

    伪元素选择器：
    p：first-letter{font-size:48px;color:red;} 首字母特殊格式
    p:before{content:"*";color:red;}  段落前加*  多用于清除浮动
    p:after{content:"？";color:red;}  段落后加？ 多用于清除浮动


声明（属性：值）：
    字体:
    font-family:...     字体家族
    font-size:14px      字体大小
    font-weight:normal(默认) bold(粗) bolder(更粗) lighter(更细) 100~900（400等同于normal 700等同于bold）
    color:#ff0000  rgb(255,0,0) red

    文字：
    text-aligh:left(左对齐) right(右对齐) center(居中) justify(两端对齐)
    text-decoration:none underline overline line-through inherit 常用none去掉a标签的下划线
    text-indent:32px;  首行缩进32像素


    背景：
     背景颜色
    background-image:url('1.jpg');  背景图片
    background-repeat:repeat默认平铺排满整个网页 no-repeat(不重复) repeat-x repeat-y;
    background-position:right top (20px 20px);背景位置
    background-attachment: fixed;  固定图片位置


    边框：
    border:2px solid red;  边框宽2 实线 红色
    border-top-style:solid;
    border-right-color:red;
    border-bottom-style:none; 下部无边框

    border-radius:50%;   圆形（可以将头像变为圆形）

    display属性：
    display:"none";           隐藏标签，一般配合js使用
    display:"block";          变为块级标签
    display:"inline";         变为内联标签
    display:"inline-block";   变为内联块标签
    visibility:hidden; 隐藏标签，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。



    css盒子模型：
    margin        外边距
    padding       内边距
    border        边框
    content       内容
    顺序：top right bottom left
    常见居中：margin:0 auto;
    （未完待续）


    float属性：
    float:left;       向左浮动
    float:right;      向右浮动
    float:none;       不浮动


    clear（解决浮动之后的问题）
    clear:left;   在左侧不允许浮动元素存在
    clear:right;  在右侧不允许浮动元素存在
    clear:both;   在两侧不允许浮动元素存在
    clear:none;   默认值，允许浮动元素出现在两边。
    一般用以下方式清除浮动：
    .c1:after{
            clear: both;
            content: "";
            height: 0;
            visibility: hidden;
            display: block;
        }


    overflow溢出属性：
    overflow:visible;  默认值，内容不会被修剪
    overflow:hidden;   内容会被修剪，修剪掉的隐藏
    overflow:scroll;   内容会被修剪，修剪掉的滚动条显示
    overflow:auto;     如果内容被修剪，则出现滚动条
    overflow-x:...;
    overflow-y:...;


    position定位属性
    position:static;        默认值，无定位
    position:relative;      相对（原始位置）定位
    position:absolute;      绝对定位
    position:fixed;         固定 可以用来做返回顶部


    z-index自定义模态框属性：
    z-index:999;   数值大的覆盖在数值小的标签上

转载于:https://www.cnblogs.com/yuanyachao/p/8652640.html