zoukankan      html  css  js  c++  java
  • 别具光芒Div CSS 读书笔记(一)

    继承

    边框(border)、边界(margin)、填充(padding)、背景(background) 是不能继承的。

    table 中td不会继承body的属性,因此需要单独指定。

    权重

    p {color:black;}  /*权重为:1*/

    p em {color:yellow;} /*权重为:2*/

    p .note em .dark{color:gray;} /*权重为:22*/

    #main{color: black;} /*权重为:100*/

    p{color:red !important;} /*权重为:1000*/

    内联样式表(写在标签内的)> 嵌入式样式表(写在文档头部的)>外部样式表(写在外部文件中的)。

    元素分类

    块级元素(display: block): 标题 h、段落 p、表格 table、层 div、body

    内联元素:(display:inline):a、em、span

    列表项:(display:list-item):li

    隐藏元素:(display:none)

    盒模型

    每个HTM元素都可以看作一个装了东西的盒子,盒子里面的内容到盒子的边框之间的距离叫“填充(padding)”盒子本身有边框(border),而盒子边框和其它盒子之间,还有“边界(margin)”

    一个元素的实际宽度为=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界

    image

    注意事项:

    1,margin值可以为负,各浏览器支持不同。

    2,border默认样式为不显示(border-style:none)。

    3,padding值不可为负。

    4,对于块级元素,未浮动的垂直相邻元素上、下边界会被压缩,如:上下有两个元素,上元素的下边界为10px,下元素的上界面为5px,则实际两个元素的间距为10px(两个边界值取最大的值)。如图:1

    5,浮动元素(不管是左浮动还是右浮动),边界不会压缩。如图:2

    6,内联元素,例如a,定义了上下边界,不会影响到行高。

    7,如果盒中没有内容,即使定义了宽度、高度,实际上只占0%。

    image

    图:1

    image

    图:2

  • 相关阅读:
    shell的执行顺序问题
    七层负载均衡——HAProxy
    不要自以为是码农
    SSL协议运行机制
    Linux启动流程
    MIM协议与Base64编码
    Adele的生活
    你值得拥有:25个Linux性能监控工具
    [Zabbix] 如何实现邮件报警通知以及免费短信报警通知
    php.ini中date.timezone设置分析
  • 原文地址:https://www.cnblogs.com/jiguixin/p/3335900.html
Copyright © 2011-2022 走看看