zoukankan      html  css  js  c++  java
  • 经典容易忽略的行内块

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

    列表

    1.无序列表ul 第一内部必须含有子标签<li></li> 第二ul天生自带内外边距 还有一个...p...标签

    并集选择器 body,ul,p{}

    通配符选择器

    好处:简单,省事

    坏处:太省事,加大了浏览器的负荷

    解决办法:按需选择 list-style...这是属性样式,

    除去列表的符号

    属性值square正方形disc实心圆none空circle空心圆

    ol有序列表 内部必须有子标签 天正自带内外边距

    ol和ul不同之处:1前面的符号不同 改变前面符号通过标签属性type

    自定义列表 <dl><dt><dd></dd></dt></dl> dd自定义列表dt是小标题dd是内容

    列表能做啥

    做2级菜单,做导航栏

    备注 margin和padding问题的探讨 margin设置一个值说明上右下左都是

    margin设置两个值上下/左右 margin设置3个值上/左右/下

    margin设置4个值上/右/下/左

    padding同上 实际占用的空间大小

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

    一个标签元素的实际高度是多少 实际高度=height+padding-top+padding-bottom

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

    有的标签背景会独占一行

    有时会随着内容的增加而改变自己的空间大小

    根据以上现象,标签又分 5.

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

    内敛:span,img,i,b,a,em,icon,字体标签小图标{矢量}

    快级元素会独占一行 快级元素可以设置宽高

    内敛不会独占一行 内敛不会设置宽高

    内敛元素的marign上下不起作用了

    二者转换 块级转行级

    给快级元素添加属性display:inline;

    行级转块级 display:block;

    给有需要的元素设置inline-block;

    可以设置宽高可以在一行,margin可以随便使用 line-height行高和height一样是居中 扩展 line-height10px/2 /50% 当是2的时候,2*font-size字体的大小

  • 相关阅读:
    算法_二叉查找树
    Java编程思想学习笔记_2(继承和多态)
    算法_符号表
    算法_优先队列
    算法_快速排序
    Java编程思想学习笔记_1(Java内存和垃圾回收)
    map 与 lambda 的用法
    优化版九九乘法表
    low版九九乘法表
    python3爬虫lxml模块的安装
  • 原文地址:https://www.cnblogs.com/aaaaap/p/9643065.html
Copyright © 2011-2022 走看看