zoukankan      html  css  js  c++  java
  • 9.13 h5日记

    9.13

    面试题

    为什么两个P出此案的效果不同,原因是 浏览器在解析第二个P的时候,因为字母没有空格,浏览器会认为这个单词没有打完,所以不会换行。

    列表 ul ol dl li

    1、无序列表 ul

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

    (2)ul天生自带外边距  <p>也是自带外边距

    ❤list-style 样式属性 可以清楚列表前面的符号

    list-style的属性值:circle/disc/square/none

    ❤并集选择器,用英文状态下的逗号隔开

    ❤*选择器,优缺点

    优点:省事

    缺点:增加了浏览器的负荷

    解决办法:按需选择

    2、有序列表 ol

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

    (2)天生自带内外边距

    ❤ul和ol的区别主要在于前面的符号

    ol前面的符号属性更改在标签里

    <ol type="A"></ol>

    3、自定义列表 dl

    dl dt dd(自定义列表 小标题 内容

    ❤列表可以做什么:二级菜单 导航

    ❤有关margin和padding问题的探讨

    (1)margin:200px;只设一个值,它的上下左右边距都是200px

    (2)margin:200px 100px;设两个值,上下边距是200px,左右边距是100px

    (3)margin:200px 50px 100px;设三个值,上边距是200px,左右是50px,下边距是100px

    (4)margin:200px 50px 100px 50px;它是顺时针设置的,则上 右 下 左

    ❤空间的实际占用空间

    通过分析我们可以知道,一个元素实际占用的空间(区域)是:width+border*2+margin*2

    ❤一个标签元素的实际高度

    height+padding-top+padding-bottom+border*2

    ❤margin的塌陷现象是什么?

    相邻的两个块级元素都设置margin时,他们的外边距不会叠加,会取最大值,这种现象就叫做margin塌陷

    4、有的标签设置背景时会独占一行,还有的会根据内容的增减而改变自己的空间大小,则

    块级元素:p h1-h6 div ul ol dl li

    内联元素:span img i b a em icon

    ❤二者的区别

    块级元素

    (1)块级元素会独占一行

    (2)块级元素可以设置宽高

    内敛元素

    (1)内敛不会独占一行

    (2)不可以设置宽高

    (3)内联元素的上下margin不起作用

    ❤二者转换

    块级元素转行级

    display:inline;

    行级转块级

    display:block;

    行级块元素(给需要的元素添加属性)

    display:inline-block;

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

    ❤lin-height(行高)可以设置字体的垂直位置

    line-height的值和height的值相同的时候,文本就是上下居中了

    ❤line-height的值

    line-height:50px/2;

    当为2时,line-height的值是2*font-size的大小

  • 相关阅读:
    SEO常用外链资源站整理分享
    不同的LINUX系统,跨服务器快速拷贝文件
    WPS表格、Excel常用技巧大全,99%人都不知道,但非常实用!
    php 5.4中php-fpm 的重启、终止操作命令
    帝国CMS伪静态
    Centos7访问Win7/Win10系统中的共享文件
    H3C S5500三层交换机划分Vlan与H3C路由组网
    H3C S5500V2交换机误格式化恢复
    linux_centos7_时间更新
    Centos7安装mysql数据库
  • 原文地址:https://www.cnblogs.com/qinlinkun/p/9642870.html
Copyright © 2011-2022 走看看