前端笔记—第4篇CSS基础知识2

1、css的三大特性之继承性

    1.什么是继承性：给我们的父元素设置一些属性，子元素也可以使用
    2.并不是所有的标签都有继承性，只有以color\font-\text-\line开头的元素才能使用继承性
    3.在css的继承中不仅仅只是儿子可以集成，后代都是可以集成父级的特性的
    4.继承性中的特殊性：
        4.1：a标签的文字颜色 和下划线是不能继承的
        4.2：h标签的文字大小是不能继承的，要想修改标题的大小，你只能单独给它设置
    5.应用场景：企业开发中，一般用于设置网页上的共性，例如网页上的文字颜色，字体，文字大小等
复制代码

2、css的三大特性之层叠性

    1.什么是层叠性:就是某一个属性把另一个属性给覆盖掉了；也就是说层叠性就是css处理冲突的一种能力
    2.层叠性只有在多个选择器选中“同一个标签”，让后又设置了相同的属性，这是层叠性就会起作用
    3.css的全称就是：Cascading Style Sheet (层叠样式表)
复制代码

3.css的三大特性之优先级

    1.什么是优先级：但多个选择器选中同一个标签时，并且给同一个标签设置相同属性时，如何层叠就是通过优先级来确定的
    2.优先级判断的三种方式
        2.1：是否是直接选中(间接选中就是指继承)，如果是我们的间接选中，那个目标标签比较近就听谁的(如ul 和 li之间的关系)；
        2.2：是否是相同的选择器  如果都是直接选中，并且都是同类型的选择器，那么谁写在后面就听谁的(如两个p同时存在)
        2.3：不同选择器:如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠，id>类>标签>通配符>继承>浏览器默认(优先级从高到低)
复制代码

4、css优先级中的!important

    1.important作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以被指定的属性的优先级提升为最高
    2.格式
        p{
            width:200px;
            height:200px;
            background:red !important;
        }
复制代码

5、优先级中的权重问题

    1.多个选择器混合在一起使用时，我们可以通过计算权重判断谁的优先级最高
    2.权重计算规则：首先计算选择器中有多少个id，id多的选择器优先级最高，如果id的个数一样，再看类名多的，类名多个优先级高，如果类名的个数一样，再看标签名称的个数，标签个数多的优先级高。如果id个数一样，类名个数一样，标签名称个数一样，这是就不会向下计算了，这是就看谁写在后面就听谁的
复制代码

6、div和span标签

    1.div作用:一般用于配合css完成网页的基本布局
    2.span作用:一般用于配合css修改网页中的信息
    3.div与span的区别：
        3.1：div会单独占领一行，而span不会单独占领一行的
        3.2：div是一个容器级别的标签，span是一个文本级别的标签
    4.容器级别的标签和文本级别的标签的区别：
        4.1：容器级别的标签其中可以嵌套其他标签（div h ul ol dl li ...）
        4.2：文本级别的标签一般只能嵌套文字，超链接 图片（p span buis strong em ins del  ）
        4.3：那些标签是文本级的那些标签的容器级的不需要特意去记忆，在企业开发中，要嵌套都是嵌套到div或者按照组别中去的
复制代码

7、元素的显示模式

    1.在HTML中间所有的标签分为两类，分别是容器级和文本级
    2.在css中css也将所有的标签分为两类，分别是块级元素和行内元素
    3.块级元素会独占一行，行内元素不会独占一行的
    4.块级元素：所有的容器标签都是块级元素+p
    5.行内元素：所有的行内元素都是行内元素。除了p标签之外
    6.块级元素和行内元素的区别：
        6.1:块级元素会独占一行
        6.2:如果没有设置宽度，默认和父元素一样宽
        6.3:如果设置了宽高就会按照设置的来显示
        6.4:行内元素不会独占一行
        6.5:行内元素不能设置宽度和高度的,如果要设置宽度和高度，需要将行内元素设置为块级元素或者行内块级元素
        6.6:2.3行内块级元素：为了能够让块级元素既不独占一行，行内元素可以独占一行又可以设置宽度和高度,通过设置display: inline-block;
复制代码

8、css显示模式的转换

    1.如何转换css元素的显示模式：inline(块级)  block(行内)  inline-block(行内块级)
    2.可以通过display属性设置是行内元素还是块级元素 还是行内块级元素
复制代码

9、背景的平铺

    1.如何控制背景的平铺：在css中有一个background-repeat属性，就是专门用来控制背景图片的平铺方式的，取值为：repeat（默认） repeat-x(只在水平方向平铺) repeat-y（在垂直方向平铺） no-repeat(在水平方向和垂直方向都不需要平铺)
    2.应用场景：可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度，起到一点性能优化的效果
复制代码

10、背景图片的定位属性

    1.背景定位:background-position:水平方向，垂直方向;就是专门用来控制背景图片位置的；取值:具体的方位名词 或像素
    2实例：
    //style部分
    <style>
        height:500px;
        widht:500px;
        background-image:url('图片对应的地址');
        background-position: -100px 0px;
    </style>
    
    //html部分
    <div class="box1"></div>
    3.注意点：
        3.1：同一个标签可以设置背景颜色和背景图片，如果颜色和图片同时存在，图片会覆盖颜色
        3.2：一定要写单位；具体的像素可以接受负值
        3.3：背景的位置是相对于背景图片而言的；对背景颜色不会起作用的
        3.4：实现背景图片的内容居中的格式：background-position:center top;（固定格式）这样写的好处是重要的信息居中显示，不中要的信息可有可无。
复制代码

11、背景关联和缩写

    1.背景属性缩写的格式：background:背景颜色 背景图片 平铺方式 关联方式 定位方式;
    2.例如：background: red  url(images/QQ.png) no-repeat center bottom;
    3.背景的关联方式：background-attachment:;取值为：scroll(默认) fixed(表示背景不会随着文字滚动)
    4.背景图片和插入图片的区别：
        4.1：背景图片仅仅只是一个装饰，不会占用位置,插入图片会占用位置
        4.2：背景图片有定位属性：所以很方便的控制图片的位置
        4.3：插入图片没有定位属性，所以控制图片的位置很不方便
        4.4：插入图片的语义要比背景图片的强，所以在企业开发中如果你的图片想要被搜索引擎收录，推荐使用插入图片
复制代码

12、CSS精灵图

    1.精灵图说白了就是但背景图片比盒子大时，默认情况下是显示背景图片的左上角，但是通过背景定位属性就可以定位背景图片中的任意一部分内容，所以这样的图片被叫做精灵图，精灵图也称作：css sprite(也叫雪碧图)
    2.在精灵图的制作过程中，测量出的整数，必须以负数对待
    3.css sprite可以起到性能优化的作用，可以较少http的请求
复制代码

13、边框属性

    1.什么是边框：边框就是环绕在标签宽度和高度周围的线条
    2.连写（同时设置四条边的边框）：border:边框的宽度 边框的样式 边框的颜色
    3.border-top:边框的宽度 边框的样式 边框的颜色
    4.border-right:边框的宽度 边框的样式 边框的颜色
    5.border-bottom:边框的宽度 边框的样式 边框的颜色
    6.border-left:边框的宽度 边框的样式 边框的颜色
    7.另一种连写格式：
        7.1：border-width:上 右 下 左
        7.2：border-style:上 右 下 左
        7.3：border-color:上 右 下 左
复制代码

14、内边距属性

    1.边框与内容之间的距离
    2.非连写格式
        2.1：padding-top:2px;
        2.2：padding-right:2px;
        2.3：padding-bottom:2px;
        2.4：padding-left:2px;
        2.5：连写格式：padding:2px;
复制代码

15、外边距属性

    1.标签和标签之间的距离称之为外边距
    2.连写格式：margin:2px;
    3.非连写格式
        3.1：margin-top: 2px;
        3.1：margin-right: 2px;
        3.1：margin-bottom: 2px;
        3.1：margin-left: 2px;
    4.注意点：下面的这种写法在不设置外边距的情况下，中间也是会有一点距离的，这不是外边距造成的而是他们中间通过换行造成了空格的现象
    <span>我是一个span</span>
    <span>我是一个span</span>
复制代码

16、外边距合并现象

    1.在水平方向上margin是不会出现合并现象的，不会出现叠加现象。也就是说他们会正常的显示
    2.在默认垂直方向上才会出现margin的合并现象，谁的外边距大就听谁的，用F12谷歌的开发者工具就可以查看
    3.注意点：盒子的背景颜色是不会填充外边距的，但是它会填充内边距的。
复制代码

17、盒子模型

    1.什么是CSS盒子模型：仅仅只是一种比喻，html中所有标签都是盒子。
    2.结论：所有的标签都可以设置宽度，高度 外边框 内边框
    3.宽度==指可以存放内容的区域
    4.内边距==填充物
    5.边框==手机盒子自己
    6.外边距==盒子与盒子之间的距离
    7.内容的宽度和高度:就是通过标签的width和height设置的宽度和高度
    8.元素的宽度和高度:宽度=左边框+左内边距+width+右内边距+右边框;高度：同理可证
    9.元素空间的宽度和高度:宽度=左边的外边距+左边框+左内边距+width+右内边距+右边框+右边的外边距;高度：同理可证
    9.注意点：
        9.1：增加了padding后元素的宽度和高度也会发生变化
        9.2：如果增加了padding之后还想保持元素的宽高，那么就必须减小内容的宽度，或者通过：box-sizing:border-box;控制
    10.css3中新增了一个box-sizing属性，这属性可以保证我们给盒子新增padding或border属性后盒子的高度和宽度不会发生变化
    11.取值：content-box元素的宽高等于：边框+内边距+内容的宽高；border-box元素空间的宽高=width属性
    12.注意点：
        12.1：如果两个盒子是嵌套关系，那么设置里面盒子的顶部外边距，外面一个盒子也会被顶下去,会被顶下去是因为此时设置了外边距的盒子会把body当做参考系
        12.2：为了防止这个问题：给外面的盒子添加一个边框属性
        12.3：在企业开发中一般需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次在考虑margin，因为margin本质是用来控制兄弟关系之间的间隙，设置了padding属性完全可以不设置外面盒子的边框
        12.4:在嵌套关系的盒子中我们可以通过设置margin:0 auto;的方式让里面的盒子在外面的盒子中水平居中，如果要垂直居中必须通过像素控制
复制代码

18、盒子居中和内容居中的区别

    1.text-align:center;设置盒子中存储的内容水平居中
    2.margin：0 auto；让盒子自己水平居中
复制代码

19、清除默认边距

    1.为什么要清除默认边距(外边距和内边距)：在企业开发中为了很好的控制盒子的宽度和计算盒子的宽高等等，所有企业开发中，编写代码之前做的第一件是就是清空默认的边距
    2.格式
    *{
        margin:0;
        padding:0;//注意点：通配符选择器会匹配页面中多有的元素，性能是比较低的
    }
    3.我们可以直接使用别人已经写好的清除默认边距的代码就可以了。https://yuilibrary.com/yui/docs/cssreset/
复制代码

20、行高和字号

    1.什么是行高：在css中所有的行都有自己的行高
    2.文字在行高中默认是垂直居中的
    3.在开发中我们经常将行高和盒子的高度设置为一样就能保证文字在盒子中垂直居中，简而言之：要想让一行文字在盒子中垂直居中，只需设置这行文字的行高等于盒子的高度即可
    4.在开发中如果一个盒子中有多行文字，那么我们就不能通过设置行高等于盒子的高度来实现文字垂直居中，只能设置padding来让文字居中
复制代码

21、网页的布局

    1.什么是网页的布局：网页的布局就是指浏览器如何对网页中的元素进行排版的
    2.常见的排版方式：
        2.1：标准流(文档流/普通流)排版方式
            1.其实就是浏览器的默认排版方式
            2.在css中将元素分为三类，分别是块级 行内 行内块级
            3.在标准流中有水平排版和垂直排版
        2.2：浮动流排版方式
            1.浮动流是一种“半脱离标准流”的排版方式
            2.浮动流只有一种排版方式就是水平排版，它只能设置某个元素左对齐和右对齐
            3.浮动流没有居中对齐，也就是说在浮动流中是没有margin 0 auto；的,是因为浮动流中元素只有左对齐或者右对齐
            4.在浮动流中是不区分块级和行内元素的，无论是行内还是块级都能水平排版
            5.在浮动流中无论是行内还是块级都能设置宽高
            6.综上所述：浮动流中的元素和标准流中的行内块级元素很像
        2.3：定位流排版方式
复制代码

22、浮动元素的脱标

    1.脱标指:脱离标准模式
    2.当某一个元素浮动之后，那么这个元素看上去就像被从标准流里面删除了一样，这个就是浮动元素的脱标
    3.浮动元素脱标的影响：如果前面一个元素浮动，后面一个元素没有浮动，后面一个元素就会自动顶上去。前面一个元素会浮动在后面一个元素上面
    4.浮动元素的排序规则：
        4.1：相同方向的浮动元素，先浮动的元素会显示在前面，后浮动的元素会显示在后面
        4.2：不同方向的浮动元素，左浮动会找到左浮动，右浮动会找有浮动
        4.3：浮动元素浮动后的位置，由浮动元素之前在标准流中的位置来确定
    5.浮动元素的贴靠现象：同一方向后浮动的元素会去找上一个元素贴靠，父元素宽度不够时，一次往前找
    6.浮动元素的字围现象：可以用来做图文混排的效果，通过设置图片的浮动属性
复制代码

23、标准流和浮动流的使用

    1.在开发中垂直方向使用标准流 水平方向使用浮动流
    2.拿到一个复杂项目的编写方式：从上而下，从外向内，水平方向可先划分为一左一右，在对左边或者右边一步一步进行布局
复制代码

24、浮动元素的高度问题

    1.在标准流当中，内容的高度可以撑起父元素盒子的高度
    2.一个浮动的元素是不能撑起父元素的高度的,因为元素一浮动相当于飘在了上面，就跟下面的元素感觉没有关系了
    3.浮动的元素是不占用标准流的位置的
复制代码

25、清除浮动的5中方式

    //style部分
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
        }  
        .box1 p{
            width:100px;
            background:blue;
        }
        .box2 p{
            width:100px;
            baclground:yellow;
        }
        p{
            float:left;
        }
    </style>
    //HTML部分
    <div class="box1">
        <p>我是文字1</p>
        <p>我是文字1</p>
        <p>我是文字1</p>
    </div>
    <div class="box2">
        <p>我是文字2</p>
        <p>我是文字2</p>
        <p>我是文字2</p>
    </div>
    1.方式一：给前面一个父元素设置高度,但是我们在开发中能不写高度就不写高度，所以这种方法很少用
    2.方式二：给第二个盒子添加clear属性
        2.1：clear属性是指定在段落的左侧或右侧不允许出现浮动的元素
        2.2：取值：none:默认的取值，按照浮动元素的排序规则来排序（左浮动找左浮动，右浮动找右浮动）
        2.3：left：告诉浏览器不要找前面的左浮动元素
        2.4：right：告诉浏览器不要找前面的右浮动元素
        2.5：both：不要找前面的左浮动和有浮动元素（开发中用的最多）
        2.6注意点：
            1.当我们给某个元素添加clear属性后，这个元素的margin属性就会失效，
            2.为什么margin-top属性会失效：如果是父子元素，给子元素设置margin-top，而父元素没有border，那么父元素会跟着被顶下来。这时的父元素他认为是body了，因此才会失效，该body添加边框，margin-top就会起作用
    3.方式三：隔墙法
        3.1：内墙法：在第一个盒子的所有子元素最后面添加一个额外的块级元素，一般添加div,给这个额外的块级元素添加一个clear:both;属性
        3.2：注意点：内墙法可以使用margin-bottom和margin-top属性
        3.3：外墙法：就是在两个盒子之间添加一个额外的块级元素，给这个额外的块级元素添加一个clear:both;属性
        3.4：外墙法它可以让第二个盒子使用margin-top属性，但是不能给第一个盒子设置margin-bottom属性，在开发中我们可以不设置margin-top和margin-bottom属性
        3.5：外墙法和内墙法的区别：内墙法可以撑起第一个盒子的高度，外墙法是不能撑起第一个盒子的高度的
        3.6：无论是外墙法还是内墙法，都需要添加块级元素，这种办法开发中不怎么常用，因为开发总遵循结构和内容相分离
    4.方式四：通过给第一个盒子设置伪元素的方式，这种方法也是目前开发中用的比较多的
        格式：.box1::after{
                content:'';//添加的子元素的内容为空
                display:block;//设置添加的元素为块级元素
                height:0;//设置添加的元素高度为0
                visibility:hidden;//设置添加的子元素不可见
                clear：both;//这一行一定要写
               }
        注意点：这种写法有一个注意点就是IE6以及版本过低的浏览器的兼容问题，解决办法：.box1{ *zoom: 1;}
    5.方式五：给第一个盒子设置overflow:hidden;
    6.overflow:hiddel的作用：
        6.1：可以将超出标签的内容裁剪掉
        6.2：可以清除浮动
        6.3：两个盒子嵌套时，如果外边的盒子没有边框，给里面的盒子设置了margin-top属性，大盒子也会被顶下去，但是又不想设置大盒子的边框，以前的做法是给外面的一个盒子设置一个边框，现在的做法是给大盒子设置overflow: hidden;就会消除大盒子不被顶下去的效果
    
复制代码

26、伪元素选择器

    1.什么是伪元素选择器：就是给指定标签的内容前面或者后面添加一个子元素，这是css3新增的一个属性
    2.格式
    //style
        *{
            margin:0;
            padding:0;
        }
        div::before{//after也是可以的
            content:'我是段落'//添加内容的属性
            width:100px;//设置伪元素的样式宽度和高度
            height：100px;
            display:block;//显示模式
            visibility:hidde;//隐藏这个伪元素的属性
        }
        
    //html
    <div class="box">
        我是文字
    </div>
复制代码

转载于:https://juejin.im/post/5c810ae7f265da2dd218f79a