html+css学习

1.CSS盒子模型

 

组成(由内向外)：content-->padding-->border-->margin

                             物品          填充物      包装盒    盒子与盒子之间的间距

                           content： 内容区域  width和heigh组成的

                           padding(-left,right,top,bottom)：

                         内边距（内填充）-->  只写一个值 padding:60px;（上下左右都填充）

                                                             写两个值：30px 40px（上下、左右）

                                                             写四个值：30px 40px 50px 60px（上，右，下，左）

                             margin（-left,right,top,bottom）:外边距（外填充）

                                                            只写一个值 margin:60px;（上下左右都填充）

                                                             写两个值：30px 40px（上下、左右）

                                                             写四个值：30px 40px 50px 60px（上，右，下，左）

                                 注意：背景色填充到margin以内的区域（不包括margin）

                                            文字会在content区域

                                            padding不能为负数，margin可以为负数

                                        box-sizing:

                                         盒尺寸：可以改变盒子模型的展示形态。

                                          默认值：content-box：width，height->content(单独content的尺寸)

                                          border-box:  width,height->content  padding border（尺寸由三个部分分）                              

 

                                        使用的场景：不用再去计算一些值

                                                               解决一些百分比的问题

                                        盒子模型的一些问题：

                                         （1）margin叠加问题：出现在上下margin同时存在的时候，回去上下中值较大的作为叠加的值。

                                          解决方案：1.只设一个值

                                                            2.BFC规范

                                           （2）margin传递问题：出现在嵌套的结构中，只针对margin-top的问题                 

 

                                              解决方案：1.BFC规范

                                                                2.给父容器加边框

                                                                3.外层把margin改成padding（也要调整外层高度）

                                           扩展：

                                               1.margin左右自适应是可以的，但是上下自适应是不行的。

                                          2.width,height不设置的时候，对盒子模型的影响：会自动去

                                           计算容器的大小，节省代码。

                               2.标签分类

                                           1.按类型：block：块--->div , p , ul , li h1.....

                                             (1)独占一行

                                           （2）支持所有样式

                                           （3）不写宽的时候，和父元素的宽相同

                                               inline: span , a ,em , strong , img....

                                           （1）挨在一起的

                                          （2）有的样式不支持，例如：width，height，margin，padding

                                           （3）不写宽的时候，宽度由内容决定

                                           （4）所占的区域不一定是矩形

                                           （5）内联标签之间有空隙。原因：换行产生的

                                               （这样就不会产生空隙）

 

                                               inline-block: input, select......

                                                （1）挨在一起，支持宽高

                                      2.按内容

                                3.按显示

                                替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示

                                非替换元素：将内容直接告诉浏览器，将其显示出来。

                               

                                显示框类型

                                        display：block,inline,inline-block,none

                                           注意:display:none 与 visibility：hidden的区别

                                                      display:none----不占空间

                                                        visibility：hidden---占空间

                         标签嵌套规范

                                           块标签可以嵌套内联标签

                                           块标签不一定可以嵌套块标签（p标签里面不能嵌套块标签）

                                          内联不能嵌套块标签（除了 a标签里面可以嵌套块）

                           溢出隐藏

                                       overflow： visible：默认

                                                         hidden

                                                         srcoll ：滚轮

                                                          auto：长度短正常，超出范围变为srcoll

                                                         x,y轴：  overflow-x,overflow-y

                                    透明度和手势

                                                   opacity:0(透明--占空间)~1（不透明） 

                                                    注意：所有的子内容也会透明

                                                    rgba：可以让指定的样式透明，而不影响其他样式。

                                      currsor：手势

                                                     default：默认箭头

                                                        实现自定义手势：准备图片：  .cur    .ico      

                最大，最小宽高：

                   min-width  ,   max-width

                   min-height  ,   max-height

                 注意：%单位：换算--->根据父元素的大小

 

               css默认样式

                            没有默认样式的： div ，span

                         有默认样式：body-->margin：8px

                                               h1->margin:上下

                                                 p->margin:上下 16px

                                                 ul->margin:上下  16px  padding:左 40px

                                                 a->text-decoration:underline;