• web@h,c小总结


    问题0:元素内联元素,行内元素,行内块元素.
            内联: 宽高M,P都有效
            行内元素:无宽高,内容撑开,M,P左右有效
            行内块元素:可设宽高,内容撑开,M,P都有效
            文档流中:marging上下塌陷取最大,左右叠加
            float中:marging上下左右叠加
            浮动后的元素  可以设置宽高
            absolute fixed定位后的元素  可以设置宽高
    悬浮:从无到有的--采用脱离文档流方式
    问题1:行内元素,行内块元素元素有个硬伤-- 有默认的间隙
            分析:行内元素换行写导致的
            解决:同行写/把父级font-size设置为0
            <span>你好啊!</span><span>你好啊!</span>
    问题2:文档流,脱离文档流,半脱离文档流
            文档流:坚守着它原来占据的空间
            定位: 脱离 不脱离
            absolute相对 定位父元素 都没有默认为初始窗口(默认html.body都没定位)
            文档流中子集marging带动父级问题:
            解决办法:
            外部处理
            父级或子元素使用浮动或者绝对定位absolute
            内部处理
            父级overflow:hidden;
            父级设置padding(破坏非空白的折叠条件)
            父级设置border
    问题3:负marging外边距
            本质:移动 只能用未重叠部分 例如 文本(优先级一样)内容过多会文本重叠   其他按优先级遮挡显示
            注意:只能设置负外边距,不能设置负内边距,浏览器会忽略负内边距
            流方向:____________________------------------------------
                文档流:将负边距设置为相对bottom/right时,它并不会把元素向下或右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。
                float:left->marging-right/bottom 会把后面的盒子往里拉
                        right->marging-left/bottom 会把后面的盒子往里拉
    问题4:
    水平居中:
    1. inline元素,父元素 text-align : center
    2. 块级元素有定宽,margin:0 auto;
    3. 块级元素绝对定位,transform : translate(-50%,0);
    4. 块级元素绝对定位,并且知道宽度, margin-left: - 宽度的一半
    5. 块级元素绝对定位,left:0;  right:0; margin:0 auto
    垂直居中
    1. 若元素是单行文本, 则可设置 line-height 等于父元素高度,原理见上面;
    2. 若元素是行内块级元素, 基本思想是父使用display: table-cell;vertical-align: middle;
    3. 使用flex, 在父元素上面添加.parent { display: flex; align-items: center;
    4. 绝对定位的块用 transform: translate(0, -50%)
    5. 绝对定位,并且有定高, margin-top : -高度的一半          注意不要用 margin-bottom,  不会生效的
    6. 设置父元素相对定位(position:relative), 子元素如下css样式:.son{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }
  • 相关阅读:
    link rel=”canonical”标签
    overflow:hidden导致元素高度增加的问题
    python读取字节中的位
    chrome extension 扩展开发中 popup 页面卡顿问题
    chrome extension打开新窗口
    禁止enter回车键出发页面的onsubmit事件
    ArgumentError("subject table for an INSERT, UPDATE or DELETE expected, got Column('id', Integer(), table=<user>, primary_key=True, nullable=False)."
    urllib.error.URLError: <urlopen error [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed: unable to get local issuer certificate (_ssl.c:1076)>
    vite-v3-ts-0到0.8
    执行shell脚本无法访问 logs/catalina.out^M: 没有那个文件或目录
  • 原文地址:https://www.cnblogs.com/3sss-ss-s/p/9902058.html
Copyright © 2020-2023  润新知