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 */

  • 相关阅读:
    算法:最大回文子串问题
    Python HTTP库requests中文页面乱码解决方案!
    Python:默认参数
    在博客园开通个人博客了
    JQ选择器
    C# 接口
    C# 微信公众平台开发(2) 微信菜单
    C# 微信公众平台开发(1) 服务器配置
    博客园开博第一天!记录生活,扬帆启航!
    JavaScript判断、循环、Map、Set
  • 原文地址:https://www.cnblogs.com/dtdxrk/p/2599565.html
Copyright © 2011-2022 走看看