CSS基础知识总结

目录

一、基础认识

二、选择器

三、字体和文字样式

四、背景相关属性

五、元素的显示模式

六、css特性

1.继承性

2.层叠性

3.优先性

七、盒子模型

盒子模型的组成部分：

清除元素默认的内外边距：

让盒子水平居中：

外边距合并现象：

八、结构伪类选择器

九、伪元素

十、浮动

小米布局：

网页导航案例 ：

十一、定位

相对定位

绝对定位

让盒子水平居中的案例（子绝父相）

固定定位

元素层级关系：

#博学谷IT学习技术支持#

一、基础认识

css的中文又叫做：层叠样式表。

语法：选择器 + {属性名： 属性值}、

css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。

二、选择器

此外还有：后代选择器、子代选择器、交集选择器、并列（兄弟）选择器、伪类选择器。

三、字体和文字样式

四、背景相关属性

1.背景颜色

属性名：background-color，值可以写 ：例子：red/#fff/rgba(0,0,0,0)

2.背景图片

属性名：background-image

属性值：ul(加入图片的连接)

3.背景平铺

属性名：background-repeat

属性值：

4.背景位置

属性名：

background-position

属性值：水平方向 垂直方向；

可以使用方位名词，例如：right top;表示右上

可以使用坐标系 ：0 0；表示盒子的左上角

5.背景相关属性连写方式

属性值：background

属性值：color image repeat position

五、元素的显示模式

元素一共有三种显示模式：

第一种，行内元素 ：a、span 、b、u、i、s、strong、ins、em、del……

第二种：块级元素  ：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

第三种：行内块元素   ：input、textarea、button、select……

元素模式转换：

属性名 ：display

属性值：

inline :转换成行内元素；

block：转换成块级元素；

inline-block :转换成行内块元素。

六、css特性

1.继承性

子元素继承父元素的相关属性

像文字全部属性子元素都可以继承

但元素如果有浏览器默认的样式，继承就会失效。

例如:   a标签的颜色不可以继承；h系列的标签字体大小不可以继承。

2.层叠性

当给一个标签的属性设置了不同的值时，浏览器工作方式是从上往下进行，所以落在最后的值会生效。

3.优先性

七、盒子模型

盒子模型的组成部分：

内容部分 ：content       设置宽高

内边距：padding           在内容与边框之间的边距

边框：border                  盒子周围

外边距 ：margin             边框以外的边距

设置      内容区域：

width : 100px;

height :100px;

设置边框：

border : solid   10px   #333;

此时盒子的大小会变大，宽  =   width +   左右边框   =120px  ；高   =    height    +     上下边框 =120px;

设置内边距：

padding : 20px 20px 20px 20px;

这四个值分别表示：上   右   下    左      边距

此时盒子的大小也会变化·，具体大小不予计算。

设置外边距：

margin :   10px  10px  10px  10px;

这四个值分别表示：上   右   下    左      边距

注意： CSS3中，给出一个属性 ：

box-sizing   :    border-box

只要给出了宽和高，设置边框和内边距都不会影响盒子的大小。

清除元素默认的内外边距：

比较通用的写法：

*  {

margin ： 0；

padding  ： 0；

}

让盒子水平居中：

margin : 0  auto  ;

外边距合并现象：

对于两个垂直的块级元素，设定上下margin值时，外边距会合并，计算的时候按照外边距大的计算。

外边距塌陷现象：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动 ，解决变法：

八、结构伪类选择器

说明：

对于 ：   nth-child(n)

里面的n可以去n,2n,2n+1,odd,-n+5..................

取4n表示：选取父元素里面第4个、第8个、第12个.......子元素。

取-n+5表示找的子元素是前五个

n+5表示找的子元素是从第五个以后的子元素

九、伪元素

.footer .wrapper li::before {
    content: '';
    display: inline-block;
    margin-right: 19px;
    width: 58px;
    height: 58px;
    background-image: url(../images/sprites.png);
    background-position: 0 0;
    vertical-align: middle;
}

 <div class="box">
        <div class="fl"></div>
        <div class="fr">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

<style>
    * {
        margin: 0;
        padding: 0;
    }
 
    li {
        list-style: none;
    }
 
    .box {
        margin: 0 auto;
        margin-top: 50px;
        width: 1210px;
        height: 450px;
        background-color: pink;
    }
 
    .fl {
        float: left;
        width: 300px;
        height: 450px;
        background-color: green;
    }
 
    .fr {
        float: right;
        width: 910px;
        height: 450px;
    }
 
    .fr li {
        float: left;
        margin-bottom: 10px;
        margin-right: 10px;
        width: 220px;
        height: 220px;
        background-color: blue;
    }
 
    .fr li:nth-child(4n) {
        margin-right: 0;
    }
</style>

网页导航案例 ：

代码：

<div class="nav">
        <ul>
            <li><a href="#">腾讯视频</a></li>
            <li><a href="#">爱奇艺</a></li>
            <li><a href="#">B站</a></li>
            <li><a href="#">淘宝</a></li>
            <li><a href="#">芒果视频</a></li>
            <li><a href="#">天下足球</a></li>
            <li><a href="#">抖音</a></li>
        </ul>
    </div>

<style>
        * {
            margin: 0;
            padding: 0px;
        }
 
        li {
            list-style: none;
        }
 
        a {
            text-decoration: none;
 
        }
 
        .nav {
            margin: 100px auto;
            width: 611px;
            height: 50px;
            background-color: pink;
        }
 
        .nav li {
            float: left;
            height: 50px;
        }
 
        .nav li a {
            display: block;
            padding: 0 20px;
            height: 50px;
            line-height: 50px;
            color: #333;
        }
 
        .nav li a:hover {
            background-color: green;
            color: #fff;
        }
    </style>

十一、定位

属性名：

position

静态定位：  static

相对定位：  relative

绝对定位   ：absolute

固定定位  ：fixed

设定偏移值：

相对定位

position  ： relative;

相对自己原来的位置进行移动

在页面中占位置-不脱标

绝对定位

position  ：  absolute;

默认相对于浏览器可视区域进行定位

在页面中不占有位置-脱标

让盒子水平居中的案例（子绝父相）

1.先让盒子水平移动父亲盒子宽度一半；left：50%

2.然后移动自己盒子的一半：

 <div class="big">
        <div class="small"></div>
    </div>

<style>
        .big {
            position: relative;
            margin: 0 auto;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
 
        .small {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>

垂直居中的做法相类似。

固定定位

position :  fixed;

元素层级关系：