本文详细介绍了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>
<!--
标签内部对回车、换行、空格是不敏感的，会把多个回车、换行、空格理解成一个空格,想要多个空格可以用 一般来说一个空格的大小是一个汉字的一半。
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>
扫一扫
08-21
5695
5695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
