css学习笔记

HTML与CSS基础及布局技巧详解

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #html5

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了HTML的基础语法，包括DOCTYPE、html、head、meta、title等元素的作用。同时，深入讲解了CSS的样式规则，如字符集、浮动、清除浮动、盒模型、内边距、外边距以及布局技巧。通过示例代码，阐述了如何实现元素的并排显示和文字环绕效果，以及如何处理浮动元素导致的父元素高度塌陷问题。此外，还提及了CSS的继承性、层叠性和优先级等核心概念。

<!DOCTYPE html>
<!-- DOCTYPE叫做文档声明，用于标记我们网页使用的是哪一个版本，这样浏览器就会按照对应的版本进行html标签解析 -->
<html lang="zh_CN">
<!-- html：网页的根标签 -->
<head>
    <meta charset="UTF-8">
    <!-- meta：元标签 charset: 字符集 -->
    <title>网站首页</title>
    <!-- title：控制浏览器选项卡上面的文字信息 -->
</head>
<style>
    .container{
        width: 800px;
        background-color: red;
        margin: 0 auto;
    }
    .box1 {
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        float: left;
    }
    .box2 {
        width: 100px;
        height: 100px;
        border: 1px solid gray;
        float: left;
    }
    .clearfix:after{
        content: '';
        clear: both;
        display: block;
    }

</style>
<body>
<!--
 标签内部对回车、换行、空格是不敏感的，会把多个回车、换行、空格理解成一个空格,想要多个空格可以用&nbsp;一般来说一个空格的大小是一个汉字的一半。

 p：默认是左对齐，可以用align属性设置对齐方式，align：left、center、right

 图片的分类：
 1：位图：由像素点组成的图片，在放大的情况下会出现马赛克，一般位图是进行有损压缩的(失真)，常见的位图格式有jpg、jpeg、png、gif等
 2: 矢量图，显示的颜色没有位图丰富，但矢量图不会失真

 分辨率 = 水平像素点 * 垂直像素点，如1366 * 768

 img标签属性：
 1：src：图片地址。
 2：alt：在图片丢失,或者无法加载的时候，给用户一个提示信息。
 3：title：鼠标移动到图片上面时的提示信息。
 4：width：宽度。
 5：height：高度。
 注意：宽高在只写一个的情况下，另一个会等比缩放，如图片原宽高为400*800,我只设置了width=200px,则显示的宽高为：200 * 400

 ul：无序列表
 ol：有序列表
 dl：定义列表

 div：是一个语义标签，将具有逻辑关联的一段信息放置在一起。如果没有设置宽度，则以浏览器的宽度作为宽度。高度则是内容的高度。

 css三大特性：
 1：继承性，后代元素会从上级继承一些css的属性。
 2：层叠性，是将多个样式叠加在一起，当出现冲突时，后面的会将前面的覆盖掉
 3：优先级，就是在css出现冲突的时候，会根据优先级选择合适的样式属性。


 如果在设计稿上面出现了很特殊的字体，而这些字体在电脑上面可能没有，那么我们可以把这类字体切成图片，以图片的方式显示出来。
 为了更好的保证字体可用，一般会设置多个字体，如：fant-family:'微软雅黑','宋体',serif;

 text-shadow用于设置文字阴影，如：
 p {
    text-shadow: 1px 1px 3px red;//水平长度、垂直长度、模糊长度、颜色值
 }

 letter-spacing：用于控制字符之间的间距。如：
 p {
    letter-spacing: 2px;
 }

 word-spacing：用于控制单词之间的间距。

 text-indent：段落缩进。

 line-height：设置文字行高。其实就是给每一行文字设置一个高度，就相当于在文字的外面加了一个div，然后给div设置了高度。
 注意：如果是单行文字，文字在自己的行高里面是垂直居中的。


 css里面的优先级是严格的计算公式：
 1：id选择器权重值：100。
 2：class选择器权重值：10。
 3：标签选择器权重值：1。

根据选择器的个数和权重进行计算，然后进行比较，以权重高的样式为准。

如：
<div class='div1'>hello</div>

.div p{
    color:red;//权重值 = 10*1 + 1 * 1
}

div p{
    color:yellow;//权重值 = 1 * 1 + 1 * 1
}

因此最终的样式为.div p。

padding：内边距，就是盒子内容与边框之间的距离。
margin：外间距，就是盒子与盒子之间的距离。

1：网页里面的标签都是盒子。
2：默认情况下，如果给盒子设置了padding，盒子的大小会外扩，会基于原先设置的width、height进行外扩。因此，我们可以把盒子的width、height理解成
   内容的宽高。


行内元素：
1：不会独占一行，不能设置宽高。
2：可以设置padding
3：可以设置margin-left、margin-right，不能设置margin-top、margin-bottom

行内块元素问题：如果给box1和box2设置了行内块元素，则他们会在一行显示，但中间会有一个间距。除非box1和box2的div不要换行，这样就没有间距了。
<div class="box1">hello</div>
<div class="box2">world</div>

浮动：可以使得元素兼具块级元素和行内元素的特性(并排、设置宽高)。
1：浮动的元素会脱离标准文档流,相当于不占据原先的位置，则后面的元素会顶替之前盒子的位置，会出现一个压盖的问题(浮动的盒子在该盒子之上)。
2：给一个没有设置宽高的块级元素设置浮动之后，宽高就是块级元素包含内容的宽高。
3：行内元素设置浮动之后就可以像块级元素一样设置宽高了。
4：如果一个大盒子没有设置高度，里面的小盒子设置了浮动，则大盒子的高度会塌陷，也就是说浮动的元素无法撑起父元素的高度。而且出现这种问题后，
   大盒子后面标准流的元素就会向上浮动，出现压盖现象。解决方法是给大盒子后面的元素设置清除浮动，clear:both。


清除浮动的方法：
原html：
<div class="container">
    <div class="box1">hello</div>
    <div class="box2">world</div>
</div>
<div>啦啦</div>
原css：
.container{
    width: 800px;
    background-color: red;
    margin: 0 auto;
}
.box1 {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    float: left;
}
.box2 {
    width: 100px;
    height: 100px;
    border: 1px solid gray;
    float: left;
}

1：给大盒子后面的元素增加clear，<div style="clear: both;">啦啦</div>
2：在大盒子里增加一个div元素，<div style="clear: both;"></div>
3：给大盒子增加overflow属性，<div class="container" style="overflow: hidden;">
4：使用伪类清除浮动，给大盒子增加class，clearfix，然后添加伪类class：
.clearfix:after{
    content: '';
    clear: both;
    display: block;
}


字围效果：给图片设置浮动，文字不要设置浮动。


box-sizing：设置盒子的模式。它有两个值：content-box、border-box。
1：content-box，内容盒子，它是默认值，会外扩。这个盒子实际大小=margin-left+margin-right+border-left+border-right+padding-left+padding-right+内容。
2：border-box,这个属性值会自动内减，设置的height、width就是盒子实际的大小。


相对定位不会脱离标准文档流，绝对定位会脱离标准文档流。


sass是基于ruby语言开发的,因此安装sass前需要先安装ruby。
 -->



<div class="container clearfix">
    <div class="box1">hello</div>
    <div class="box2">world</div>
</div>
<div>啦啦</div>

</body>
</html>