前端技术（2）— CSS（超详解）

最新推荐文章于 2023-05-07 21:49:00 发布
最新推荐文章于 2023-05-07 21:49:00 发布
阅读量556 收藏
点赞数
分类专栏： JAVA 文章标签： css css3 java 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/USTC_SC/article/details/109011309
版权

文章目录

一、初识CSS

1.1 基本概念

CSS：（Cascading Style Sheet ） 层叠级联样式表，用于美化网页

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…

在这里插入图片描述

1.2 发展史

  • CSS 1.0
  • CSS 2.0 DIV块+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
  • CSS 2.1 浮动，定位
  • CSS3.0 圆角，阴影，动画… 浏览器兼容性

1.3 快速入门

在这里插入图片描述

1.4 CSS优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利于SEO，容易被搜索引擎收录

1.5 导入方式

分为三种：内部样式、外部样式、行内样式

优先级：就近原则，以下面为例，距离h1最近就选择谁，本例h1颜色选择blue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>

<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blue">标题</h1>
</body>
</html>

外部样式两种写法，一种是上面的链接式，还有一种导入式，不过不建议

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--导入式-->
    <style>
        @import "css/style.css";
    </style>
</head>
<body>
<h1>RS与CV的奇幻之旅</h1>
</body>
</html>

链接式与导入式的区别：

  1. link属于HTML标签，而@import是CSS提供的;
  2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
  3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
  4. link方式的样式的权重 高于@import的权重.：在link标签引入的 CSS 文件中，使用@import时需注意，如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。

二、选择器

2.1 基本选择器

  1. 标签选择器：会选择到页面上所有这个标签的元素。

    格式：标签{}

  2. 类选择器：选择所有class属性一致的标签，可以跨标签，复用

    格式： .class的名称{}

  3. id选择器：id必须保证全局唯一
    格式：#id名称{}

三种选择器优先级：id选择器>类选择器>标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器：id必须保证全局唯一
        #id名称{}
        不遵循就近原则，固定的
        id选择器>class
        */
        #ai{
            color: #ffb61e;
        }
        .style1{
            color: blueviolet;
        }
        h1{
            color: blue;
        }
    </style>
</head>
<body>

<h1 class="style1" id="ai">人工智能:AI</h1>
<h1 class="style1">推荐系统:RS</h1>
<h1 class="style1">计算机视觉:CV</h1>
<h1>自然语言处理:NLP</h1>
</body>
</html>

在这里插入图片描述

2.2 层次选择器

1.后代选择器：在某个元素后面

/*后代选择器*/
body p{
    background: #ffb61e;
}

2.子选择器：一代

/*子选择器*/
body>p{
    background: blue;
}

3.相邻兄弟选择器（相邻后面一个产生效果）

/*兄弟选择器*/
.active + p{
    background: aqua;
}

4.通用选择器：选择当前选中元素的向下的所有兄弟元素

/* 通用兄弟选择器*/
.active~p{
   background: bisque;
}

【代码演示】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*后代选择器*/
        /*body p{*/
        /*    background: #ffb61e;*/
        /*}*/
    /*!*    子选择器*!*/
    /*    body>p{*/
    /*        background: blue;*/
    /*    }*/
    /*    兄弟选择器*/
    /*    .active + p{*/
    /*        background: aqua;*/
    /*    }*/
    /*    通用兄弟选择器，选择当前选中元素的向下的所有兄弟元素*/
        .active~p{
            background: bisque;
        }

    </style>
</head>
<body>
    <p>p1</p>
    <p class="active">p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>
    <p>p7</p>
</body>
</html>

在这里插入图片描述

2.3 结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: #ffb61e;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: blue;
        }
        /*选中p1:定位到父元素，选择父元素下的相应元素，并且选择到的和当前需要选中是同类元素才生效，顺序选择*/
        p:nth-child(1){
            background: blueviolet;
        }
        /*选中父元素下的相应元素，类型选择*/
        p:nth-of-type(1){
            background: chocolate;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>p4</li>
        <li>p5</li>
        <li>p6</li>
    </ul>
    <p>p7</p>
</body>
</html>

在这里插入图片描述

2.4 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius:10px ;
            background: #ffb61e;
            text-align: center;
            color: lightslategray;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性：
        =绝对等于
        *=包含等于
        ^=以这个开头
        $=以这个结尾
        
        选择存在id属性的元素，class中有first的元素，完全等于link

        */
        a[id]{
            background: blueviolet;
        }
        a[class=link]{
            background: aqua;
        }
        a[class *=first]{
            background: bisque;
        }
        a[href$=png]{
            background: blueviolet;
        }


    </style>
</head>
<body>


<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="link item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="link">3</a>
    <a href="images/123.png" class="link item">4</a>
    <a href="images/123.jpg" class="link item">5</a>
    <a href="abc" class="link item">6</a>
    <a href="/a.pdf" class="link item">7</a>
    <a href="/abc.pdf" class="link item">8</a>
    <a href="abc.doc" class="link item">9</a>
    <a href="abcd.doc" class="link item last">10</a>

</p>


</body>
</html>

在这里插入图片描述

三、美化网页

3.1 为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页，页面漂亮，才能吸引用户
  3. 凸显页面主体
  4. 提高用户体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 20px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">JAVA</span>
</body>
</html>

3.2 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
  font-family:字体
  font-size:字体大小
  font-weight:字体的粗细
  color:颜色
  -->
    <style>
        body{
            font-family:"Arial Black" ,楷体;
            font-size: 20px;
            color: #47a7ff;
        }
        h1{
            font-size: 30px;
        }
        .p1{
            font-weight: bold;
        }
        .p2{
            font: oblique bold 16px "华文楷体";
        }
    </style>
</head>
<body>
<h1>符文之地与魔法</h1>
<p class="p1">在符文之地，魔法就是一切。</p>
<p class="p2">在这里，魔法不只是一种神秘莫测的能量概念。它是实体化的物质，可以被引导、成形、塑造和操作。符文之地的魔法拥有自己的自然法则。源生态魔法随机变化的结果改变了科学法则。</p>
<p>符文之地有数块大陆，不过所有的生命都集中在最大魔法大陆——瓦洛兰。瓦洛兰大陆居于符文之地中心，是符文之地面积最大的大陆。
</p>
<p>被祝福的符文之地上有大量源生态魔法能量，而此地居民可以触及其中的能量。符文之地的中心区域集中了数量巨大的源生态魔法能量，这些地方都是水晶枢纽的理想位置。水晶枢纽可以将源生能量塑形为自身实体化的存在。此外，水晶枢纽还可以成为能量车间，为需要魔法能量的建筑供能。水晶枢纽遍布符文之地，但最大的水晶枢纽都坐落在瓦洛兰大陆
</p>

<p>
    League of Legends
</p>
</body>
</html>

在这里插入图片描述

3.3 文本样式

主要包括：颜色、文本对齐方式、首行缩进、行高、装饰、文本图片水平对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
text-align:排版，居中
text-indent: 2em 首行缩进

height: 50px;
line-height: 50px;
行高和块高一致，就可以上下居中

text-decoration: underline:下划线

vertical-align: middle:水平对齐
-->
    <style>
        h1{
            color: rgba(0,0,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: #ffb61e;
            height: 50px;
            line-height: 50px;
        }
        .p3{
            text-decoration: underline;
        }
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<h1>滕王阁序</h1>
<p class="p1">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
</p>
<p class="p2">时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
</p>
<p class="p3">披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦
</p>



<p>遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
</p>
<p>嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
</p>
<p>勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
</p>

<p>
    <img src="images/twg.jpg" alt="">
    <span>呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：</span>
</p>
</body>
</html>

在这里插入图片描述

3.4 阴影

text-shadow 属性

h1
{
    text-shadow: 2px 2px #ff0000;
}
值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

3.5 超链接伪类

伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

a标签有4种伪类（即对应四种状态）。如下：

  • :link “链接”：超链接点击之前
  • :visited “访问过的”：链接被访问过之后
  • :hover “悬停”：鼠标放到标签上的时候
  • :active “激活”： 鼠标点击标签，但是不松手时。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: #000000;

        }
        /*鼠标悬停颜色*/
        a:hover{
            color: cornflowerblue;
            font-size: 30px;
        }
        /*鼠标按住未释放*/
        a:active{
            color: chocolate;
        }
        /*阴影：*/
        #price{
            text-shadow: blueviolet 10px 10px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img width="200" src="images/围城.png" alt="">
</a>
<p>
    <a href="#">围城</a>
</p>
<p>
    <a href="#">作者:钱钟书</a>
</p>
<p id="price">
    ￥99
</p>

</body>
</html>

在这里插入图片描述

3.6 列表

list-style-type 属性设置

值描述
none无标记。
disc默认。标记是实心圆。
circle标记是空心圆。
square标记是实心方块。
decimal标记是数字。
decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek小写希腊字母(alpha, beta, gamma, 等。)
lower-latin小写拉丁字母(a, b, c, d, e, 等。)
upper-latin大写拉丁字母(A, B, C, D, E, 等。)
hebrew传统的希伯来编号方式
armenian传统的亚美尼亚编号方式
georgian传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic简单的表意数字
hiragana标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

【HTML代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>

</div>

</body>
</html>

【HTML代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>

</div>

</body>
</html>

【CSS代码】

#nav{
    width: 300px;
    /*渐变*/
    background-color: #0093E9;
    background-image: linear-gradient(208deg, #0093E9 0%, #80D0C7 100%);

}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: orange url("images/d.jpg") 270px 10px no-repeat;
    background-size: 15px;
}
/*
list-style:
    none :去掉原点
    circle:空心圆
    decimal :数字
    square:正方形
 */
ul{
    background-color: #0093E9;
    background-image: linear-gradient(208deg, #0093E9 0%, #80D0C7 100%);

}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
    background-image: url("images/10.png");
    background-size:10px ;
    background-repeat: no-repeat;
    background-position: 236px 2px ;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: #47a7ff;
    text-decoration: underline;
}

【效果】

在这里插入图片描述

四、盒子模型

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒子模型。

盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域），如图所示

在这里插入图片描述

4.1 content（内容区域）

盒子的内容，显示文本和图像。CSS中的width和height属性直接作用的区域。

width：指的是内容的宽度，而不是整个盒子真实的宽度。

height：指的是内容的高度，而不是整个盒子真实的高度。

4.2 padding（内填充）

padding即内边距，padding的区域是有背景颜色的。且背景颜色和内容区域的颜色一致。

1.padding有四个方向，所以能够分别描述四个方向的padding。

2.padding描述方法分两种：（1）小属性；（2）综合属性（空格隔开）

注意：padding不支持负值

/* 小属性设置 控制每个方向上的宽度*/
padding-top: 30px;
padding-right: 30px;
padding-left: 30px;
padding-bottom: 30px;

/* 综合属性，用空格隔开 顺时针方向 上右下左*/
padding: 20px 30px 40px 50px

/*只设置了三个值：上 左右 下*/
padding: 20px 30px 40px;

/*只设置两个值：上下  左右*/
padding: 35px 45px;

/*只设置一个值：上下左右*/
padding: 20px;

4.3 border（边框）

border是边框的意思，边框有三要素：粗细、线性、颜色。

值描述
none无边框
dotted点状虚线边框
dashed矩形虚线边框
solid实线边框

三要素的特性：

border: 5px solid blue;

1.如果颜色不写（blue），默认是黑色；

2.如果粗细不写（5px），默认是不显示的。

3.如果只写了线性样式（solid），默认上右下左3px的宽度，默认是黑色。

注意：设置border样式有两种方法：按照三要素、按照方向。

/*1.按照3要素*/
border-width: 5px;
border-style: solid;
border-color: red;

/*3要素进阶*/
border-width: 5px 10px;  /* 上下：5px 左右：10px */
border-style: solid dotted double dashed;   /* 顺时针：上:实线边框 右:点状虚线 下:双线 左:矩状虚线 */
border-color: red green yellow;   /*上:红 左右:绿 下:黄*/

/*2.按照方向去分，这块也可以简写*/
/*上*/
border-top-width: 10px;
border-top-color: red;
border-top-style: solid;
/*右*/
border-right-width: 10px;
border-right-color: red;
border-right-style: solid;
/*下*/
border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;
/*左*/
border-left-width: 10px;
border-left-color: red;
border-left-style: solid;

4.4 margin（外边距）

margin： 外边距，指的是元素与元素之间的距离。

margin特性：

1）margin 的4个方向

2）margin会改变实际大小，背景色不会渲染到margin区域 这个区域会以空白显示，但是也属于盒子的一部分

3)margin是添自身的,如果哪个想要改变自己的位置，就给谁添加margin html的部分标签自带margin padding p body ul

margin垂直方向塌陷问题及解决：

当两个兄弟盒子设置垂直方向的margin时，以较大的margin值为准，这种现象称为“塌陷”。

4.5 阴影

值描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影

向 div 元素添加 box-shadow：

div
{
box-shadow: 10px 10px 5px #888888;
}

【代码演示】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            margin: 30px;
            background: #ffb61e;
            border-radius: 50px 50px 0 0 ;
            box-shadow: 10px 10px 100px yellow;
        }
        img{
            img: 0 auto;
            border-radius: 50px;
            width: 100px;
            height: 100px;
            box-shadow: 10px 10px 150px gold;
        }
    </style>
</head>
<body>
<div></div>
<div1 style="width: 500px; display: block;text-align: center">
    <img src="images/02.jpg" alt="">
</div1>

</body>
</html>

【效果】

在这里插入图片描述

五、浮动

5.1 标准文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

5.2 块级元素与行内元素

块级元素

特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。

2.元素的高度、宽度、行高和顶底边距都是可以设置的。

3.元素的宽度如果不设置的话，默认为父元素的宽度。

常见的块级元素：div、p、h1、h6、ol、ul、dl、table、address、blockquote 、form

行级元素

特点：1.可以和其他元素处于一行，不用必须另起一行。

2.元素的高度、宽度及顶部和底部边距不可设置。

3.元素的宽度就是它包含的文字、图片的宽度，不可改变。

display:inline将块级元素设为行级元素

display:block将行级元素设为块级元素

display:inline-block将元素设置为行级-块级元素；可以设置高度、宽度、行高以及顶和底边距，又可使元素处于一行

【代码演示】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid rebeccapurple;
            display: inline-block;

        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid rebeccapurple;
        }
    </style>

</head>
<body>
<div>div元素</div>
<span>span元素</span>
</body>
</html>

在这里插入图片描述

5.3 父级边框塌陷的问题

clear 定义和用法

clear 属性规定元素的哪一侧不允许其他浮动元素

值描述
left在左侧不允许浮动元素。
right在右侧不允许浮动元素。
both在左右两侧均不允许浮动元素。
none默认值。允许浮动元素出现在两侧。
inherit规定应该从父元素继承 clear 属性的值。

解决方案：

1.增加父级元素高度

简单，元素假设有了固定的高度，就会被限制

#father{
    border: 1px #000000 solid;
    height: 800px;
}

2.在最后一个子元素后加一个空的div，给他添加样式clear，清除两侧浮动；

这种方法也很有效，但是加了一个空的div，造成代码的冗余。

<div class="clear"></div>

.clear{
     clear: both;
     margin: 0;
     padding: 0;
 }

3.父级元素添加overflow：hidden；

overflow是溢出管理的意思，但是有一点不好，在有下拉菜单的时候，下拉菜单会显示不出来

overflow: hidden;

4.父类添加after伪类【推荐】

#father:after{
    content: '';
    display: block;
    clear: left;
}

【代码演示-HTML+CSS】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="father">
    <div class="layer01"><img style="width: 100px" src="images/11.jpg" alt=""> </div>
    <div class="layer02"><img style="width: 150px" src="images/12.jpg" alt=""> </div>
    <div class="layer03"><img style="width: 200px" src="images/13.jpg" alt=""> </div>
    <div class="layer04">
        前不见古人，后不见来者。
        念天地之悠，独怆然而涕下。
    </div>
<!-- 方案2: <div class="clear"></div>-->

</div>
</body>
</html>

div{
    margin: 10px;
    padding: 5px;
}

#father{
    border: 1px #000000 solid;
    /*方案一:height: 800px;*/
    /*方案三:overflow: hidden;*/
}
/*方案四*/
#father:after{
    content: '';
    display: block;
    clear: left;
}

.layer01{

    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{

    border: 1px #0F0 dashed;
    display: inline-block;
    float: left;
}
.layer03{

    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer04{
    border: 1px #666 dashed;
    display: inline-block;
    font-size: 12px;
    line-height: 23px;
}
/*方案二*/
/*.clear{*/
/*     clear: both;*/
/*     margin: 0;*/
/*     padding: 0;*/
/* }*/

【代码效果】

在这里插入图片描述

六、定位

属性描述
position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow设置当元素的内容溢出其区域时发生的事情。
clip设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align设置元素的垂直对齐方式。
z-index设置元素的堆叠顺序。

6.1 相对定位

相对定位元素的定位是相对其正常位置，元素仍保持其未定位前的形状，它原本所占的空间仍保留。

position: relative;
top:-20px;
left: 5px;

【代码演示】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #ffb61e;
            padding: 0;
        }
        #first{
            border: 1px dashed #59ff18;
            background: #0093E9;
            position: relative;
            top:-20px;
            left: 5px;
        }
        #second{
            border: 1px dashed #222bff;
            background: #e98727;

        }
        #third{
            border: 1px dashed #e615ff;
            background: #5ee9c8;
            position: relative;
            bottom:-20px;

        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

在这里插入图片描述

【练习代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #e615ff;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background: #0093E9;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

【效果】

在这里插入图片描述

6.2 绝对定位

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  3. 在父级元素范围内移动

性对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

6.3 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>

   <style>
       body{
           height: 1000px;
       }
       div:nth-of-type(1){/*绝对定位*/
           width: 100px;
           height: 100px;
           background: red;
           position: absolute;
           right: 0;
           bottom: 0;
       }
       div:nth-of-type(2){/*固定定位*/
           width: 100px;
           height: 50px;
           background: #0093E9;
           position: fixed;
           right: 0;
           bottom: 0;
       }
   </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

在这里插入图片描述

6.4 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img width="200" src="images/02.jpg" alt=""></li>
        <li class="tipText"> Taylor Swift</li>
        <li class="tipBg"></li>
        <li>出生：1989-12-13</li>
        <li>地点:美国宾夕法尼亚州</li>
    </ul>
</div>
</body>
</html>

#content{
    width: 198px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid #000000;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none ;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 200px;
    height: 25px;
    top: 150px;
}
.tipText{
    color: white;
    z-index: 2;
}
.tipBg{
    background: #000;
    opacity: 0.3;/*背景透明度!*/
}

【效果】

在这里插入图片描述

USTC_SC
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端之CSS的基本介绍】
qq_44735180的博客
05-04 4309
本章主要介绍了CSS的基本介绍：CSS定义、CSS特点、CSS语言基础、CSS参考教程链接、CSS3的升级。
div定位和css的层叠
代码写到地老天荒
11-09 181
        概述:  在web开发中相信最开始学习的时候,希望能将div放到我们希望放到的地方和窗体的层叠,看似简单的问题 对于我们这些菜鸟来说确实很困难的,下面就介绍窗体的定位和层叠     top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 bottom 定义了定位元素下外边距边界与其包含块下...
前端技术（CSS）
哈哈哈哈哈哈哈哈的博客
09-08 385
1、CSS概念 层叠样式表(英文全称：Cascading Style Sheets) *层叠：多个样式可以作用在同一个html的元素上，同时生效 是一种用来表现HTML或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一个 2、CSS的优.
前端技术——css
m0_68519425的博客
05-07 766
它会向上一层一层的找父级节点是否有定位，如果直到找到body了也没有定位，那么就相对body进行变换，如果父级节点有定位，这个定位可以是绝对定位，相对定位，固定定位，但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，这样这个元素就会相对父级位置产生。如果只用HEML画页面的话--->这个页面就是页面上需要的元素罗列起来，但是页面效果很差，不好看，为了让页面好看，为了修饰页面。橙色div移动上去了。应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，当拉动滚动条的时候，这个元素位置不动。
Web前端技术CSS（一）
zssxcj的博客
10-04 603
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。id选择器使用HTML元组的id属性来选择特定的元素，元素的id在页面中是唯一的，因此的选择器用于选择一个唯一的元素。margin属性用于在任何定义的边框之外，为元素周围创建空间（相当于一个和盒子和另一个盒子之间的距离）类选择器选择有特定的class属性HTML元素，如需选择特定的class元素，要写一个。border属性允许指定元素边框的样式，宽度和颜色（相当于盒子的厚度）
前端开发之CSS原理详解
08-31
"前端开发之CSS原理详解" 一、浏览器的发展与CSS 浏览器的发展与CSS是前端开发的核心组件，浏览器通过HTTP协议连接网页服务器，获取网页并解析CSS文件。CSS的产生是为了解决早期HTML的显示功能限制，哈坤·利提出...
web前端工程-html5详解.docx
最新发布
10-12
Web 前端工程 - HTML5 详解 HTML5 是当前 Web 开发的潮流技术之一，它是一种标记语言， used to create structured documents on the...同时， Node.js、CSS3、JavaScript 等技术也将在 Web 开发中发挥着重要的作用。
从零开始学前端 - 6. CSS浮动float详解 示例代码.rar
05-20
从零开始学前端 - 6. CSS浮动float详解 示例代码 : 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 CSDN 上传的资源会自动涨积分，如有需要留下邮箱
vue2.x+webpack快速搭建前端项目框架详解
08-28
vue2.x+webpack快速搭建前端项目框架详解是当前前端开发领域中非常流行的一种技术栈，本文将详细介绍如何快速搭建基于vue2.x、webpack、vuex、sass+axios、elementUI等技术栈的前端项目框架。 首先，需要安装node...
前端CSS技术全解（一）
Chiclaim
10-13 1980
360度讲解关于CSS相关的技术细节，包括CSS常见属性，CSS的各种选择器、CSS三大特性、元素的显示模式、盒子模型等。
css+div视频教程，可以帮助大家尽快的了解层叠样式表，
09-04
css+div视频教程，可以帮助大家尽快的了解层叠样式表，
sheetclip:将HTML5网络应用中的粘贴内容复制到电子表格中
05-03
SheetClip.js 从HTML5网络应用复制/粘贴到电子表格 微型库，可将JavaScript二维数组转换为与电子表格（例如Microsoft Excel，Google Docs，LibreOffice和OpenOffice）兼容的剪贴板字符串 用法 将数组转换为字符串（以将其复制到Excel） var str = SheetClip.stringify(arr); 上一行将转换一个二维数组： var arr = [ ['A', 'B', 'C'], ['D', 'Some\nlong\ntext', 'F'], ['G', 'H', 'I'] ]; 到一个字符串： A/tB/tC/nD/t"Some/nlong/ntext"/tF/nG/tH/tI/n 从剪贴板粘贴到Excel工作表的结果将呈现为： 一种 乙 C d 一些长文本 F G H 一世 将字
web前端之CSS快速入门学习教程，前端初学者看这一篇就够了
DDDYSz的博客
11-01 716
CSS定义 层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对
Web前端开发——CSS技术大梳理
Aldeo
11-27 2286
css是英文Cascading Style Sheets的缩写。中文翻译为层叠样式，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。之前在做牛腩的时候已经把CSS的基本知识和用法进行了详细的讲解（CSS之浅入浅出，CSS之核心篇）。这里就不再累述。这里主要讲一下CSS与javascript，XML以及AJAX交互。
CSS层叠样式表理解
yyf0409的博客
07-10 555
CSS层叠样式表 css 层叠样式表 属于标记型语音  cssDIV + CSS是WEB设计标准，是一种网页布局方法     样式分类 行内样式（位于HTML标签体内部） 其 内联样式（位于head标签内） 样式代码 外部样式（外部文件+link引入） 选择器 标签选择器（标签名{}  body{  ...}） 类class选择器（.class名{}） id选择器（
CSS定位、层叠效果和浮动_04
qq_46134096的博客
03-12 494
一、CSS定位 1、绝对定位 绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。 使用绝对定位需要将HTML元素的position属性值设置为absolute（绝对的），并使用四种关于方位的属性关键词left、right、top、bottom中的部分内容设置元素位置。一般来说从水平和垂直方向各选一个关键词即可。 绝对定位的声明是相对于已定位的并且...
CSS----章节
weixin_45686974的博客
01-12 193
1、什么是CSS 如何学习 CSS是什么 CSS怎么用（快速入门） CSS 选择器 （重点 + 难点） 美化网页 （文字，阴影，超链接，列表,渐变….） 声明 盒子模型 网页基础~ 浮动 应用~ 定位 网页动画（特效效果） 1.1、什么是CSS Cascading Style Sheet 层叠级联样式表 CSS ： 表现 （美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮...
Web前端开发CSS学习笔记2—五大类选择器
qq_45709187的博客
04-29 1571
CSS选择器分类—五大类：基本、复合、伪元素、伪类、属性选择器： 第一类：基本选择器 1.通用选择器 2.元素选择器 3.类选择器 4.id选择器
前端技术之_CSS详解第五天
weixin_30445169的博客
05-05 87
前端技术之_CSS详解第五天 一、行高和字号 1.1 行高 CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra...
Web前端设计与开发技术-课件-第6章-让网站活起来完整.pptx
11-17
"Web前端设计与开发技术-课件-第6章-让网站活起来完整.pptx，主要讲解了如何通过超链接使网站更具交互性，包括超链接的基础知识、创建链接、管理和理解超链接的重要作用。" 在Web前端设计与开发中，超链接是构建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值