!
也想出现在这里? 联系我们
广告区块

CSS(清除浮动)

清除浮动

overflow: hidden

  1. overflow溢出隐藏
  2. 清除浮动
  3. 解决margin-top的传递问题

(面试题)

  • 单行文本出现省略号(4个必备条件,缺一不可)
    • width 宽度(不写宽度,默认继承父元素宽度)
    • overflow: hidden;(溢出隐藏)
    • white-space: nowrap;
    • text-overflow: ellipsis;文字隐藏的方式,以省略号的方式隐藏
  • 多行文本出现省略号(必备条件,主要应用在移动端)
    • display: -webkit-box; 弹性盒模型
    • -webkit-box-orient: vertical;规定元素的排列方式:垂直排列
    • -webkit-line-clamp: 2;:文字的行数(自定义)
    • overflow: hidden;溢出隐藏
  • 多个元素在一行显示的方法
    • display: inline;
    • display: inline-block;
    • float: left/right;

display: inline-block;元素的特点

  • 盒子横向排列
  • verticle-align属性会影响inline-block元素,值可能会设为top
  • 需要设置每一列的宽度
  • 如果HTML源码中元素间有空格,列与列之间会产生空隙
    • 解决方法
      • 如果元素添加了dispay: inline-block;,父元素增加一个属性font-size: 0;,同时在元素本身增加font-size属性进行覆盖
  • display:inline-block;在IE6/7下不兼容的解决方法
    • 增加display: inline; zoom: 1;属性

IE7下块元素兼容display: inline-block;写法?

  • 直接让块元素设置为内联对象(设置属性 display: inline;),然后触发块元素的layout(如:zoom: 1;等)。
  • 兼容各浏览器的代码如下:div {display: inline-block; *display: inline; *zoom: 1;}

FLOAT浮动

float元素的特点

  1. 在一行显示
  2. 设置属性值为left时,浮动元素依次从父级盒子的左侧向右排列
  3. 自动具有块级元素的属性,不需要添加display: block;
  4. 脱离文档流
  5. 子元素不会继承浮动属性
  6. 浮动元素下面的元素不能识别浮动元素的高度和位置,占据浮动元素的位置
  7. 所有的元素都可以使用浮动属性

文档流和脱离文档流

  • 文档流:元素排版布局过程中,元素自动从左往右,从上往下的流式排列。
  • 每个非浮动元素块级元素独占一行,浮动元素按规则浮在行的一端。当前行容量满则另起一行浮动。
  • 内联元素不会独占一行
  • 几乎所有元素(包括块级、内敛和列表元素)均可生成子行,用于摆放子元素
  • 标准文档流等级:分为两个等级,块级元素和行内元素
  • 脱离文档流:文档流内的正常元素识别不到这个元素(脱离文档流的元素相当于平行漂浮于文档流之上)

float元素产生的影响

  1. 父元素设置背景颜色background-color不起作用
  2. 父元素设置内边距属性padding不会被撑开
  3. 父元素设置边框属性border不会被撑开

清除浮动FLOAT

清除浮动的方法

  1. 给浮动元素的父级元素添加固定的高度height(不推荐)
  2. 给浮动元素的父级元素添加溢出隐藏属性overflow: hidden;
  3. 给最后一个浮动元素后面添加一个块级元素,这个块级元素带有clear: both;属性
    • clear清除浮动元素对文档流内元素的影响(可以让文档流内的元素识别到浮动元素的高度)
    • left清除floatleft的影响
    • right清除floatright的影响
    • both清除float所有的影响
    • inherit从父级元素上继承该属性值
  4. clearfix清除浮动(固定代码)
    • 利用伪元素:after清除浮动必备条件,缺一不可
    • display: block;确保元素是一个块级元素
    • clear: both;不允许左右两边有浮动对象
    • content: '';伪元素:brfore/:after自带的属性,如果不写,伪元素不起作用
    • 写全的样式属性;不是必备条件
    • height: 0; 防止在低版本浏览器中默认height: 1px;的情况,用height: 0;去覆盖
    • font-size: 0; 字体大小
    • overflow: hidden; 溢出隐藏
    • visibility: hidden; 让所有可见性的元素隐藏

overflow: hidden;visibility: hidden;有什么区别?

(面试题):如何让一个元素消失?

  1. opacity: 0;[0-1] 透明度
  2. display: none; 隐藏
  3. widht/height/line-height + overflow:宽/高/行高 + 溢出隐藏
  4. visibility: hidden;让所有可见性的元素隐藏

clear: both;的特点

  1. 元素需要是块级元素
  2. 元素不能带有浮动属性
  3. 元素必须放在最后一个浮动元素的后面
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索