html css回顾总结

1.css 8个选择器

css选择器	权重
元素选择器	1
class类选择器	10
id选择器	100
包含（后代）选择器	做加法
群组选择器	各自看各子
伪类选择器	10
通配符选择器	0~1
！important	1000

2.css文字相关属性

font-

        字体粗细        font-weight

        字体类型        font-family

        字体倾斜        font-style

text-

        居中                text-align：center

        去除超链接下划线      text-decoration：none

        首行缩进          text-indent

3.css列表属性

去除列表样式        list-style:none

更改列表小圆圈位置  list-style-positon

4.图片属性

vertical-align:top/middle/bottom    //解决3px问题

解决图片3px 问题

1.vertical-align:top/middle/bottom;

2.float

3.display:block;

4display:flex;

5.position

6.背景属性

background: color url() no-repeat  水平 垂直；

7.盒模型

子元素Margint-top，父元素会根据子元素下移-------->解决方式1：父元素：overflow：hidden； 

小记

display默认值 inline

a：link选择未被访问的超链接，并设置其样式

a:hover鼠标悬停超链接的样式

a:active鼠标点滴时超链接样式

a:visited表示单击访问后超链接样式

css层叠性：当权重相同时，代码自上而下解析，权重不同时，会解析权重大的选择器。

浏览器前缀： ms-IE   moz-火狐  o-欧鹏  webkit-谷歌，苹果

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

8.浮动特点

1.元素浮动后，行内元素可以设置宽高 上下padding,margin

2.元素浮动后，没设置宽高，则宽高由内容撑开

3.元素浮动，margin：0 auto;失效

4.图片浮动后，vertical-align失效

9.定位Positon

默认属性：position:static 不定位

相对定位：relative        在文档流中占据位置

绝对定位：position       完全脱离文档流

固定定位：fixed        在文档流不占位置

粘性定位：sticky        默认情况下占位置，滑过属于他的区域时，变成固定定位。

10.常见的布局方案

1.万能导航栏

2.搜索框

        结构 p>input+button

•  给两个input设置宽高，border0；
•  两个input左浮
• p设浮动，设置外边框

3.banner大图的写法

        结构div>img

•  给div设置高
•  给div设置绝对定位 position：relative； height：***px ; overflow:hidden;
• 给img设置 

        position ：absolate;       

        left：50%

        top:0;

        margin-left:负图片宽度一半

        or transform:translate(-50%);

     

11.BFC 块级格式化上下文

BFC触发条件：

1.html根节点

2.float不为默认值，可以为left，right

3.display不位默认值，可以为inline-block，flex，grid

4.overflow不为默认值visible,可以为hidden，scroll，auto

5.position不为默认值，可以为relative，absolute

12.宽高自适应

1.高度自适应：不写 or height :auto;(height:100%不是自适应)

2.高度塌陷

 原因：子元素设置浮动。父元素不写高度，父元素会出现高度塌陷。

方案1:父元素overflow：hidden；

方案2：浮动元素后加一个div

               css: height:0; clear:both; overflow:hidden;

方案3：万能清浮动 浮动元素后加：：after

                

content:"";  //必须写！！！
display:block;
clear:both;
height:0
overflow:hidden;
visibility:hidden;

13.元素消失

元素消失不占位置：display：none；

元素消失占据位置：

1.visibility:hidden; 

2.

opacity:0;    (0~1)
filter:alpha(opacit=0) (0~100)

3.background:rgba(0,0,0,0)

14.table表格属性