html与css进阶

0.书写规范

1.html5中可以省略属性值的属性

• checked
• readonly
• defer
• ismap
• nohref
• noshade
• nowrap
• selected
• disabled
• multiple
• noresize

2.对页面关键结构或者大结构采用id，LOGO，导航，主体内容，底部信息栏

3.浏览器标题图标

4.图片与图注

    
    
图注

5.fieldset和legend，增强表单语义

6.
只能用于p标签内换行

7.图片仅起装饰作用，并不想被搜索引擎识别，使用背景图片

8.1px，%，1em，1rem

px

1px,1像素，1张图片中的最小的点

%

1. width、height、font-size的百分比是相对父元素相同属性的值计算的
2. line-height的百分比相对于父元素font-size 的值计算的
3. vertical-alin的百分比相对于当前元素的line-height值计算的

em

1. 相对于“当前元素”的字体大小而言的
2. 浏览器默认字体大小16px
3. 首行缩进text-indent：2em
4. 简化font-size 的计算，声明body{ font-size:62.5%;),相当于1em=10px
5. 修改整体的文字大小时候，只需要修改根元素字体大小

rem（兼容性问题）

1. 相对于根元素的字体大小
2. 移动端常用字体大小之一

9.CSS的继承性和层叠性

10.CSS的层叠性

后来者居上：元素、属性和权重相同

11.CSS的优先级

行内样式>内部样式>外部样式

CSS选择器优先级（底部为权值）

行内样式	id选择器	class选择器	元素选择器	通配符*
		伪类	伪元素
		属性选择器
1000	100	10	1	0

CSS选择器权重仅针对当前样式，并不用于继承样式

伪元素：：（pseudo-element）是HTML 中并不存在的元素。用于将特殊的效果添加到某些选择器。

：：before，：：after，：：first-letter，：：first-line

伪类：是用来添加一些选择器的特殊效果。

:hover :first-child

强势覆盖样式(!important)

strong{
    color:Black !important
}

12.CSS选择器

★俩个元素之间实现效果（border、margin）使用"li+li(border-top:2px solid red;}

13.css盒子模型

 


    
    


    

    	

    		内外边距
    	
    

14.border:none与border:0,前者不占用内存

15.外边距叠加（为了更好的对文章进行排版）

含义：俩个垂直外边距相遇时，会合并成为一个外边距，这个外边距的大小为合并前较大的外边距

三种情况：同级元素，父子元素和空元素

同级元素：上下俩个元素，上面元素设置下边距，下面元素设置上边距，俩个外边距会发生合并

父子元素：父子元素，如果没有border和padding把外边距隔开的话，上下外边距也会发生合并

空元素：一个空元素有上下外边距时，如果没有border或padding，元素的上边距与下边距会发生合并

 解决方案（https://www.cnblogs.com/star91/p/5453244.html）

触发BFC，使得margin不重叠

父元素

overflow:hidden

padding或border(仅在父子级元素中）

子元素

float:left

display:inline-block

position:absolute

同级（创建父元素设置overflow:hidden）