CSS基础概念

最新推荐文章于 2020-12-18 10:26:32 发布

qq_37806415

最新推荐文章于 2020-12-18 10:26:32 发布

阅读量241

点赞数

分类专栏： CSS 文章标签： css3 css

本文链接：https://blog.csdn.net/qq_37806415/article/details/103675555

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS三大特性

继承性

作用: 给父元素设置一些属性, 子元素也可以使用, 这个我们就称之为继承性

注意点:
并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承
在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承
继承性中的特殊性
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的

应用场景:
一般用于设置网页上的一些共性信息, 例如网页的文字颜色, 字体,文字大小等内容

层叠性

CSS全称 Cascading StyleSheet (层叠式样式表), 其中的层叠就是指层叠性

作用: 层叠性就是CSS处理冲突的一种能力

注意点:
层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生层叠性

优先级

作用:当多个选择器选中同一个标签, 并且给同一个标签设置相同的属性时, 如何层叠就由优先级来确定

优先级判断的三种方式
间接选中就是指继承
如果是间接选中, 那么就是谁离目标标签比较近就听谁的

相同选择器(直接选中)
如果都是直接选中, 并且都是同类型的选择器, 那么就是谁写在后面就听谁的

不同选择器(直接选中)
如果都是直接选中, 并且不是相同类型的选择器, 那么就会按照选择器的优先级来层叠
id>类>标签>通配符>继承>浏览器默认

注意点:
通配符选择器也是直接选中

优先级权重
什么是优先级的权重?

作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高

权重的计算规则

首先先计算选择器中有多少个id, id多的选择器优先级最高

如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高

如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高

如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的

注意点:
只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
!important
什么是!important

作用: 用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升为最高

注意点:
!important只能用于直接选中, 不能用于间接选中
通配符选择器选中的标签也是直接选中的
!important只能提升被指定的属性的优先级, 其它的属性的优先级不会被提升
!important必须写在属性值得分号前面
!important前面的感叹号不能省略

Div和Span标签

div
作用: 一般用于配合css完成网页的基本布局

span
作用: 一般用于配合css修改网页中的一些局部信息

div和span有什么区别?

1.div会单独的占领一行,而span不会单独占领一行
2.div是一个容器级的标签, 而span是一个文本级的标签

容器级的标签和文本级的标签的区别?

容器级的标签中可以嵌套其它所有的标签
常见容器级的标签: div h ul ol dl li dt dd …
文本级的标签中只能嵌套文字/图片/超链接
常见文本级的标签:span p buis strong em ins del …

注意点:

不用刻意去记忆哪些标签是文本级的哪些标签是容器级, 在企业开发中一般情况下要嵌套都是嵌套在div中, 或者按照组标签来嵌套(ul>li, ol>li , dl>dt+dd)

CSS元素显示模式
在HTML中HTML将所有的标签分为两类, 分别是容器级和文本级

在CSS中CSS也将所有的标签分为两类, 分别是块级元素和行内元素(其实还有一类, 行内块级)

什么是块级元素, 什么是行内元素?

块级元素会独占一行
行内元素不会独占一行
常见容器级的标签: div h ul ol dl li dt dd …
常见文本级的标签:span p buis stong em ins del …
常见块级元素: p div h ul ol dl li dt dd
常见行内元素: span buis strong em ins del

块级元素和行内元素的区别?

块级元素
独占一行
如果没有设置宽度, 那么默认和父元素一样宽
如果设置了宽高, 那么就按照设置的来显示

行内元素
不会独占一行
如果没有设置宽度, 那么默认和内容一样宽
行内元素是不可以设置宽度和高度的

行内块级元素
不独占一行, 并且可以设置宽高

CSS元素显示模式转换
如何转换CSS元素的显示模式?

设置元素的display属性

display：

block 块级

inline 行内

inline-block 行内块级

盒模型

边框属性
什么边框?

边框就是环绕在标签宽度和高度周围的线条

边框属性的格式

连写(同时设置四条边)

border: 边框的宽度边框的样式边框的颜色;

同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

.box3{
            border: 5px solid red;
            border-right:5px dashed red;
}

内边距属性
边框和内容之间的距离就是内边距

注意点:
这三个属性的取值省略时的规律
上右下左 > 上右下 > 左边的取值和右边的一样
上右下左 > 上右 > 左边的取值和右边的一样下边的取值和上边一样
上右下左 > 上 > 右下左边取值和上边一样
给标签设置内边距之后, 标签占有的宽度和高度会发生变化
给标签设置内边距之后, 内边距也会有背景颜色

外边距属性
标签和标签之间的距离就是外边距

注意点:
外边距的那一部分是没有背景颜色的

外边距合并现象

默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

margin-top问题

如果两个盒子是嵌套关系, 那么设置了里面一个盒子顶部的外边距, 外面一个盒子也会被顶下来

如果外面的盒子不想被一起定下来,那么可以给外面的盒子添加一个边框属性

在企业开发中, 一般情况下如果需要控制嵌套关系盒子之间的距离, 应该首先考虑padding, 其次再考虑margin(margin本质上是用于控制兄弟关系之间的间隙的)

盒模型

CSS盒模型仅仅是一个形象的比喻, HTML中的标签都是盒模型
CSS盒模型指那些可以设置宽度高度/内边距/边框/外边距的标签
这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以HTML标签又叫做盒模型

盒模型宽度和高度

内容的宽度和高度

就是通过width/height属性设置的宽度和高度

元素的宽度和高度

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

高度同理可证

规律

增加了padding/border之后元素的宽高也会发生变化

如果增加了padding/border之后还想保持元素的宽高, 那么就必须减去内容的宽高

元素空间的宽度和高度

宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距

高度同理可证

box-sizing属性
CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值

content-box

元素的宽高 = 边框 + 内边距 + 内容宽高

border-box

元素的宽高 = width/height的宽高

增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

浮动

网页的布局方式
什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的
标准流(文档流/普通流)排版方式

其实浏览器默认的排版方式就是标准流的排版方式
在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
垂直排版, 如果元素是块级元素, 那么就会垂直排版
水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版
浮动流排版方式

浮动流是一种"半脱离标准流"的排版方式
浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐
注意点:

浮动流中没有居中对齐, 也就是没有center这个取值
在浮动流中是不可以使用margin: 0 auto;
特点:

在浮动流中是不区分块级元素/行内元素/行内块级元素的
无论是块级元素/行内元素/行内块级元素都可以水平排版
在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
综上所述, 浮动流中的元素和标准流中的行内块级元素很像
定位流排版方式

浮动元素的脱标
什么是浮动元素的脱标?
脱标: 脱离标准流
当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
浮动元素脱标之后会有什么影响?
如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素

浮动元素排序规则
浮动元素排序规则
相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面

不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动

浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定

浮动元素贴靠现象
什么是浮动元素贴靠现象?
如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示

如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元开始往前贴靠

如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边

浮动元素字围现象
什么是浮动元素字围现象?
浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围

清除浮动

盒子高度问题
在标准流中内容的高度可以撑起盒子的高度

在浮动流中浮动元素内容的高不可以撑起盒子的高

清除浮动方式一

给前面的父盒子添加高度

示例代码:

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        background-color: red;
        /*这里*/
        height: 50px;
    }
    .box2{
        background-color: purple;
    }
    ul{
        list-style: none;
    }
    .ul01 li{
        background-color: blue;
    }
    .ul02 li{
        background-color: green;
    }
    ul li{
        float: left;
    }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加高度前:

添加高度后

注意点:

在企业开发中能不写高度就不写高度, 所以这种方式不常用

清除浮动方式二

利用clear:both;属性清除前面浮动元素对我的影响

示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*这里*/
            clear: both;
            /*margin无效*/
            margin-top: 30px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>

<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加clear: both;前:

添加clear: both;后

注意点:

使用clear:both之后margin属性会失效, 所以不常用

清除浮动方式三

在两个有浮动子元素的盒子之间添加一个额外的块级元素

示例代码:

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
        .h20{
            /*利用额外块级元素实现margin*/
            height: 20px;
            background-color: deepskyblue;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>

<!--这里-->
<div class="wall h20"></div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加额外块级元素前

添加额外块级元素后

注意点

在外墙法中可以通过设置额外标签的高度来实现margin效果
搜狐中大量使用了这个技术, 但是由于需要添加大量无意义的标签, 所以不常用

清除浮动方式四

在前面一个盒子的最后添加一个额外的块级元素

示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
        /*这里*/
        .wall{
            clear: both;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
    <!--这里-->
    <div class="wall"></div>
</div>

<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加额外块级元素前

添加额外块级元素后

注意点:

内墙法会自动撑起盒子的高度, 所以可以直接设置margin属性
和内墙法一样需要添加很多无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦

清除浮动方式五

什么是overflow:hidden?

overflow:hidden的作用是清除溢出盒子边框外的内容
示例代码

.test{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: red;
            overflow: hidden;
}

我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字

添加overflow:hidden前

添加overflow:hidden后

如何利用overflow:hidden;清除浮动

给前面一个盒子添加overflow:hidden属性
示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
            /*这里*/
            overflow: hidden;
            *zoom:1;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        ul li{
            float: left;
        }
</style>
    
<div class="box1">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加overflow:hidden;前

添加overflow:hidden;后

注意点:

由于overflow:hidden可以撑起盒子的高度, 所以可以直接设置margin属性
IE8以前不支持利用overflow:hidden来清除浮动, 所以需要加上一个zoom:1;
实际上zoom:1能够触发IE8之前IE浏览器的hasLayout机制
优点可以不用添加额外的标签又可以撑起父元素的高度, 缺点和定位结合在一起使用时会有冲突
*zoom:1;和_zoom:1的区别

这个是hack写法，用来识别不同版本的IE浏览器
_后面的属性只有IE6能识别
*后面的属性 IE6 IE7能识别

清除浮动方式六

给前面的盒子添加伪元素来清除浮动

示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .clearfix:after {
            /*生成内容作为最后一个元素*/
            content: "";
            /*使生成的元素以块级元素显示,占满剩余空间*/
            display: block;
            /*避免生成内容破坏原有布局的高度*/
            height: 0;
            /*使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互*/
            visibility: hidden;
            /*重点是这一句*/
            clear: both;
        }
        .clearfix {
            /*用于兼容IE, 触发IE hasLayout*/
            *zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加伪元素前

添加伪元素后

注意点:

本质上和内墙法一样, 都是在前面一个盒子的最后添加一个额外的块级元素
添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
CSS中还有一个东西叫做伪类, 伪元素和伪类不是同一个东西

清除浮动方式七

给前面的盒子添加双伪元素来清除浮动

示例代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: purple;
            /*margin有效*/
            margin-top: 20px;
        }
        ul{
            list-style: none;
        }
        .ul01 li{
            background-color: blue;
        }
        .ul02 li{
            background-color: green;
        }
        li{
            float: left;
        }
        
        /*这里*/
        .cf:before,.cf:after {
            content:"";
            display:table;
            /*重点是这一句*/
            clear:both;
        }
        .cf {
            zoom:1;
        }
</style>
<div class="box1 clearfix">
    <ul class="ul01">
        <li>大娃</li>
        <li>二娃</li>
        <li>三娃</li>
    </ul>
</div>
<div class="box2">
    <ul class="ul02">
        <li>李南江</li>
        <li>极客江南</li>
        <li>江哥</li>
    </ul>
</div>

添加双伪元素前

添加双伪元素后

注意点:

添加伪元素后可以撑起盒子的高度, 所以可以直接设置margin属性
先知道有这些方式, 原理需要学习到BFC和hasLayout才能明白
支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；
不支持 BFC的浏览器（IE5-7），通过触发 hasLayout 闭合浮动。

定位

相对定位
什么是相对定位?

对定位就是相对于自己以前在标准流中的位置来移动
格式:
position: relative;

相对定位注意点:

在相对定位中同一个方向上的定位属性只能使用一个
top/bottom 只能用一个
left/right 只能用一个
相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
由于相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素
由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

相对定位应用场景:
用于对元素进行微调
配合后面学习的绝对定位来使用

绝对定位
是相对于body或者某个定位流中的祖先元素来定位
格式:

position: absolute;

绝对定位注意点:
绝对定位的元素是脱离标准流的, 不会占用标准流中的位置
由于绝对定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点
相对于body定位会随着页面的滚动而滚动
一个绝对定位的元素会忽略祖先元素的padding

绝对定位参考点:
默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点
如果一个绝对定位的元素有祖先元素, 并且祖先元素中有一个是定位流中的元素, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点
如果一个绝对定位的元素有祖先元素, 并且祖先元素中有多个是定位流中的元素, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

绝对定位水平居中
1.注意当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中
2.如果想让过一个绝对定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素宽度一半px;

绝对定位应用场景:
用于对元素进行微调
配合后面学习的绝对定位来使用
子绝父相
企业开发中一般相对定位和绝对定位都是一起出现, 很少单独使用

为什么要子绝父相?

相对定位和绝对定位一般都是用来做覆盖效果的, 当看到某个元素覆盖在另外一个元素上时, 第一时间就要想到定位流

固定定位
什么是固定定位?

固定定位和前面学习的背景关联方式很像, 背景关联方式可以让某个图片不随着滚动条的滚动而滚动, 而固定定位可以让某个盒子不随着滚动条的滚动而滚动
格式:

position: fixed;
示例代码

固定定位注意点:

固定定位的元素是脱离标准流的, 不会占用标准流中的位置
由于固定定位的元素是脱离标准流的, 所以绝对定位的元素不区分块级元素/行内元素/行内块级元素
IE6不支持固定定位
固定定位应用场景:

网页对联广告
网页头部通栏(穿透效果)

静态定位
什么是静态定位?

默认情况下标准流中的元素position属性就等于static, 所以静态定位其实就是默认的标准流
静态定位应用场景:

一般用于配合JS清除定位属性
z-index属性
什么是z-index值?

用于指定定位的元素的覆盖关系
定位元素的覆盖关系:

默认情况下定位的元素一定会盖住没有定位的元素
默认情况下写在后面的定位元素会盖住前面的定位元素
默认情况下所有元素的z-index值都是0, 如果设置了元素的z-index值, 那么谁比较大谁就显示在前面
定位元素的从父现象
父元素没有z-index值, 那么子元素谁的z-index大谁盖住谁
父元素z-index值不一样, 那么父元素谁的z-index大谁盖住谁

z-index应用场景
控制界面上的定位元素的覆盖关系, 例如网页中后面的定位元素不能覆盖前面的导航条通栏

作者：极客江南