前端小知识点

看似简单的东西,越是很重要,赶紧收藏起来吧!
标签的嵌套:

  1. 块标签可以嵌套任何标签
    2.p标签绝对不能嵌套块标签
  2. 行标签不能嵌套块标签,可以嵌套行标签(例外a标签可以嵌套块标签)
    注意:a)自己不能嵌套自己 b)display:block ;变成块之后也不能嵌套块标签\列表
    列表的样式:list-style-type: none disc square
    距离 内边距 ,内补丁,内补白
    padding: top right bottom left
    单独的四个方向:
    a)padding-top: 左边距
    b padding-bottom : 下边距
    c padding-left : 左边距
    d)padding-right : 右边距简
    padding : 上下左右; 一个值
    padding: 上下,左右; 两个值
    padding: 上,左右,下 三个值
    padding: 上 ,右,下,左, 四个值
    盒子模型: 盒子=标签 标签的模型 标签在页面中占的大小 盒子模 型的组成:width /height+padding+boder 注意:如果标签设置了宽高,在设置Padding的时候会往外挤,一定要用宽高减掉padding,标签如果有需要,最好设置宽度。
    margin: 外边距(盒子与盒子之间的距离)
    margin: top right bottom left
    单独的四个方向:
    a) margin-top : 左边距
    b)margin-bottom: 下边距
    c)margin-left: 左边距
    d)margin-right : 右边距简
    padding : 上下左右; 一个值
    padding: 上下,左右; 两个值
    padding: 上,左右,下 三个值
    padding: 上 ,右,下,左, 四个值
    注意:margin塌陷,如果上下两个值一样,听一个,如果一个大,一个小,挺大的。 margin:行元素只有margin-left 和 margin-right
    padding:行元素只有padding-left/padding-right/padding-bottom
    很多元素自带margin和padding 写样式之前,需要把所有元素的margin和 padding都清空
    *{
    margin: 0; padding: 0;
    }
    列表
    无序列表:
    <ul>
    <li> 内容 <li>
    <li> 内容 <li>
    <li> 内容 <li>
    </ul>
    有序列表:
    <ol>
    <li> 内容 <li>
    <li> 内容 <li>
    <li> 内容 <li>
    </ol>
    描述列表:
    <dl>
    <dt>内容标题</dt>
    <dd> 内容 <dd>
    <dd> 内容 <dd>
    <dd> 内容 <dd>
    </dl>
    列表的样式:list-style-type: none disc square
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,605评论 32 459
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 今天在写页面的时候,发现class="1212-sale"开头的样式无法调用,后来大群里有同学说class样式不能...
    韩宝亿阅读 5,522评论 1 7
  • 娱乐圈从来都不缺少出轨这样的谈资,从文章到陈赫到这一次的林丹,每一次都能引起一轮全民婚姻观大讨论。而评论里永远都可...
    寻觅一路阅读 279评论 0 0