-
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
<p>我的母亲有 <span >蓝色</span> 的眼睛。</p>
查看全部 -
盒子模型分四块：margin(外边距)，border（边框），padding（内边距），content（内容）
查看全部 -
>作用于元素的第一代后代
空格作用于所有后代
查看全部 -
label标签是用来关联相关控件 这个控件的id属性值与lablel标签中for属性值一定相同
查看全部 -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML的代码注释</title>
</head>
<body>
<!--在线咨询 begin-->
<div>
<p>一站式报名咨询、助学答疑服务，无论是报名、选课、学习、做作业、考试、写论文，毕业，这里都有专业老师为你答疑解惑！<a href="#">向报名顾问咨询</a></p>
</div>
<!--在线咨询 end-->
</body>
</html>
查看全部 -
他们的优先级：
内联式 > 嵌入式 > 外部式查看全部 -
在ID选择器中的标签用#second span
查看全部 -
请输入笔记内容... .
<hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。2.
<hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改查看全部 -
弹性布局：display：flex; 要设置在父元素上。
默认有两根轴：主轴（可理解为横轴、x轴）、交叉轴（可理解为纵轴、y轴），与父元素边框的交叉点分别叫起点（start），终点/结束点（end），如：主轴起点、主轴终点、交叉轴起点、交叉轴终点。
------
设置子元素在主轴的排列「justify-content」属性：
flex-start：子元素依次排序，最左边的子元素与主轴起点对齐；
flex-end：子元素依次排序，最右边的子元素与主轴终点对齐；
center：子元素依次排序素整体水平居中；
space-between：子元素依次排序，两端的子元素与主轴起始点对齐，并与剩下的子元素等分水平空间，即：元素之间间隔相等；
space-around：每个子元素两侧间隔相等，即：子元素之间的间隔是端侧子元素与父元素间隔的2倍；
------
设置子元素在交叉轴的排列：「align-items」
flex-start：子元素顶端与交叉轴起点对齐；
flex-end：子元素底端与交叉轴终点对齐；
center：子元素垂直方向居中；
baseline：子元素第一行文本的基线对齐；
stretch：子元素未设置高度或设置auto子元素高度与父元素相等
------
作用在子元素上的属性：
order：0，1，2，...排列顺序，数值越小越靠前；
flex-grow：0，1，2，..子元素放大比例，默认0，表示不放大即便父元素还有多余的空间.如果都设置为「1」表示子元素等分父元素剩余的空间。可以理解为除了数值「0」以外，子元素设置几就代表占用父元素剩余空间的几份；
flex-shrink：子元素缩小比例，默认数值为1，表示父元素空间不足时缩小，「0」表示不缩小。所有子元素属性为「1」时表示，子元素等比缩小。理解为除了数值「0」以外，子元素缩小不足空间的几份。负数无效~
举例：父div的width = 500px；3个子div的每个width = 200px，则父div不足空间100px；假设3个子div的flex-shrink分别为：1、2、1，则每一份缩小数值为「25px」（25 = 100 / (1 + 2 +1)），所以三个字div最终宽度为：
1）200 - 1 * 25 = 175
2）200 - 2 * 25 = 150；
3）200 - 1 * 25 = 175；
注意：这里没有考虑：magin、padding、border，这些也是要参与计算的。
------
flex-basis：表示该子元素占据主轴空间的大小，根据这个计算父元素有多少剩余空间。默认「auto」，表示根据子元素的原本大小。
------
flex：是flex-grow，flex-shrink，flex-basis的简写，完整语法：
flex：none | [<flex-grow> <flex-shrink>? || <flex-basis>] （后两个属性可选）
默认值：0 1 auto
快捷值：auto（1 1 auto）、none（0 0 auto）
------
align-self：设置单个项目的交叉轴分布，即覆盖父元素的「align-items」属性，与「align-items」的属性值设置相同。
------
更多详情查看：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
查看全部 -
层模型，position：
absolute：绝对定位，脱离文档流，不会占用元素原有的位置。定位参照最近的父元素使用了position且取值为非「static」的元素，如果没有则参照body定位。
如：<div /><span>this is span tag.</span>，该例子中span标签位置会在div默认时的未设置「position」的位置，比如span在左上角，div在span下面；
多个absolute还会有叠加，可以使用z-index来设置层级顺序。
比喻：我走了，这地方我也不要了。
------
relative：相对定位，未脱离文档流，保留元素原有的位置，相对自身的定位。
如：<div /><span>this is span tag.</span>，该例子中span标签位置会在原div的左下方，即便div现在已经根据设置偏离原来的位置，且可能在span的下方，但是原来的位置是保留的。
比喻：我虽然走了，但是这地方还是我的。
------
fixed：固定定位，相对于浏览器窗口进行定位，拖动滚动条对其没有影响；不占有元素原有位置。多个fixed还会有叠加，可以使用z-index来设置层级顺序。
------
static：静态定位，默认值，表示没有定位，在正常流中。使用left、right、top、bottom或z-index无效。
查看全部 -
<input type="reset" value="重置">
ype：只有当type值设置为reset时，按钮才有重置作用value：按钮上显示的文字查看全部 -
只有当type值设置为submit时，按钮才有提交作用
查看全部 -
常用的元素display属性：
block：块级元素，设置该属性后元素独占一行；宽高可设置，默认宽度为父元素的宽度。margin和padding的上下左右均可设置。
inline：内联元素，元素在一行内显示，显示不下会换行；不可设置宽高、宽度为显示内容大小；margin和padding可设置左右，不可设置上下。
inline-block：行内块元素，显示在一行，拥有block元素的性质，可设置宽高、margin和padding可设置上下左右。
none：隐藏元素，不占用布局空间。
默认为块级的标签可以通过设置「display」属性更改为其它「级别」的元素，反之也可以互相设置为不同「级别」的元素。
更多属性查看css手册
查看全部 -
概述
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是：
margin-top，margin-right，margin-bottom和margin-left。指定的外边距允许为负数。margin的top和bottom属性对非替换内联元素无效，例如
<span>和<code>。语法
形式语法: [ <length> | <percentage> | auto ]{1,4}margin: style /*单值语法 所有边缘 */ 举例： margin: 1em; margin: vertical horizontal /*二值语法 纵向 横向 */ 举例： margin: 5% auto; margin: top horizontal bottom /*三值语法 上 横向 下*/ 举例： margin: 1em auto 2em; margin: top right bottom left /*四值语法 上 右 下 左*/ 举例： margin: 2px 1em 0 auto; margin: inherit
取值
接受1~4个可选参数，每个参数取值如下：
<length>指定一个固定的宽度。可以为负数。请参阅
<length>获知可用的计数单位。<percentage><percentage>相对于该元素的包含块的宽度（相对于该块的百分比）。该值可以为负数。auto浏览器会自动选择一个合适的margin来应用。它可以用于将一个块居中。
比如，div { width:50%; margin:0 auto; }会把这个div容器水平居中。
只有一个 值时，这个值会被指定给全部的 四个边.
两个 值时，第一个值被匹配给 上和下, 第二个值被匹配给 左和右.
三个 值时，第一个值被匹配给 上, 第二个值被匹配给 左和右, 第三个值被匹配给 下.
四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).
查看全部 -
空格：
查看全部
举报