CSS-day2

最新推荐文章于 2020-08-08 14:43:20 发布

Lwangqi

最新推荐文章于 2020-08-08 14:43:20 发布

阅读量131

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_42527428/article/details/101157343

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

day2

[css] 清除浮动的方式有哪些及优缺点？

浮动带来的问题是盒子塌陷问题

什么是盒子塌陷？

外部盒子本应该包裹住内部的浮动盒子，结果却没有。

问题出现的原因

父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。

因为子元素设置了float属性，而float属性会把元素从标准文档流中抽离，直接结果就是外部盒子丢了两个孩子，因为内部没有其它盒子了，所以外部盒子只包裹文本节点内容，却把两个内部盒子扔在外面了。

解决方案

①给父元素单独定义高度
　　优点：简单快速、代码少。
　　缺点：无法进行响应式布局。

②在标签结尾处加空div标签<div style="clear: both"></div>
　　优点：简单快速、代码少，兼容性较高。
　　缺点：增加空标签，不利于页面优化。

③父级定义overflow:hidden
　　优点：简单快速、代码少，兼容性较高。
　　缺点：超出部分被隐藏了，在布局的时候要注意。

④父级定义class="clearfix"，使用after伪类和zoom
　　.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}
　　.clearfix{zoom:1;}
　　优点：写法固定，没有多余结构，兼容性高。
　　缺点：代码多。

[css] 简述下你理解的优雅降级和渐进增强

两个例子：

渐进增强（progressive enhancement）

.transition{
  -webkit-transition: all .5s;
     -moz-transition: all .5s;
       -o-transition: all .5s;
          transition: all .5s;  
}

优雅降级（graceful degradation）。

.transition{ 
　　     transition: all .5s;
　　  -o-transition: all .5s;
  　-moz-transition: all .5s;
 -webkit-transition: all .5s;
}

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

渐进增强观点：

渐进增强观点认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。

优雅降级观点：

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE、Mozilla等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

[css] 对比下px、em、rem有什么不同？

Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size。

px特点：

　　1.IE无法调整那些使用px作为单位的字体大小；

　　2.国外大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

　　3.Firefox能够调整px和em,rem，但是96%以上的中国网民使用IE浏览器（或内核）。

　　px像素（Pixel）。相对长度单位。像素px是相对于显示屏幕分辨率而言的。（引自CSS2.0手册）

　　em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。（引自CSS2.0手册）

　　任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em=16px。那么10px=0.625px。为了简化font-size的换算，需要在css的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px，这样10px=1em，也就是说只需要将原来的px数值除以10，然后换上em作为单位就可以了。

em特点：

　　1.em的值并不是固定的 (相对的父元素字体大小）

　　2.em会继承父级元素的字体大小。

　　所以我们在写CSS的时候如果body选择器中声明font-size=62.5%，然后将原来的px数值除以10，然后换上em作为单位；重新计算那些用em为单位的数值，避免字体大小重复声明。

　　也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em，因为此em非彼em，它因继承#content的字体高变为了1em=12px。

rem特点：

　　rem是CSS3新增的一个相对单位（root em 根em），这个单位引起了广泛的关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的有点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：

　　p{font-size:14px;font-size:875rem;}

　　注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都是用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px，或者两者同时使用。

[css] css常用的布局方式有哪些？

使用BFC隐藏属性

在对需要自适应的元素BFC化，可以实现两栏或三栏布局

两栏布局
<aside class="aside1"></aside>
<article class="main"></article>

// 左边固定宽度，右边自适应
.aside1 {
  float: left;
  margin-right: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  overflow: hidden;
  height: 100vh;
  background-color: lightpink;
}

如果要让两栏之间有空隙，可以给浮动元素设置margin-right值，也可以给自适应的主内容设置margin-left值。但设置margin-left时，需要考虑到aside的宽度。实现三栏布局也是如此，给浮动元素设置margin值会方便一些。

三栏布局
// 这里要注意DOM的书写顺序问题。
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

// 固定宽度
.aside1 {
  float: left;
  margin-right: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
// 固定宽度
.aside2 {
  float: right;
  margin-left: 10px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
// BFC化自适应宽度
.main {
  overflow: hidden;
  height: 100vh;
  background-color: lightpink;
}

使用BFC实现三栏布局时需要注意的是DOM的书写顺序问题。如果将aside2与article交换位置，那么aside2元素会被挤到article元素之下，无法实现三栏自适应布局。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

float + margin

在自适应宽度的元素上设置margin值，margin的值大于或等于固定宽度的值即可。实现思路与使用BFC隐藏属性差不多。缺点：宽度小于aside宽度时，由于宽度不足的原因，三栏布局时会使元素出现掉下去的现象。

两栏布局
<aside class="aside1"></aside>
<article class="main"></article>

.aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin-left: 110px;
  height: 100vh;
  background-color: lightpink;
}

三栏布局
// 注意，DOM顺序不可改变
<aside class="aside1"></aside>
<aside class="aside2"></aside>
<article class="main"></article>

.aside1 {
  float: left;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

.main {
  margin-left: 110px;
  margin-right: 110px;
  height: 100vh;
  background-color: lightpink;
}

.aside2 {
  float: right;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

absolute + margin

// 使用position: absolute时，DOM元素顺序并不重要。给左右两栏定宽，主内容自适应宽度。缺点：侧边栏元素脱离文档流。优点：article元素可先加载。
<article class="main"></article>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

.aside1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.aside2 {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}
.main {
  margin: 0 110px;
  height: 100vh;
  background-color: lightpink;
}

使用absolute + margin实现两栏布局时，只需要删除对应的栏目即可。

圣杯布局

圣杯布局，为什么叫圣杯布局...其实我觉得很奇怪，倒不如叫float + 负margin + relative更贴切一下。实现思路如下

两栏和自适应元素都设置同一方向的浮动(如float: left)
父元素设置左右padding为左右边栏的宽度。
自适应元素设置宽度为100%
左边栏margin-left为负100%，再设置relative，最后通过left属性偏移负的自身宽度。
右边栏margin-left为负自身宽度，再设置relative，最后通过right属性偏移负的自身宽度。

// 与其他布局不同，此布局需要父元素
<div class="parent">
  <article class="main"></article>
  <aside class="aside1"></aside>
  <aside class="aside2"></aside>
</div>

.parent {
  padding: 0 100px;
  // 左右边栏的宽度，可适当缩小以增加每栏之间的距离
}
.main {
  float: left;
  width: 100%;
  height: 100vh;
  background-color: lightpink;
}
.aside1 {
  float: left;
  position: relative;
  left: -100px;
  margin-left: -100%;
  width: 100px;
  height: 100vh;
  background-color: lightseagreen;
}
.aside2 {
  float: left;
  margin-left: -100px;
  position: relative;
  right: -100px;
  width: 100px;
  height: 100vh;
  background-color: lightsalmon;
}

当然了，缺点也是有的。就是在宽度小于两栏宽度时，元素会因为宽度不足而掉下去。

双飞翼布局

双飞翼布局与圣杯布局相似。只不过少了relative与left, right的步骤和共同父元素，主内容元素多了层父元素。实现思路如下：

两栏和自适应元素都设置同一方向的浮动(如float: left)
main元素设置左右margin值，值为左右两栏的宽度。main父元素设置宽度为100%
左边栏margin-left为负100%
右边栏margin-left为负自身宽度

<div class="main-wrap">
  <article class="main"></article>
</div>
<aside class="aside1"></aside>
<aside class="aside2"></aside>

// 以下包含部分sass语法
.main {
  margin: 0 100px;
  height: 100vh;
  background-color: lightpink;
  &-wrap {
    float: left;
    width: 100%;
  }
}
.aside1 {
  float: left;
  width: 100px;
  margin-left: -100%;
  height: 100vh;
  background-color: lightseagreen;
}
.aside2 {
  float: left;
  width: 100px;
  margin-left: -100px;
  height: 100vh;
  background-color: lightsalmon;
}

flex布局

flex布局新出现的概念较多，有兴趣的朋友可以到以下博客看更为详细的教程。使用flex来实现布局，我个人认为是最简单的方式。在移动端上，Android 4.4+以上、IOS 7.0+以上都支持flex布局。而在PC端上，使用flex布局时还是需要考虑一下的，因为到目前为止，IE11仍然只有部分属性支持。

[css] 说说你对css盒子模型的理解

1、什么是css模型？
css的盒模型由里到外包括：content,padding,border,margin. 4部分；
css的盒模型有两种：IE盒模型和标准盒模型。

2、两种盒模型的区别
在IE盒模型中，我们设置的height,width值包含：(content)+填充(padding)+边框(border) 这三个部分，而标准盒模型中height,width值只是content部分；

3、如何设置两种盒模型
通常情况下，在不设置box-sizing时，默认box-sizing:content-box;

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

更详细的盒子模型介绍：谈谈对css盒模型的理解

[css] ::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？

在 CSS 中伪类一直用 : 表示，如 :hover, :active 等

伪元素在CSS1中已存在，当时语法是用 : 表示，如 :before 和 :after

后来在CSS3中修订，伪元素用 :: 表示，如 ::before 和 ::after，以此区分伪元素和伪类

由于低版本IE对双冒号不兼容，开发者为了兼容性各浏览器，继续使使用 :after 这种老语法表示伪元素

综上所述：::before 是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法

::before指插入的内容出现在其他内容前，:after相反

[css] position:fixed;在ios下无效该怎么办？

IOS环境下固定定位position:fixed带来的问题与解决方案

ios下position:fixed失效的问题解决

如何解决IOS 下固定定位fixed 失效问题

Lwangqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-day2

day2[css] 清除浮动的方式有哪些及优缺点？浮动带来的问题是盒子塌陷问题什么是盒子塌陷？外部盒子本应该包裹住内部的浮动盒子，结果却没有。问题出现的原因父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto，就会出现这种情况，如果父元素不包含任何的可见背景，这个问题会很难被注意到。 ...
复制链接

扫一扫