css得一些注意点

淩亂°似流年 2023-06-23 10:53 3阅读 0赞

1.\*行元素不支持上下padding和margin（很重要！！！）

2.\*父子级margin的怪异现象：子级得margin-top不生效,因父级没边框,子级往下移\{最好就是给父级使用内边距padding 来 替换这种写法\}  
            解决方案:  
            1.给父级添加边框  
            2.给父级overflow:hidden;(经常使用)

3.上面元素的margin-bottom,下面元素的margin-top,两者的间隙并不是直接相加,而是取两者之间的最大值

4.\*display:inline-block的弊端  
            1.块元素->inline-block在ie低版本没有办法识别  
            2.换行符会被解析,出现3px的间隙(处理方法:在父级写font-size:0; 但会被子级继承)  
            3.需要通过vertical-align设置竖直方向的对齐方式

解决换行符的解析的bug（display: inline-block;）  
        1.对父级设置font-size:0;  
        2.处理对子级字体的影响

5.float特性:  
        1.对块元素设置浮动之后,块元素不再占父级一整行空间,而且当我们没有给它设置宽高时,宽高由内容撑开  
        2.对行元素设置浮动之后,行元素会支持宽高设置,并且支持上下padding和margin  
        3.块元素设置浮动之后,margin:auto失效()  
        4.对元素设置浮动之后,会脱离当前文档流(文档流就是布局的次序)(基于文档流当前的位置,浮在上面),类似层级提示(就是浮在上面一层空间)

文档流:元素从上到下,从左到右的布局次序

关于float布局属性的重要特性  
            1.向左浮动或者向右浮动的元素,左边或者右边,必须是对应方向的浮动元素或父级边界  
            2.即使是浮动元素,也得从文档流开始  
            3.如果浮动元素换行,浮动元素会以上一行对应浮动方向一致,并且高度最高的元素,为下一行y轴起点  
            4.浮动的拦截现象

6.\*.处理浮动影响的7种方案  
               1.通过自己测量,给父级设置高度  
               2.在父级内部的最下面写一个空标签,利用clear属性,(缺点:就是在IE浏览器下,空标签有默认的行高19px;)  
                   解决方法:  
                       1.line-height:0;并且在空标签中写入空格或者&nbsp;  
                       2.给当前空标签设置overflow:hidden;(\*适用于子级全部是浮动元素,如果子级有两个浮动块元素,下面块元素不浮动,则在父级设置overflow:hidden;,不起效,下面块元素会跑上去,在下面不浮动的块元素使用clear:both会起效)  
               3.在父级内部下面,设置<br clear="all">,  
               缺点:违背样式与结构相分离的特点  
               4.给父级设置display: inline-block;  
               缺点:IE低版本不识别  
               5.\*给父级设置overflow:hidden;  
               缺点:IE6,7下使用,没有效果  
               给IE6,7清除浮动影响:  
               \*解决:给父级设置zoom:1;  
               6.让父级也浮动  
               缺点:不利于网页布局  
               7.after伪元素选择器  
               缺点:兼容性不是很好,IE9+以后的才能识别

7.图片被嵌套在块元素中,底部会有间隙,最佳解决方案就是对图片:vertical-align: top;

img\{  
    /\*遇到图片就写这个,去除图片间隙\*/  
    vertical-align: top;  
\}

行元素与内联块元素,横向布局默认是基线对齐；vertical-align只能修饰行元素和内联块元素,对块元素设置无效！！！

8.定位的适用场景  
            1.在同一个区域叠放多个标签  
            2.结合定位快速实现居中  
        定位CSS属性,属性名为position  
            定位分为四种:  
            1.static(默认值,静态定位也就是没有定位)  
            2.relative(相对定位)  
            3.absolute(绝对定位)  
            4.fixed(固定定位,IE6不支持,ios7以下手机端也不支持)

绝对定位的特性:  
        1.绝对定位,会脱离文档流(不占原来的文档流的空间),提升层级  
        2.行元素设置完绝对定位之后,会支持宽高设置,支持上下padding和margin  
        3.块元素绝对定位之后,自动margin失效,不再占用父级整行空间,不给宽高的时候,由内容进行填充  
        \*\*4.绝对定位元素,是基于离该元素最近的"定位父级"(1.父级 2.绝对定位/相对定位/固定定位 3.最近的父级),进行定位的,都没有定位父级时,是基于document(整个浏览器刚开始第一次进去看到的可显示区域,给body一个高,鼠标往下滚动得页面不变不动)定位的  
        \*5.对子元素设置绝对定位,一般,都要保证父级有明确的高度  
        \*6.绝对定位+定位父级结合使用

9：rgba是最优解,但ie9以下不支持  
            background: rgba(0,0,0,0.5);  
      使用opacity,兼容IE低版本  缺点:父级透明,里面的子级颜色也都跟着透明\*/  
            background: \#000;  
            opacity: 0.5;  
            filter:alpha(opacity: 50);

10：float和position都有提升层级的作用

11：1.水平居中:  
            1.1 块:宽度明确,使用margin-auto居中  
            1.2 行/内联块(内联块inline-block):对父级设置text-align:center  
        2.垂直居中:  
            2.1 vertical-align:middle,只能应用于行元素和内联块元素,对块元素和float(浮动)元素都没有效果  
        \*3.无论水平还是垂直,不管元素的种类,定位+百分比+负margin  
            top/left/bottom/right值为百分比,改变对应方向margin的值 ,详见6-

\*4.无论水平还是垂直,不管元素的种类  
            前提  
            竖直居中:高度明确  
            水平居中:宽度明确

1.让该元素基于居中区域绝对定位  
            2.如果水平方向居中,就让该元素的left:0;right:0;左右margin:auto;  
            如果竖直方向居中,就让该元素的top: 0;bottom: 0;上下margin:auto;

12：vertical-align:  
        1.top:顶部对齐  
        2.middle:居中对齐  
        3.baseline:基线对齐(默认对齐方式)  
        4.bottom:底部对齐

案例1:父级的高度由其中的一个行元素撑开  
        解决方案:对内部的每个子元素设置vertical-align:middle

案例2:父级的高度确定,如何垂直居中内部的行元素  
        解决方案:  
        1.写一个空标签,设置高度等于父级高度  
        2.在该父级所有的子元素设置vertical-align:middle

13：滚动条overflow: scroll;在笔记本和电脑处理不一样 电脑下面有16px的间隙,笔记本没有,解决办法:overflow: auto;

![20191218163956129.png][]

14：>>拓展:SEM:搜索引擎营销,利用付费的方式,提高排名  
        SEO:搜索引擎优化,利用技术手段,提高网站在搜索引擎中的排名  
        \*那些技术手段  
            \*1.title:权重值很高  
            2.keywords:关键字,description:关于该网站的描述  
            3.h1标签,每个页面只能出现一次,h2标签也不要使用太多  
            \*4.标签语气化,使用对应语气的标签  
            5.让公司后台定期更新内容  
            6.使用strong加强语气,img,alt写成对应图片表示的内容  
            7.在pr值,最大值是10,(谷歌达到了10,百度的是9)比较高的网站上,建立外链

15：\*tr:table-row元素(就是一行)  
        \*td:table-cell元素（就是一个单元格）  
        th:table-cell元素(一般会用在thead中)  
         th与td的区别:  
                相同点:都是放在tr里  
                不同点:th会加粗,文本自动水平居中  
          使用规范:  
                1.table的第一层子级一般都为tr  
                2.tr的第一层子级都为td  
                3.td可以随便放置

.复杂表格

th与td的区别:  
        相同点:都是放在tr里  
        不同点:th会加粗,文本自动水平居中  
        \*table的标签属性:  
        1.cellspacing:调整间隙 ->样式换成了border-spacing(写table里面)  
        2.cellpadding:调整内填充 ->样式换成了padding(写在td,th里面)

td:  
        控制单元格合并的属性  
        1.colspan:横向合并(列合并)  
        2.rowspan:纵向合并(几行合并一个)

16：1.form  
            用来承载前端向服务器传递的数据  
            特性:是一个块元素  
            \*1.action:服务器地址(服务器上处理该段数据的脚本文件)  
            \*2.method:请求方式  
                2.1:get(默认方式)  
                2.2:post  
                区别:  
                1.get方式简单但不安全,而post方式复杂但安全  
                2.get传递数据的大小,远远小于post  
        2.input(内联块元素)  
            就是一个控件,用户的数据可以依托input,放到form中,传给后台  
            input是内联块元素    
            \*\*name:前后台协定的字段名(无关显示就是显示不出来,但很重要)  
            \*value:传递给服务器端的字段值

17：margin,padding,的百分比 都是基于父级宽度而言的

18：

[20191218163956129.png]: https://img-blog.csdnimg.cn/20191218163956129.png