标签：03 21 元素 haha 2021 内联 div 选择器 CSS
CSS学习总结
一、CSS是什么？
CSS的中文名是层叠样式表，主要用于对HTML页面的布局。
二、CSS的语法
一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
1.id选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
2.class 选择器
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
三、CSS的生效方式
1.外部样式表
就是在已有HTML文件的目录里，加入一个CSS文件，从而引入外部样式表。
提示： 引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。
2.内部样式表
我们也可以将样式放在 HTML 文件中，这称为内部样式表。
3.内联样式
直接把样式规则直接写到要应用的元素中，内联样式是最不灵活的一种方式，完全将内容和样式合在一起，实际应用中非常少见。
四、盒子模型
1.基本概念
盒子模型是对页面进行布局所需要使用的非常重要的一部分。盒子模型本质上就是一个盒子，它包括边距（margin）、边框（border）、填充（padding）、内容（content）、背景（backbround），下面对每一部分进行简单的说明。
margin(外边距)：清除边框外的区域，外边距是透明的；
border(边框)：围绕在内边距和内容外的边框；
padding(内边距)：清除内容周围的区域，内边距是透明的；
content(内容)：盒子的内容，显示文本和图像；
backbround（背景）：背景包含背景颜色（background-color）、背景图（background-image），给整个盒子添加上背景样式。
2.分类
（1）块元素
块元素也称为行元素，在布局中常用的标签如：div p ul li h1-h6 dl dt dd等都是块元素，它在布局中的行为：
1、支持全部样式
2、如果没有设置宽度，默认宽度为父级元素宽度的100%
3、盒子占据一行，即使设置了宽度
（2）内联元素
内联元素也成为内元素，布局中常用的标签如：a span em b strong i等都是内联元素，它们在布局中的行为：
1、支持部分样式(不支持宽、高、margin上下、padding上下)
2、宽高有内容决定
3、盒子并在一行
4、代码(html)换行，盒子之间会产生间距
5、子元素时内联块元素，父元素可以用text-align属性设置子元素水平对齐方式
（3）内联块元素
内联块元素也叫内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这个元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素，它们在布局中的行为：
1、支持全部样式
2、如果没有设置宽高，宽高由内容决定
3、盒子并在一行
4、代码换行，盒子产生间距【解决办法同内联元素一样】
5、子元素是内联元素，父元素可以用text-aliign属性设置子元素的对齐方式
五、组合选择器
1.后代选择器
以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
参见如下代码：
<html>
<head>
<style>
.haha p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha>.</p>
<span>
<p>Paragraph 3 in the div .haha.</p>
</span>
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
2.子选择器
也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接
元素。
参见如下代码：
<html>
<head>
<style>
.haha > p {
background-color: yellow;
}
</style>
</head>
<body>
<div class="haha">
<p>Paragraph 1 in the div .haha.</p>
<p>Paragraph 2 in the div .haha.</p>
<span>
<p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
</span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div .haha.</p>
<p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>
标签：03,21,元素,haha,2021,内联,div,选择器,CSS 来源： https://blog.csdn.net/I_am_Turing/article/details/115053128
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。