9.13 web基础知识

1.面试题1.

        为什么同样是p标签中英文不同会出现不同的效果?

浏览器在解析第二个p的时候,因为字母之间没有空格,浏览器会认为他是一个单词并且还没有写完,所以不会换行。

2.列表

       1.ul  无序列表

           (1)内部必须有字标签   <li></li>

           (2)ul天生自带内外边距     还有一个p标签

         并集选择器 :要改变的标签名加{} 标签名之间用逗号隔开

          *选择器的好处   有利也有弊:

              利:省事

              弊:就是因为太省事了,加大了浏览器的负荷。

              解决办法:按需选择

            list-style  这是样式属性  除去列表前的符号

              格式:ul{ list-style:属性值}  (circle空心圆,disc实心圆,square正方形,none空)

          2.ol  有序列表

              1.内部必须有子标签<li>

               2.天生自带内外边距

                   ol和ul的不同之处就在前面的符号不同。

                   用标签type修改    格式 <ol type=" 属性值">

             3.自定义列表

                   格式:<dl>

                                        <dt></dt>

                                               <dd></dd>

                                </dl>

                 dt小标题   dd内容

              作用:做二级菜单  做导航

3.备注

     Marginpadding问题的探讨

     Margin:200px;设置一个值 说明top right bottom left 都是200px

     Margin200px 100p;设置两个值 上下是200px  左右是100px

     Margin200px 50px 100px 上是200px 左右是50px  下是100px

     Margin:200px 50px 100px 50px; 上是200  右是50px 下是100px 左是50px

     Padding同上

实际占用的空间大小

   通过分析我们发现 一个元素实际占用的空间是

Width+border*2+padding*2+margin*2 

 margin的塌陷现象?

       两个相邻的块级元素同时设置margin是,他们之间的外边距不会叠加回去最大的。这种现象叫做margin塌陷

4.有的标签是独占一行的,还有的会随着内容的增减而改变自己的空间大小

        更具以上现象,标签又分为【块级标签和内敛(行级)标签】

块级会独占一行;内敛更具内容的多少占用空间的大小

          块级:p,h1-h6,div,ul,li,ol,dl等

         内敛:span,img,i,a,bem,icon(适量标签)

        二者的区别

                 块级:1块级元素会独占一行

                             2.块级元素可以设置宽高

                 内敛:1.内敛元素不会独占一行

                             2.内敛不可以设置宽高

                             3.内敛元素的margin不起作用了

          二者的区别:

                         块级转行级

                                 给块级元素添加属性display:inline; display 显示  inline

                         行级转块级

                                给行级元素添加属性display:block;    block

                         行级块元素

                   给需要的元素添加属性 display:inline-block;

                                  (可以设置宽高了,可以在一行了,margin可以随便使用了

6.备注:

     line-height行高  设置字体的垂直位置

      line-height的值相同   文本居中

 拓展   line-height:50px/2

   当是2的时侯 line-height的值时2*font-size的大小等于36px

  

猜你喜欢

转载自www.cnblogs.com/jiangningjn/p/9642527.html