zoukankan      html  css  js  c++  java
  • css笔记

    textarea元素固定宽高不要拉伸用

    resize: none;

    背景图片不变形

    background-size:cover;

    CSS中margin-top对父级元素产生作用的问题

    这是在做布局时的一个经典问题。那这个问题是怎么产生的呢?主要是合并margin的问题,红色层(子层)的margin-top与黄色层(父层)相合并,产生了共同的margin-top。

    那如何解决这个问题呢,w3.org给出了思路:

             1、一个浮动的盒与任何其它盒之间的margin不会合并(甚至一个浮动盒与它的流内子级之间也不会)
             2、建立了新的块格式化上下文的元素(例如,浮动盒与’overflow’不为’visible’的元素)的margin不会与它们的流内子级合并
             3、绝对定位的盒的margin不会合并(甚至与它们的流内子级也不会)
             4、内联盒的margin不会合并(甚至与它们的流内子级也不会)
             5、一个流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并,除非兄弟有空隙
             6、一个流内块级元素的top margin会与它的第一个流内块级子级的top margin合并,如果该元素没有top border,没有top padding并且该子级没有空隙
             7、一个’height’为’auto’并且’min-height’为0的流内块级盒的bottom margin会与它的最后一个流内块级子级的bottom margin合并,如果该盒没有bottom padding并且没有bottom border并且子级的bottom margin不与有空隙的top margin合并
             8、盒自身的margin也会合并,如果’min-height’属性为0,并且既没有top或者bottom border也没有top或者bottom padding,并且其’height’为0或者’auto’,并且不含行盒,并且其所有流内子级的margin(如果有的话)都合并了

    简单的来讲,就是

    1. 都用float来定位(有条件要求,适用范围较广)
    2. 为父元素添加overflow不为visiable 的属性 (适用范围极广,推荐使用)
    3. 为元素添加border(一般不用)
    4. 使用绝对定位(适用范围较窄)
    5. 父元素增加padding-top属性(改变尺寸,不建议使用)
  • 相关阅读:
    StandardWrapper ...$$EnhancerByCGLIB$$b9
    Exception in thread "main" java.lang.ClassCastException: $Proxy13
    Mybatis 源码阅读 (一)
    Thread 中yield(), join()
    java 中类型后面三个点的用法
    JAVA 中汉字在不同编码下的字节不同
    Spring FIlterType
    MyBaties学习记录
    MyBaties学习记录Settings参数详解
    JavaScript学习笔记
  • 原文地址:https://www.cnblogs.com/yourself/p/9166252.html
Copyright © 2011-2022 走看看