CSS中越界问题经典解决方案

8.CSS相关知识

(1)如何解决父元素的第一个子元素的margin-top越界问题

  1)为父元素加border-top: 1px;——有副作用

  2)为父元素指定padding-top: 1px;——有副作用

  3)为父元素指定overflow:hidden;——有副作用

  4)为父元素添加前置内容生成——推荐使用

  .parent:before {

    content: ‘  ‘;

    display: table;

  }

(2)如何解决所有的子元素浮动后父元素高度变为0,且影响后续元素

  1)为父元素指定overflow:hidden;——有副作用

  2)为父元素指定高度:height: xxx;——有局限性

  3)为父元素添加后置内容生成——推荐使用

    .parent:after {

      content: ‘  ‘;

      display: table;

      clear: both;

    }

时间: 2024-10-02 11:14:01

CSS中越界问题经典解决方案的相关文章

CSS中经典的双飞翼布局(

笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局 1.何谓双飞翼布局? 简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是: 左列和右列宽度恒定,中间列的宽度根据浏览器窗口的大小自适应. 2.如何实现双飞翼布局? (1)首先我们要得到如下的布局样式: <div class="container"> <div class="column" id="center_pa

做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致

最近在做一个手机端页面时,遇到了一个奇怪的问题:字体的显示大小,与在CSS中指定的大小不一致.大家可以查看这个Demo(记得打开Chrome DevTools). 就如上图所示,你可以发现,原本指定的字体大小是24px,但是最终计算出来的却是53px,看到这诡异的结果,我心中暗骂一句:这什么鬼! 随后开始对问题各种排查:某个标签引起的?某个CSS引起的?又或者是某句JS代码引起的.通过一坨坨的删代码,发现貌似都不是.我不禁又骂,到底什么鬼!不过中间还是发现了一些端倪:当页面中的标签数量或者文本数

【css】回想下经典的布局

看到这张图相信大多数人都很熟悉,这曾经是一种经典的布局方式,一道经典的面试题,但是随着岁月的流转,时光的交替(颇有一种"天下风云出我辈,一入江湖岁月催"的感慨,哈哈),它一步步逐渐退出了历史舞台,不过在经典,总是有它经典的含义在里面,今天笔者就尝试站在自己认知范围内,重新诠释了下经典,实现的手段则是用了各种可能的方式实现这一经典布局: 1.基于BFC的实现 .layout1 { height: 100px; overflow: hidden } .layout1 .l { height

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow

《精通CSS:高级Web标准解决方案》学习笔记01

对我来说,CSS算得上是一个很难的东西.因为它不像JavaScript那么有趣,对记忆的要求太高,而我对浏览器兼容性.各种CSS Hack真的一点都不感冒.琐碎的.非理论化的知识,真的很烦人呐~ 鉴于国产CSS书籍基本都是辣鸡的现状,我在半年前动用某工作室的购书资金采购了一些技术书籍,这本广受好评的<精通CSS>也在其中.但是在阅读过后我深深的感觉到,如果说CSS本来已经是一种很琐碎的布局知识集合的话,那这本书只能说是更加琐碎了,因为这只是一本纯纯的经验分享.而且随着前端技术的快速发展,明显能

移动端微信公众号开发中问题记录及解决方案

1. 关于字体大小.图片大小.块元素大小的确定,目前一种方法,使用rem,rem的计算方式 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10.8 + 'px'; 其中10.8是设计图的大小除以100,这样就可以直接用设计图中的大小除以100的值. px, em, 和rem的区别: a. px是相对于显示器屏幕分辨率而言的. b. em是相对于对象内文本的字体尺寸,如果当前行内文本

使用Bootstrap.css 中IE下页面加载过慢问题

问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700"); 国内访问不稳定,页面反应慢 解决:将请求结果保存下来,放到本地,重新声明请求 1.请求http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,4

关于CSS中的字体尺寸设置 em rem等

常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的固定值,即是说它们一旦设定,就不会因为其他元素的字体尺寸变化而变化. 相对单位没有一个固定的度量值,而是由父元素尺寸来决定的相对值,它们的尺寸会根据与其相关的元素改变而改变. 下面是对这些单位的一个简单整理: 单位 类型 描述 px Absolute 1个Viewport像素 pt Absolute

css中clear属性的认识

今天在看博客园的页面布局时发现有不少空白的div只有css属性:clear:both. 然后去W3C文档里和百度补脑了一下,总结如下: 这是之前我写的一段测试代码: <div style="height: auto;"> <div id="map"></div> <div style="float: left;width: 50%"> <div id="searchResult&qu