zoukankan      html  css  js  c++  java
  • 关于盒模型的 盒子模型 、 浮动 、 定位以及高级选择器的使用

    盒模型的基本组成包括:外边距(margin)内边距(padding) 边框(border)元素(element,content)

    当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(
    对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。都会合并成父元素的外边距,内盒子与大盒子之间不显示小盒子的外边距。
    解决方案:可以为父元素定义1px的上边框。可以为父元素定义1px上内边距。可以为父元素添加 overflow: hidden
    • box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode
    • box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
      注:上面的标注的width指的是CSS属性里设置的 length,content的值是会自动调整的
    • 高级选择器的写法以及其中的意思:通配符选择器为所有包含的html进行设置(*在html中字体的最小是12px,
    • 选择器分组;div,p{},p在div外 后代选择器 div a{} a链接在div里边,如果在div外有个p标签,p标签下有个a链接是不生效的,a但是如果p与a标签都在div里,那就可以生效;
    • div>a{} div下有P,a不生效
    • div+p{}相邻元素设置p标签生效,如果中间有个a标签,那p标签就不生效
    • 伪类选择器a:hover{}鼠标移动到哪,设置的啥颜色就是啥,移开恢复原来颜色
  • 相关阅读:
    onmouseover事件
    ref:ThinkPHP Builder.php SQL注入漏洞(<= 3.2.3)
    ref:mysql命令大全
    ref:mysql丢失密码,如何修改?
    ref:学习笔记 UpdateXml() MYSQL显错注入
    转:[译]CSV 注入:被人低估的巨大风险
    转:深入剖析 JavaScriptCore
    转:Exploiting Electron RCE in Exodus wallet
    转:LNMP虚拟主机PHP沙盒绕过/命令执行(php exec命令被禁之后)
    转:Ubuntu16.04下配置php+vscode+xdebug开发环境
  • 原文地址:https://www.cnblogs.com/mmore123/p/12008658.html
Copyright © 2011-2022 走看看