zoukankan      html  css  js  c++  java
  • 列表分类,margin块级与行级

    列表分为:有序列表 无序列表 自定义列表

    有序列表:内部必须带有子标签

    天生自带内外边距

    无序列表要求与上有序列表俩点相同

    自定义列表包括:dl(自定义列表)dt(小标题)dd(内容)

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

    list-style的属性值:circle(空心圆)disc(实心圆)square(正方形)none(空的)

    列表的作用

    可以做二级菜单

    做导航

    margin为外边距

    margin:200px;当属性值为一个值时表示他的上下左右都为这个值

    margin:200px 100px; 当属性值为俩个值时表示上下为200px左右为100px

    margin:200px 50px 100px;当属性值为三个值时表示上下200px 左右50px 下100px

    margin:200px  50px  100px  150px ; 当属性值为四个值时分别代表上  右   下    左

    padding同上

    实际占用空间大小的计算方式为width+border*2+padding*2+margin*2

    一个标签元素的实际高度为:height+2*padding+2*margin

    什么是margin塌陷?

    margin塌陷是指俩个相邻的块级元素同时有margin时他们的margin不会叠加会取最大值这种现象叫做margin的塌陷

    有的标签在设置背景时会独占一行我们称为块级标签

    有的会随内容的增减而改变自己的空间大小我们称为内敛标签

    块级标签无论出现多少都会独占一行

    内敛标签根据内容多少而改变自己的空间

    块级标签包括:p   h1——h6  div  li  ol  ul  等

    内敛标签:span  img  i  b  a  em  icon

    二者的区别

    块级

    1.块级元素会独占一行

    2.可以设置宽高

    内敛

    1.不会独占一行

    2.不能设置宽.高

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

    二者转换

    块级转换行级:给块级元素添加display(显示):inline(行);

    行级转换块级:给行级元素添加display:block(块);

    行级块元素:给需要的元素添加属性display:inline-block 就变成行级块

  • 相关阅读:
    PHP中laravel拼接原生语句使用find_in_set
    PHP合并某个字段相同的数组,并重组数据算法
    ajax结合php简单的城市三级联动
    简单的qq第三方登录的实现
    laravel设置子域名
    如何在闹钟响时马上起床
    Badminton-playing robot and energy efficiency software
    [阅读技巧] 快速阅读之二 进一步提升阅读资料的速度
    [阅读技巧] 快速阅读入门
    [动态规划] 放置街灯 Uva 10859
  • 原文地址:https://www.cnblogs.com/zzz035921/p/9642645.html
Copyright © 2011-2022 走看看