浮动

最新推荐文章于 2023-10-18 21:02:51 发布

运维方便面

最新推荐文章于 2023-10-18 21:02:51 发布

阅读量525

点赞数

本文链接：https://blog.csdn.net/kxindouhao5491/article/details/82118403

版权

网页布局及display属性：

常见网页布局：

标准文档流：

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

标准文档流组成：

块级元素（block）：<h1>…<h6>、<p>、<div>、列表
内联元素（inline）：<span>、<a>、<img/>、<strong>...不换行，没用宽高

注：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立

例如：h1中可以嵌套span元素，但是span中不能嵌套h1元素

display属性：

值	说明
block	能单独一行，元素会被显示为块级元素，该元素前后会带有换行符
inline	能显示宽高。元素会被显示为内联元素，该元素前后没有换行符
inline-block	行内块元素，元素既具有内联元素的特性，也具有块元素的特性，不换行，有宽高
none	设置元素不会被显示

display:block; 【显示为块元素，让行内元素显示宽高，能让行内元素具有块元素的特征】

display:inline; 【显示为行内元素，能让块元素具有行内元素的特征】

display:inline-block; 【吸取行内元素和块元素共同的特征，既能排在一行，不换行，又能显示宽高】

display:none; 【元素在页面上看不见，隐藏了，但是在源代码中依然存在】

总结：

块级元素与行级元素的转变（block、inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）

块元素排在一行的方法：

float属性：

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值。元素不浮动，并会显示在其文本中出现的位置

设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面

例如：

<body>

<div class="layer04">浮动的盒子</div>

</div>

</body>

设置左浮动：依次设置三个图片所在<div>左浮动

.layer01 {

border:1px #F00 dashed;

float:left; }

.layer02 {

border:1px #00F dashed;

float:left; }

.layer03 {

border:1px #060 dashed;

float:left; }

设置右浮动：依次设置layer01和layer02右浮动

.layer01 {

border:1px #F00 dashed;

float:right; }

.layer02 {

border:1px #00F dashed;

float:right; }

inline - block和float的区别：

display: inline-block

①可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

②位置方向不可控制，会解析空格

③IE 6、IE 7上不支持

float

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向

②float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

边框塌陷：

layer04设置宽度和右浮动后，为什么边框塌陷了？

浮动元素脱离标准文档流，父集里面没内容了就剩下了最上面的一个框

怎么解决？

清除浮动

clear属性：

值	说明
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左、右两侧不允许浮动元素
none	默认值。允许浮动元素出现在两侧

例如：

清除文本的左侧浮动：

.layer04 {

border:1px #666 dashed;

font-size:12px;

line-height:23px;

width: 200px;

float: right;

clear:left; }

清除文本的右侧浮动：

只是把它右侧的浮动清除了，并不是清了自己的浮动

.layer04 {

border:1px #666 dashed;

font-size:12px;

line-height:23px;

width: 200px;

float: right;

clear:right; }

清除两侧浮动：

.layer04 {

border:1px #666 dashed;

font-size:12px;

line-height:23px;

width: 200px;

float: right;

clear:both; }

解决父级边框塌陷的方法：

浮动元素后面加空div

<div class="layer04">浮动的盒子……</div>

</div>

.clear{ clear: both; margin: 0; padding: 0; }

太多空元素会造成阅读困难

设置父元素的高度

<div class="layer04">浮动的盒子……</div>

</div>

# father {height: 400px; border:1px #000 solid; }

高度不可控，不灵活

父级添加overflow属性

<div class="layer04">浮动的盒子……</div>

</div>

#father {overflow: hidden;border:1px #000 solid; }

很完美，但是属性太多；不好分别。

overflow属性：

属性值	说明
visible	默认值。内容不会被修剪，会呈现在盒子之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

scroll和auto的区别是在使用auto时，横向如果不需要滚动滚动条就会消失

父级添加伪类after

<div class="layer04">浮动的盒子……</div>

</div>

.clear:after{

content: ''; /*在clear类后面添加内容为空*/

display: block; /*把添加的内容转化为块元素*/

clear: both; /*清除这个元素两边的浮动*/

}

最好的方法，企业里都这么用

清除浮动，防止父级边框塌陷的四种方法优缺点：

浮动元素后面加空div：简单，空div会造成HTML代码冗余
设置父元素的高度：简单，元素固定高会降低扩展性
父级添加overflow属性：简单，下拉列表框的场景不能用
父级添加伪类after：写法比上面稍微复杂一点，但是没有副作用，推荐使用

定位网页元素：

定位：

position属性

static：默认值，没有定位

relative：相对定位

相对自身原来位置进行偏移：偏移设置：top、left、right、bottom

left和top正、负取值的方向：

top向下为正，left向右为正，right和bottom正相反。

先设置第二个盒子右浮动：

再设置第一、第二盒子相对定位：

相对定位元素的规律：

设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响。
设置相对定位的盒子原来的位置会被保留下来，会空下来底下盒子不会占领这个位置。
相对定位之后盒子的层级会提高。
浮动和定位可以同时用在同一个盒子上。

absolute：绝对定位

absolute属性值：偏移设置： left、right、top、bottom

#second {

background-color:#CCF;

border:1px #0000A8 dashed;

position：absolute; }

#second {

background-color:#CCF;

border:1px #0000A8 dashed;

float:right;

position: absolute;

left:0px;

top:0px; }

如果有一个父类就会相对于父类调整自己的位置。

绝对定位元素的规律：

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”（父集元素），优先考虑，为基准进行偏移。
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位--父类元素没有定位。
绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响。
元素位置发生偏移后，它原来的位置不会被保留下来。
绝对定位之后盒子的层级会提高。

绝对定位不设置偏移量：

设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。

在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况

fixed：固定定位

fixed属性值：偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

div:nth-of-type(1) { /*第一个div设置绝对定位*/

width: 100px;

height: 100px;

background: red;

position: absolute;

right: 0;

bottom: 0; }

div:nth-of-type(2) { /*第二个div设置固定定位*/

width: 50px;

height: 50px;

background: yellow;

position: fixed;

right: 0;

bottom: 0; }

body{

height: 1000px;

}

此时：滑动滚动条，红色块会向上走，黄色块不动；因为红的块是绝对定位，它所谓的相对于浏览器窗口来进行定位，是在一屏之内，超过一屏就不是那个地方了；而黄色的块是固定定位，一直都是浏览器的固定位置，超过一屏之后还是那个地方

定位总结：

相对定位的特性：

①相对于自己的初始位置来定位。

②元素位置发生偏移后，它原来的位置会被保留下来。

③层级提高，可以把标准文档流中的元素及浮动元素盖在下边。

相对定位的使用场景：

相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量。

绝对定位的特性：

①绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位。

②元素位置发生偏移后，原来的位置不会被保留。

③层级提高，可以把标准文档流中的元素及浮动元素盖在下边。

④设置绝对定位的元素脱离文档流。

绝对定位的使用场景：

一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景。

固定定位的特性：

①相对浏览器窗口来定位。

②偏移量不会随滚动条的移动而移动。

固定定位的使用场景：

一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等。

z-index属性：

调整元素定位时重叠层的上下位置：

z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方

Css设置元素透明度

属性	说明	举例
opacity:x	x值为0~1，值越小越透明	opacity:0.4;
filter:alpha(opacity=x)	x值为0~100，值越小越透明	filter:alpha(opacity=40);

但是比如：opacity的0.4和filter:alpha(opacity=x)中的40透明度是一样的

网页中的元素都含有两个堆叠层级：

未设置绝对定位时所处的环境，z-index是0；
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定

改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可。

运维方便面

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浮动

网页布局及display属性：常见网页布局：标准文档流：标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式标准文档流组成：块级元素（block）：&lt;h1&gt;…&lt;h6&gt;、&lt;p&gt;、&lt;div&gt;、列表内联元素（inline）：&lt;spa...
复制链接

扫一扫