Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (CSS选择器 (ID选择器：#ID选择器名称{css样式代码;} (类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
…
CSS
CSS选择器
-
-
ID选择器：#ID选择器名称{css样式代码;}
类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如代码：
.food>li{border:1px solid red;}
包含(后代)选择器，即加入空格,用于选择指定标签元素下的后辈元素。如代码：
.first span{color:red;}
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如：
-
分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如：
h1,span{color:red;}
-
-
CSS布局模型
1、流动模型（Flow）
流动布局模型具有2个比较典型的特征：
第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
-
-
CSS盒模型
元素分类
块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
display:block可将元素显示为块级元素，块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
display:inline 将元素设置为内联元素,内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素有：
<img>、<input>
display:inline-block将元素设置为内联块状元素，内联块状元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒子模型：
月饼盒：页面元素（例：<div>）
月饼（内容）：文字、图片、另一个标签元素
月饼盒到月饼的距离：内填充（padding）
两个月饼盒之间的距离：外边距（margin）
盒子的边框（border）
块级标签都具备盒子模型特征。如：<div><ul><ol><p><h><table>
padding,margin,border 都有四个方向
真实height:内容高度+上下内填充+上下边框线
真实width：内容宽度+左右内填充+左右边框线
边框border：边框是围绕内容和补白的线，可以设置粗细、样式和颜色属性。可简写为 div{ border：2px solid red; }
border-width：2px 或 thin/medium/thick； border-style：dashed/dotted/solid；
border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）
border-color：red/#888 (加#号的十六进制颜色)
可以为元素单独设置某一方向边框，border-top/bottom/left/right 而不是全部 div{ border-bottom:1px solid red; }
宽度width和高度height：盒模型的高度宽度与平时理解不同，一个元素实际宽度（盒子的宽度）=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距。高度类似。 不设置情况下，默认为父容器的100%。
填充padding：元素内容与边框之间的距离。按顺时针设置上、右、下、左 div{ padding:2px 4px 1px 5px; } 或 上下左右填充都相同{ padding:5px; } 或 上下、左右分别相同 { padding:2px 4px; }
-
CSS格式化排版
文字、段落排版
body{
font-family:"Microsoft Yahei";(字体)
font-size:20px;(字号)
color:red;(颜色)
font-weight:bold;(粗体)
font-style:italic;(斜体)
text-decoration:underline;(下划线)
text-decoration:line-through;(删除线)
text-indent:2em;(缩进)
line-height:1.5em;(行间距)
letter-spacing:50px;(中文字间隔、字母间隔)
text-align:center;(块状元素居中)
}