CSS笔记(黑马程序员pink老师前端)css三大特性,盒子模型

最新推荐文章于 2024-09-11 22:31:16 发布

百变珍珑兽

最新推荐文章于 2024-09-11 22:31:16 发布

阅读量57

点赞数

分类专栏： html+css+js 文章标签：前端 css 笔记

本文链接：https://blog.csdn.net/qq_43701213/article/details/132667337

版权

html+css+js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

CSS三大特性

1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。样式冲突,遵循就近原则,哪个里的近,执行哪个.
2.继承性
子标签会继承父标签的某些样式(如:color,text-,font-,line-等与文字相关的样式).
3.优先级
当同一个元素指定多个选择器，就会有优先级的产生.选择器相同,执行层叠性.选择器不同，则根据选择器权重执行.

选择器	选择器权重
继承或者 *	0,0,0,0
元素选择器	0,0,0,1
类选择器, 伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=" "	1,0,0,0
!important	无穷大

注:
1.继承的权重最低,不论父元素自身的选择器权重多高,子元素继承时均按最低权重看.
a标签浏览器默认指定样式:蓝色有下划线.当指定body的样式时,内部的a标签样式不改变,需要单独修改.
2.复合选择器有权重叠加问题,如 ul li {}为(0,0,0,1)+(0,0,0,1)=(0,0,0,2);而 .nav li {}为(0,0,1,0)+(0,0,0,1)=(0,0,1,1). 但是权重虽然会叠加,但不会有进位.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #father {
            color: red !important;
        }
		/* 最终显示颜色为粉色 */
        p {
            color: pink;
        }
    </style>
</head>

<body>
    <div id="father">
        <p>
            aaaaaaaaaaaaaaaaa
        </p>
    </div>
</body>

</html>

盒子模型

盒子模型∶把HTML页面中的布局元素看作是一个矩形的盒子(盛装内容的容器)。包括︰边框、外边距、内边距、和实际内容.
在这里插入图片描述

1.边框(border)

属性	说明	示例
border-width	边框粗细	6px
border-style	边框样式	solid(实线),dotted(点线),dashed(虚线)
border-color	边框颜色	red
border	复合写法	6px solid red(没有顺序)
border-top	只设置上边框	6px solid red(其余位置同理)
border-collapse	合并相邻的边框	collapse

2.内边距(padding)

div {
            height: 60px;
            width: 100px;
            border: 20px pink solid;
            padding-left: 10px;
            padding-top: 20px;
            /* bottom,right同理 */
            /* padding复合写法 */
            /* 
            padding:5px;上下左右均为5px
            padding:5px 10px ;上下5px,左右10px
            padding:5px 10px 20px;上5px,左右10px,下20px
            padding:5px 10px 20px 30px;顺序为上，右，下，左
            */
        }

注意:
(1)border和padding都会把盒子撑大,但是margin不会.

(2)padding不会撑开盒子的情况:块级元素继承了父元素的宽度,自身又没有指定宽度
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            height: 60px;
            width: 120px;
            background-color: pink;
        }

        p {
            background-color: skyblue;
        }

        .p1 {}

        .p2 {
            /* width: 100%;情况相同*/
            width: 120px;
            padding: 10px;
        }

        .p3 {
            padding: 10px;
        }
    </style>

</head>

<body>
    <div>
        <p class="p1">111</p>
    </div>

    <div>
        <p class="p2">111</p>
    </div>

    <div>
        <p class="p3">111</p>
    </div>

</body>

</html>

3.外边距(margin)
网页元素带有默认的内外边距,不同浏览器默认的也不一致,因此布局前,应先清除内外边距.
注:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下的.

*{ margin:0;padding=0;}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            background-color: pink;
            margin-top: 10px;
            /* bottom,right,left同理 */
            /* margin:5px;上下左右均为5px  */

            /* 行内元素,行内块元素水平居中 */
            text-align: center;

            /* margin典型应用:块级盒子水平居中 */
            /* 必备条件:(1)盒子指定了宽度;(2)左右的外边距设置为auto */
            width: 600px;
            margin: 60px auto;
        }

        .div2 {
            /* 相邻块元素,垂直外边距合并. 上方的下外边距为100px,下方的上外边距为
            50px,此时div1与div2之间的距离取60px和50px中的最大值,为60px.*/
            margin-top: 50px;
            background-color: pink;
        }

        .div3 {
            /* 嵌套块元素垂直外边距塌陷. 父元素有上边距,子元素有上边距,此时父元素
            会塌陷较大的外边距,此时父元素的为20px,子元素的为40px,此时div2与div3之
            间的距离为40px */
            height: 50px;
            margin-top: 20px;
            background-color: pink;
        }

        .div3son {
            margin-top: 40px;
            background-color: skyblue;
        }

        .div4 {
            /* 解决了塌陷问题,div3与div4之间的距离为20px */
            /* 解决嵌套块元素垂直外边距塌陷方法:*/
            /*1.为父元素定义上边框 */
            /* border: 1px solid transparent; */
            /*2.为父元素定义上内边距 */
            /* padding: 1px; */
            /* 3.为父元素添加overflow: hidden; */
            overflow: hidden;
            height: 50px;
            margin-top: 20px;
            background-color: pink;
        }

        .div4son {
            margin-top: 40px;
            background-color: skyblue;
        }

        p {
            /* 行内元素,行内块元素水平居中,修改margin无效,应设置父元素的text-align  */
            background-color: skyblue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="div1">
        <p>contant1</p>

    </div>
    <div class="div2">
        contant2
    </div>

    <div class="div3">
        <div class="div3son">
            contant3
        </div>
    </div>

    <div class="div4">
        <div class="div4son">
            contant3
        </div>
    </div>
</body>

</html>