HTML/CSS随课笔记

【itheima】HTML/CSS课程随堂记录

sublim

sublim快捷键

骨架：

Code

html:5+tab键盘
!+tab

标签生成：

Code

1. 生成标签 直接输入标签名 按tab键即可   比如  div   然后tab 键， 就可以生成 <div></div>
2. 如果想要生成多个相同标签  加上 * 就可以了 比如   div*3  就可以快速生成3个div
3. 如果有父子级关系的标签，可以用 >  比如   ul > li就可以了
4. 如果有兄弟关系的标签，用  +  就可以了 比如 div+p  
5. 如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了

插件

Emmet:

——快速生成html骨架,标签

html补充

表格

html

<table border="1" width="500" border="1" align="center" cellspacing="0" cellpadding="0">
	<thead>
		<tr>
			<th>head1</th>
			<th>head2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>h1</td>
			<td>h2</td>
		</tr>
	</tbody>		
</table>

css补充

通配符选择器

​ 不推荐使用，实际项目采用罗列标签的方法

后代选择器 和 子元素选择器

css

h1 strong {color:red;}	 /*后代选择器：h1所有子孙strong都能选*/
h1 > strong {color:red;} /*子元素选择器：只能选h1的子元素（不能选孙）*/

html

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

定位

Code

子绝父相

一些开发约定

字体：

Code

1. 网页字体普遍使用14px，字号尽量使用双数（ie6有单数bug）
2. 为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

京东项目（CSS+DIV练手）

css初始化：normalize.css

目录结构：

​

标题和图标：

css分文件

头部 小叉 字体图标

开发常规

css+div布局

Code

1. css初始化 normalize.css 和一些样式清除

2. 子绝父相(子绝的话，父只要定位就行，所以子绝父绝也是可以的)

3. 行内块之间有间隙,用float可以清除间隙

4. 加了定位的行内元素 不用转换 就能设置宽高

5. 若一个盒子里某个孩子浮动了，按道理，所有的孩子都应该浮动的。

6. 若盒子里的元素都浮动了，而父盒子又没有高度（子盒子有），则父盒子撑不起高度，效果就是子盒子跑到父盒子外面去了。解决方案：清除浮动

7. 浮动的元素默认上对齐，若要中对齐，解决方案：absolute定位，脱标

8. 如何让文字链接垂直居中:用a撑起盒子高度，其他父盒子均不写高度，然后line-height=高度 即可
	.XXX a {
        height: 18px;
		line-height: 18px;
	}
9. 解决行内块（行内元素的间隙）：
	1> 浮动
	2> 父类 font-size:0;
10. 盒子里面的图片大小设置 
    .fs_user_head img {
        width: 100%;
        height: auto; /*随宽度等比缩放*/
    }
    若父盒子有形状，就在父盒子里写overflow:hidden切去border外的部分
    
11. CSS3盒子模型
box-sizing: border-box;   /* padding border  不撑开盒子 */
* {
    box-sizing: border-box; /*使用CSS3盒子模型：内减模式*/
}

插入视频：

1. 优酷，分享iframe,嵌入即可
2. h5的视频