• css基础2


    标准流(normalflow

    ◆元素默认的显示方式都是按照标准流的方式显示
    ◆块级元素默认独占一行显示===》标准流显示方式
    ◆行内元素在一行上显示===》    标准流的显示方式

     

     浮动(float

    ◆可以让块级元素在一行显示。
       ◆设置浮动后该元素不占位置(脱标)
     ◆可以实现模式转化
     ◆设置了浮动的元素,该元素会影响其后面的元素

    注意:
     ◆让块级元素在一行上显示就使用浮动!
     ◆如果要实现模式转换,请使用display

    ◆浮动最初的作用:
        ☞解决文字图片环绕效果。  【包裹性】
         ◆文字不会受浮动的影响。

    关于布局:  圣杯布局  双飞翼布局    流式布局

     清除浮动

    清除浮动指的是:清除浮动对页面布局造成的影响。

    ◆父盒子没有固定高度【必须条件】
      ◆父盒子中的所有子盒子都设置了浮动【必须条件】

    清除浮动的方式:

    clear: left| right| both

    给没有高度的父元素设置overflow:hidden;

    注意:
    ◆如果父元素中有定位的元素,最好不要使用 overflowhidden;

    ◆使用伪元素清除浮动

    定位:

    体现的是元素之间的层级关系。

    定位作用:
     ◆使用定位的方式实现移动元素

    定位分类:
     ☞静态定位(static)
     ☞绝对定位
     ☞相对定位
     ☞固定定位

    静态定位

    position: static;  ===> 静态定位

    ◆静态定位==》标准流下元素的显示方式
    ◆静态定位不能实现移动元素位置。

    绝对定位

    position: absolute;  ==>绝对定位的元素

    绝对定位的元素定位特点:
     ◆如果一个元素设置了绝对定位,如果其父元素没有设置定位,那么该绝对定位的元素是以 浏览器(body)左上角为基准设置定位;如果该绝对定位的父元素设置了除静态定位以外的其他定位,那么该绝对定位的元素会以父元素的左上角为基准设置定位。

     ◆绝对定位的元素不占位置
     ◆绝对定位的元素脱标
     ◆绝定位可以实现模式转化
      绝对定位:  盒子压盒子的效果。

    相对定位

     position: relative;   ===》 相对定位

    ◆相对定位的元素定位特点:

    ☞设置了相对定位的元素只能以相对自己位置设置定位。
      ☞相对定位的元素没有脱标,占位置
    ☞相对定位不能实现元素的模式转换
      ☞子绝父相

     

    固定定位:

    position:fixed;   ===>    固定定位

    ◆固定定位的元素只看浏览器左上角为基准设置定位
    ◆固定定位的元素脱标不占位置
    ◆固定定位可以实现模式转换

     

    绝对定位的元素居中显示:

    盒子居中显示特点:margin: 0  auto;   ===>标准流下的盒子居中显示

    绝对定位的盒子如何居中显示:
    ◆首先通过left移动父元素宽度的一般  left50%;
    ◆通过设置margin-left: - 元素自己宽度一半;

     

    标签包含规范

    ◆段落标签中不能放置标题标签

    ◆段落标签中不能包含div

    ◆段落标签中不能包含列表

    ◆行内元素最好不要包含其他元素【行内元素可以包含行内元素】

    网页布局规范,规避脱标流

    ☞网页布局过程中优先考虑标准流布局。

     ☞然后考虑使用浮动

     ☞最后使用定位

     ☞元素模式转换的过程中,必须使用display。

     

    vertical-align 与行高配合实现图片垂直居中效果。

     

    页面元素隐藏方式:

    ◆overflow:hidden;   将超出部分隐藏
     ◆display:none;     元素隐藏   不占位置
      display: block;    元素显示

    ◆visibility:hidden;   元素隐藏      占位置

     

    Logo内容移除方式:

    logo设置text-indent: -2000px; 

    paddding配合overflowhidden实现移除内容

     

  • 相关阅读:
    LeetCode 1447. Simplified Fractions
    LeetCode 717. 1bit and 2bit Characters
    LeetCode 1725. Number Of Rectangles That Can Form The Largest Square
    LeetCode 2016. Maximum Difference Between Increasing Elements
    LeetCode 二叉树遍历算法题解 All In One
    Top Universities in China Open Source Course Materials All In One
    SQL 查询语句: 字符串正则匹配 All In One
    React memo & useMemo All In One All In One
    webpack 性能优化 All In One
    漫画教程: HTTPS 的工作原理 (中文版)All In One
  • 原文地址:https://www.cnblogs.com/xzq1992/p/6058027.html
Copyright © 2020-2023  润新知