zoukankan      html  css  js  c++  java
  • 盒模型 块级元素与行内元素 浮动元素

    盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。

    一个元素盒模型的层次从内到外分别为:内边距、边框和外边距

    IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

    块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。

    块级元素,用CSS中的display:inline;属性则变为行内元素

    行内元素,用CSS中的display:block;属性则变为块级元素

    影响:周围元素显示在同一行或换行显示,根据具体情况调整样式

    浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。

    需要浮动的元素可使用CSS中float属性来定义元素的浮动位置,left:往左浮动,right:往右浮动

    浮动元素引起的问题:

    (1)父元素的高度无法被撑开,影响与父元素同级的元素

    (2)与浮动元素同级的非浮动元素会跟随其后

    (3)若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构

    解决方法:

    使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题,对于问题1,添加如下样式,给父元素添加clearfix样式:

    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

    .clearfix{display: inline-block;}  /* for IE/Mac */

  • 相关阅读:
    装箱和拆箱
    Foundation--NSDictionary+NSMutableDictionary
    Foundation--NSArray+NSMutableArray
    Foundation--NSString+NSMutableString
    类的三大特性
    python之双引号和三引号
    js原型属性之二 实例.hasOwnProperty(“属性”)
    js构造函数
    git使用两人提交,冲突的解决
    使用mybatis-generator-core-1.3.2生成dao,mapping跟model等
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/2599565.html
Copyright © 2011-2022 走看看