CSS 选择器 样式 浮动 盒子模型 块元素 内联元素 内联块元素 定位 权重

无序列表ul

有序列表ol

li{
    /*去掉默认小圆点 样式*/
    list-style: none;
    margin: 0;
    padding: 0;
}

css选择器

标签选择器
div 影响范围大，通常做一些通用设置

类选择器

.con 一个类可以应用多个元素，一个元素可以使用多个类，应用最为广泛

层级选择器

.con img
span img a主要应用在标签嵌套中，结合标签选择器和类选择器通过层级限制样式的作用范围

id选择器

p{}

元素的id名不能重复，id一般用于程序调用，不推荐做选择器使用 组选择器 多个选择器，有同样的样式 con,head{}

#### 伪类选择器 /*鼠标悬浮info时 样式 常用于a标签*/ .info:hover{ color: red; }

伪元素选择器

.info:before{
    content: "需要在首部添加的内容";
    /*添加的内容也可以设置样式*/
    color: yellow;
    }

.info:after{
    content: "需要在尾部添加的内容";
    }

选择器

        /*选中第一层子级*/
        .con>a {
            color: red;
        }


        /*同级后面,越过该级别第一个*/
        .con+a {
            color: blue;
        }

        /*同级后面，越过该级别所有的*/
        .con~a {
            font-size: 30px;
        }

属性选择器

.con div[class] {
            color: red;
        }
        /*class等于haha的*/
        .con div[class="haha"] {
            color: blue;
        }
        /*haha开头的*/
        .con div[class ^="haha"] {
            font-size: 30px;
        }
        /*haha结尾*/
        .con div[class$="haha"]{
            background-color: gold;
        }
        /*有haha*/
        .con div[class*="haha"]{
            font-weight: bold;
        }

        /* 等于haha　或者 以haha- 开头的 */
        .con div[class|="haha"]{
            font-style: italic;
        }

## 文本常用属性css

.text{
    /*水平对齐方式*/
    text-align: center;
    text-align: left;
    text-align: right;
    /*文档首行缩进*/
    text-indent: 24px;
    /*文档下划线*/
    text-decoration: none;
    text-decoration: underline; 
    /*a标签默认有下划线*/
    }

字体设置

/颜色 英文名 16进制表示 rgb表示 /

color: red;
    color: #ff0000;
    color: rgb(255,00,00);
    /*大小*/
    font-size: 12px;
    /*父级设置文字大小为0，可以解决子级内联元素有间隙的问题*/
    font-size: 0;
    /*字体 为了兼容，字体最好写英文*/
    font-family: "Mrcrosoft Yahei";
    /*设置行高，字会在行高内居中显示*/
    line-height: 24px;
    /*斜体*/
    font-style: italic;
    /*加粗*/
    font-weight: bold;

    /*样式(正常) 字号/行高 字体   后两者顺序不能颠倒*/
    font:normal 12px/24px "Mrcrosoft Yahei";
    font:bold italic 12px/24px "微软雅黑";

css元素溢出

• 当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，
• 设置的方法是通过overflow属性来设置。

.text{
    /*默认  不理会，会溢出*/
    overflow: visible;
    /*隐藏   此属性还有清除浮动、清除margin-top塌陷的功能。*/
    overflow: hidden;
    /*以滑动条样式显示*/
    overflow: scroll;
    /*若不溢出，正常；溢出，以滑动条样式显示*/
    overflow: auto;
}

盒子模型

.box{
    /*内边框：四边均为20px*/
    padding: 20px;
    /*内边框：上 右 下 左*/
    padding: 10px 20px 30px 40px;
    /*内边框：上 左右 下*/
    padding: 10px 20px 10px;
}

外边距合并

• 当两个不浮动的元素外边距相遇时，它们将形成一个外边距。
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
• 解决方法一：

/*设置浮动*/
    float: left;

解决方法二：
/*只设置一边的外边距*/
    padding-top: 20px;

margin

.box{
    /*盒子在父级水平 左右居中 上下margin为0*/
    margin:0 auto;
    /*设置盒子横向连接在一起时,当盒子边框为10px时，不设置，相邻盒子的相邻边会叠加变粗*/
    margin-left:-10px;
}

margin-top 塌陷

/*当两个不浮动的盒子嵌套时，margin-top设置失效*/
解决方法一： 通用方法 设置伪元素类
.clearfix:break-before{
    content: "";
    display: table;
}
解决方法二：
/*设置浮动*/
.box{
    float: left;
}
解决方法三：
/*设置外面盒子的外边框*/
.box{
    border: width border-style color;
}
解决方法四：
/*设置外面盒子溢出隐藏*/
.box{
    overflow: hidden;
}

元素—-纯英文/数字

元素如果是纯英文的话，在一个限制了宽度的盒子里不会自动换行

p{
    /*正常换行*/
   word-wrap: break-word; 
   /*让单词不能单独占用一行*/
   word-break: break-all;
}

块元素

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行、即使设置了宽度，float可以解决

div
p
ul li
ol
dl dt dd
h1~h6

内联 元素

• 不支持宽、高、margin上下、padding上下（padding上下设置之后行间会重叠，支持效果不好，不能用）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距(解决方法：将内联元素的父级设置font-size为0)
• 如果子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

a
span
em 强调词 —斜体
i 专业词汇 —斜体
b 关键词或产品名 —粗体
strong 非常重要的内容 —粗体

内联块 元素

支持全部样式
如果没有设置宽高，宽高由内容决定
盒子并在一行
代码换行，盒子会产生间距
子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
/*浮动让行内元素或块元素自动转化为内联块元素(此时不会有内联块元素盒子之间的间隙问题) */
/*绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素*/

img
input

display 属性

以上三种元素，可以通过display属性来相互转化：

display：none 元素隐藏且不占位置
display：block 元素以块元素显示
display：inline 元素以内联元素显示
display：inline-block 元素以内联块元素显示

浮动 float

• 1、 分为float:left;和float:right;
• 2、 浮动的元素向左或者向右浮动，直到碰到父元素的边界，元素才有序停下来；
• 3、 相邻浮动的块元素，比如说都是左浮动的块元素，会并在一行，超过父级宽度后会换行；
• 4、 浮动让内联元素和块元素自动转化为内联块元素，且浮动解决了内联块元素之间存在间隙的问题；
• 5、 要不都浮动，要不都不浮动；（会乱，除非有文字饶图需求等）
• 浮动的元素后面会被没有浮动的元素占用位置，但是，没有浮动的元素内部文字会自动绕开这个位置，造成文字饶图的效果；
• 6、 父元素如果没有设置尺寸（一般高度不设置），父元素内整体浮动的元素无法撑开父元素，父元素的高度为0，
• 父元素需要清除浮动，这些浮动的元素会自动根据自身的高度撑开父元素；
• 7、 元素浮动，解决了垂直的margin合并问题；
• 元素浮动，上下两行的元素的margin-botttom和margin-top会相加；

清除浮动：
- 1、父级上增加属性overflow:hidden;
- 2、在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）；
- 3、使用成熟的清浮动样式类，clearfix

.clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{clear: both;}
    /*兼容IE浏览器*/
    .clearfix{zoom:1;}

定位 position

• 1、 position: relative;相对定位：相对自身原位置偏移；
• 2、 position: absolute;
• 绝对定位：脱离文档流，相对上一层设置了定位属性的父级元素进行定位，如果上一级元素没有设置定位就继续向上一层上找,都没有的话,就相对于浏览器定位；
• 3、 position: fixed; 固定定位：脱离文档流，漂浮在文档流的上方，比如页面的搜索框这样设计；
• 4、 position: static;默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
• 5、 z-index 设置定位元素的成绩高低

定位元素的偏移

• 定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
• 定位元素特性
• 绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
• 定位元素层级
• 定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

css权重

css权重是指样式的优先级，有两条或多个样式作用于同一个元素时，权重大的会覆盖权重低的相同样式；权重相同时，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

• !important，加在样式属性值后，权重值为 10000
• 内联样式，如：style=””，权重值为1000
• ID选择器，如：#content，权重值为100
• 类，伪类，如：.content、:hover 权重值为10

- 标签选择器，如：div、p 权重值为1

background属性

url(“”) 或者背景色
no-repeat   不复制
repeat-x    横向平铺复制
repeat-y    竖向平铺复制
水平对齐方式 right left center
竖直对齐方式 top bottom center

background：url(“背景图片地址”) no-repeat right center;