网站关键词百度搜不到,开展网站建设服务,网站title标签内容怎么设置,南沙网站建设优化前言一、浮动1、使盒子浮动起来2、清除浮动3、清除浮动元素周围的盒子#xff08;1#xff09;clearfix 小技巧#xff08;2#xff09;使用 overflow#xff08;3#xff09;display: flow-root 二、定位1、定位有哪些2、top、bottom、left 和 right3、定位上下文4、介绍… 前言一、浮动1、使盒子浮动起来2、清除浮动3、清除浮动元素周围的盒子1clearfix 小技巧2使用 overflow3display: flow-root 二、定位1、定位有哪些2、top、bottom、left 和 right3、定位上下文4、介绍 z-index5、滚动索引 三、多列布局1、column-count2、column-width3、给多列增加样式4、设置 break-inside 四、响应式设计1、媒介查询2、灵活网格3、现代布局技术1多个列2伸缩盒3CSS网格4响应式图像5响应式排版6视口元标签 总结 前言
由于有很多知识非常符合直觉或者和其他语言有通用性因此个人觉得不需要全部记下来本篇只记录一些个人觉得需要注意或单独记忆的知识点。
同时为了提高效率和减少对不重要内容的时间投入会考虑更加精简。
相比前两篇本篇更详细记录了浮动、定位和多列布局。同时记录了响应式设计 一、浮动
float属性
1、使盒子浮动起来
在 CSS 规则中添加float属性比如
.box {float: left;margin-right: 15px;width: 150px;height: 100px;border-radius: 5px;background-color: rgb(207,232,220);padding: 1em;
}浮动元素会脱离正常的文档布局流并吸附到其父容器的左边。在正常布局中位于该浮动元素之下的内容此时会围绕着浮动元素填满其右侧的空间
margin-right把其他文字从浮动元素边推走了
我们可以在浮动元素上应用 margin将文字推开但不能在文字上应用 margin 将浮动元素推走。这是因为浮动的元素脱离了正常文档流紧随其后的元素排布在它的“后方”。
2、清除浮动
一个浮动元素会被移出正常文档流且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响我们需要 停止 它这是通过添加 clear 属性实现的。
例如向浮动元素下方的第二个段落添加 cleared 类然后向 CSS 文件中添加以下样式
.cleared {clear: left;
}应该看到第二个段落已经停止了浮动不会再跟随浮动元素排布了
clear 属性接受下列值
left停止任何活动的左浮动right停止任何活动的右浮动both停止任何活动的左右浮动
3、清除浮动元素周围的盒子
如果存在一个盒子 同时 包含了很高的浮动元素和一个很短的段落会出现下面的问题
div classwrapperdiv classboxFloat/divpLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate./p
/div.wrapper {background-color: rgb(79,185,227);padding: 10px;color: #fff;
}这是因为浮动元素处于正常文档流之外停止紧随其后元素的浮动并不像之前那样奏效。如果你想让盒子联合包住浮动的项目以及第一段文字同时让紧随其后的内容从盒子中清除浮动这就是一个问题。
下面有三种方法可以处理这种问题前两种在所有浏览器中均可以奏效虽然看上去有点“小技巧”最后一种是可以处理问题的较新的解决方案。
1clearfix 小技巧
传统上这个问题通常由所谓的 “clearfix 小技巧” 解决其过程为先向包含浮动内容及其本身的盒子后方插入一些生成的内容并将生成的内容清除浮动
.wrapper::after {content: ;clear: both;display: block;
}这与在浮动盒子后手动添加诸如 div 的 HTML 元素并设置其样式为 clear:both 是等效的
效果如下
2使用 overflow
一个替代的方案是将包裹元素的 overflow 属性设置为除 visible 外的其他值
.wrapper {background-color: rgb(79,185,227);padding: 10px;color: #fff;overflow: auto;
}这个例子之所以能够生效是因为创建了所谓的 块格式化上下文BFC。可以把它看作页面内部包含所需元素的一小块布局区域。如此设置可以让浮动元素包含在 BFC 及其背景之内。大部分情况下这种小技巧都可以奏效但是可能会出现莫名其妙的滚动条或裁剪阴影这是使用 overflow 带来的一些副作用。
3display: flow-root
一个较为现代的方案是使用 display 属性的 flow-root 值。它可以无需小技巧来创建块格式化上下文BFC在使用上没有副作用
.wrapper {background-color: rgb(79,185,227);padding: 10px;color: #fff;display: flow-root;
}二、定位
定位允许你从正常的文档流布局中取出元素并使它们具有不同的行为例如放在另一个元素的上面或者始终保持在浏览器视窗内的同一位置。本节解释的是定位 (position) 的各种不同值以及如何使用它们。
position属性
1、定位有哪些
静态定位position: static元素默认属性指放在文档布局流的默认位置相对定位position: relative允许我们相对于元素在正常的文档流中的位置进行移动包括将两个元素叠放在页面上。这对于微调和精准设计非常有用绝对定位position: absolute将元素完全从页面的正常布局流中移除类似将它单独放在一个图层中。我们可以将元素相对于页面的html元素边缘固定或相对于该元素的最近被定位祖先元素。绝对定位在创建复杂布局效果时非常有用例如通过标签显示和隐藏的内容面板或者通过按钮控制滑动到屏幕中的信息面板固定定位position: fixed与绝对定位类似但它是将一个元素相对浏览器视口固定而不是相对于另外一个元素。这在创建类似在整个页面滚动过程中总是处于屏幕的某个位置的导航菜单时非常有用粘性定位position: sticky 一种新的定位方式它会让元素先保持和 position: static 一样的定位当它的相对视口位置达到某一个预设值时它就会像 position: fixed 一样定位
2、top、bottom、left 和 right
top, bottom, left, 和 right 来精确指定要将定位元素移动到的位置。
需要注意的是在相对定位中这些值相当于向反方向给定一个推力比如指定 top: 30px会像是有一个力推动框的顶部使它向下移动 30px
在绝对定位中他们指定元素应距离每个包含元素的边的距离而不是指定元素应该移入的方向。所以在这种情况下 指定top: 30px我们说的绝对定位元素应该位于从“包含元素”的顶部 30px
3、定位上下文
如果所有的父元素都没有显式地定义 position 属性那么所有的父元素默认情况下 position 属性都是 static。结果绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸并且html元素也被包含在这个容器里面。简单来说绝对定位元素会被放在html元素的外面并且根据浏览器视口来定位。
可以通过改变定位上下文来更改绝对定位的元素的相对位置元素。做法就是设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素如果要设置绝对定位元素的相对元素那么这个元素一定要包含绝对定位元素
4、介绍 z-index
当元素开始重叠可以通过z-index属性更改堆叠顺序。
默认情况下定位的元素都具有 z-index 为 auto实际上为 0。较高的值将高于较低的值比如设置为 1 就会在更上面
需要注意z-index 只接受无单位索引值
5、滚动索引
position: sticky 的另一种有趣且常用的用法是创建一个滚动索引页面。在此页面上不同的标题会停留在页面顶部。
这个需要用的时候再去专门查询吧。 三、多列布局
多列布局声明提供了一种多列组织内容的方式正如你在一些报纸中看到的那样本节记录怎么使用这一特性。
1、column-count
使用column-count 将创建指定数量的列
.container {column-count: 3;
}2、column-width
使用column-width浏览器将按照你指定的宽度尽可能多的创建列任何剩余的空间之后会被现有的列平分。这意味着你可能无法期望得到你指定宽度除非容器的宽度刚好可以被你指定的宽度除尽。
3、给多列增加样式
这样创建的列无法单独的设定样式。不存在让单独某一列比其他列更大的方法同样无法为某一特定的列设置独特的背景色、文本颜色。
有两种方式更改列的样式
column-gap改变列间间隙column-rule在列间加入一条分割线
column-rule 是 column-rule-color 和 column-rule-style的缩写接受同 border 一样的单位
例如
.container {column-count: 3;column-gap: 20px;column-rule: 4px dotted rgb(79, 185, 227);
}效果如下 值得一提的是这条分割线本身并不占用宽度。它置于用 column-gap 创建的间隙内。
4、设置 break-inside
break-inside属性定义页面、列或区域发生中断时候的元素该如何表现。
break-inside: auto;元素可以中断break-inside: avoid;元素不能中断 四、响应式设计
这节会涉及到在建立响应式站点的时候你可能会用到的各式 Web 平台的特色功能。
1、媒介查询
媒介查询允许我们运行一系列测试例如用户的屏幕是否大于某个宽度或者某个分辨率并将 CSS 选择性地适应用户的需要应用在样式化页面上。媒介查询也是响应式设计新兴起来的原因。
例如下面的媒体查询进行测试以知晓当前的 Web 页面是否被展示为屏幕媒体也就是说不是印刷文档且视口至少有 800 像素宽。用于.container选择器的 CSS 将只会在这两件前提存在的情况下应用。
media screen and (min-width: 800px) {.container {margin:1em 2em;}
}可以在一张样式表上加入多条媒体查询调整整个页面或者部分页面以达到适应各式屏幕尺寸的最佳效果。
媒体查询以及样式改变时的点被叫做断点breakpoints。
使用媒体查询时的一种通用方式是为窄屏设备例如移动设备创建一个简单的单栏布局然后检查是否是大些的屏幕在你知道你有足够容纳的屏幕宽度的时候开始采用一种多栏的布局。这经常被描述为移动优先设计。
2、灵活网格
响应式站点不只是在断点之间改变它们的布局它们是建立在灵活网格上的。一个灵活网格意味着你不需要适配每个可能使用的设备尺寸。
早年间进行响应式设计的时候我们唯一的实现布局的选项是使用float。灵活浮动布局是这样实现的让每个元素都有一个作为宽度的百分数而且确保整个布局的和不会超过 100%。在他对于液态网格文章的原文中Marcotte 详细描述了一种布局的法则通过使用像素并把布局转化为百分数的方式设计。
target / context result例如如果我们的预期栏尺寸为 60 像素而且它所在的上下文或者容器为 960 像素我们在将零点二的空间移动到右边以后用 960 去除 60得到我们能够使用在我们的 CSS 上的值
.col {width: 6.25%; /* 60 / 960 0.0625 */
}
3、现代布局技术
1多个列
也就是之前提到的column-count和column-width
2伸缩盒
也就是弹性盒子 flex 相关内容
3CSS网格
也就是 grid 网格相关内容
4响应式图像
最简单的一个是诸如设定图像max-width: 100%但弊端就是图像有可能会显示得比原始尺寸少很多浪费带宽。或希望在移动端更小尺寸时展示不同的图片也无法实现。
使用picture元素和img srcset和sizes 特性解决了这两个问题
可以在 HTML 章节的响应式图片一节仔细看
5响应式排版
例如我们只想在大些的屏幕上有个超大的标题那我们先弄个小点的标题再使用媒体查询在我们知道用户使用至少1200px的屏幕的时候拿大些的尺寸覆写它。
media (min-width: 1200px) {h1 {font-size: 4rem;}
}一个有趣的方式是使用视口单位vw来实现响应式排版。1vw等同于视口宽度的百分之一即如果你用vw来设定字体大小的话字体的大小将总是随视口的大小进行改变。
问题在于当做上面的事情的时候因为文本总是随着视口的大小改变大小用户失去了放缩任何使用vw单位的文本的能力。所以你永远都不要只用 viewport 单位设定文本。
这里有一个解决方法它使用了calc()如果你将vw单位加到了使用固定大小例如em或者rem的值组那么文本仍然是可放缩的。基本来说是vw加在了放缩后的值上。
h1 {font-size: calc(1.5rem 3vw);
}6视口元标签
如果你看看一张响应式页面的 HTML 源代码你通常将会在文档的head看到下面的meta标签。
meta nameviewport contentwidthdevice-width,initial-scale1这个元标签告诉移动端浏览器它们应该将视口宽度设定为设备的宽度将文档放大到其预期大小的 100%在移动端以你所希望的为移动优化的大小展示文档。
你应该在你的文档头部总是包含上面那行 HTML
和视口元标签一起你可以使用另外几个设定但大体说来上面那行就是你想要使用的
initial-scale设定了页面的初始缩放我们设定为 1height特别为视口设定一个高度minimum-scale设定最小缩放级别maximum-scale设定最大缩放级别user-scalable如果设为no的话阻止缩放
应该避免使用minimum-scale、maximum-scale尤其是将user-scalable设为no。用户应该有权力尽可能大或小地进行缩放阻止这种做法会引起访问性问题。 总结
只记录了 CSS 的部分内容
