CSS
CSS 用于指示 HTML 在浏览器中的显示样式。
CSS 组成
CSS 由选择符（选择器）与声明组成，声明由属性和值组成。
p {
color: blue;
}注释
/* ... */CSS 编写位置
<p style="color:red; font-size:12px">这里文字是红色。</p><style type="text/css">
span {
color: red;
}
</style><link href="style.css" rel="stylesheet" type="text/css" />一般写在里
标签选择器
标签指 HTML 中的标签。
类选择器
指定 HTML 标签的class
<span class:"stress">黑色</span>为该class编写 CSS 样式
.stress {
color: red;
}ID 选择器
指定 HTML 标签的id
<span id:"stress">黑色</span>为该id编写 CSS 样式
#stress {
color: red;
}ID 选择器只能在 HTML 文档中使用一次，class可多次。
可用 类选择器为标签指定多个样式，id不可以。
子选择器
.food > li {
border: 1px solid red;
}指定标签的第一代子元素
包含选择器
通用
* {
color: red;
}伪类
a:hover {
color: red;
}分组
h1,
span {
color: red;
}文字
font-famliy font-size color font-weight font-style:italic
text-decoration: underline line-through
text-indent:2em
text-align: center left right
line-weight :2em
letter-spacing word-spacing
盒模型
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
<div>
、
<p>、</p>
<h1>
...
<h6>
、
<ol>
、
<ul>
、
<dl>
、
<table>
、
<address>
、
<blockquote>
、
<form></form>
</blockquote>
</address>
</table>
</dl>
</ul>
</ol>
</h6>
</h1>
</div>常用的内联元素有：
<a
>、<span
>、<br />、<i
>、<em
>、<strong
>、<label
>、<q
>、<var
>、<cite
>、<code
></code></cite></var></q></label></strong></em></i></span
></a>常用的内联块状元素有：
<img />、<input />块状元素都将从新的一行开始，其后的元素也将另起一行。 元素宽度、高度、行高以及顶部、底部边距都可设置。宽度默认是父元素的100%。
内联元素和其它元素在同一行。 元素宽度、高度、行高以及顶部、底部边距都可设置。宽度就是包含的文字或者图片的宽度。
内联块状元素和其它元素在同一行。 元素高度、宽度、行高及顶部、底部边距都可设置。
display: none;
块状元素和内联元素都可以设置背景色 background-color。
border
border-bottom border-top border-left border-right border-radius padding margin
布局模型
Flow Float Layer
div{ width:200px; height:200px; border:2px red solid; float:left; }
<div id="div1"></div>
<div id="div2"></div>流动模型 浮动模型 层模型
- 绝对布局
- 相对布局
- 固定布局
display: flex; 横轴对齐 justify-content: flex-start | flex-end | center | space-between | space-around; 竖轴对齐： align-items: flex-start | flex-end | center | baseline | stretch;
给子元素设置flex属性（整数）和Android布局有点像，可以表示相对于父元素的占比。