CSS7 定位与浮动

最新推荐文章于 2022-10-28 14:43:19 发布

ZT黄

最新推荐文章于 2022-10-28 14:43:19 发布

阅读量214

点赞数

分类专栏：前端从0开始快速自学HTML/CSS/Javascript学习

本文链接：https://blog.csdn.net/weixin_44055272/article/details/88661579

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

从0开始快速自学HTML/CSS/Javascript学习

40 篇文章 0 订阅

订阅专栏

块标签div和内联标签spa

初识

这两个都是没有实体意义的标签，为了就是把多个html组合起来形成一个大的盒子，这也就顺应了上一章的盒子模型。
不过这两者的区别说白了就是
块级元素<div>会独占父元素的一行
内联元素<span>不会独占父元素的一行

<body>
<div style="background-color: #FF0000">div1</div>
<div style="background-color: #0000FF">div2</div>
<block style="background-color: #FF0000">block1</block>
<blcok style="background-color: #0000FF">block2</blcok>
</body>

在这里插入图片描述

块级元素block和内联元素inline

1.像div那样独占一行的叫块级元素，像span那样不会独占一行的叫内联元素
（1）块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
（2）内联元素(inline)特性：
和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;并且内联元素底边对其
2.其实还有许多其他的块级元素和内联元素。
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

块级元素和内联元素转换

可以通过Display属性转换为另一种元素。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

例如<a>是内联元素，想要把他转化为块级元素，实现自动换行，也可以实现修改

<body>
<a href="#1" style="display: block">test1</a>
<a href="#2" style="display: block">test2</a>
<a href="#3">test3</a>
<a href="#4">test4</a>
</body>

如何是一个元素既有block特性，又有inline特性

block可以修改标签的长和宽，inline可以使多个inline元素在同一行。对一个block元素这样设置，或者对inline元素这样设置，都会有同样的效果
下面的代码实现了两个div

    <style>
        #t1
        {
            background-color: #00FF00;
            width: 400px;
            height: 500px;
            display: inline-block;
        }
        #t2
        {
            background-color: #FF0000;
            width: 400px;
            height: 500px;
            display: inline-block;
        }


    </style>
</head>
<body>
<div id="t1">test1</div>
<div id="t2">test2</div>
</body>
</html>

dispaly属性的另一个用处是否显示元素

从上面的那个表中我们可以知道如果display设置为none，那么这个元素不会显示
1.与visibility的区别：
display: none不显示元素后不会占据一行，而"visibility: hidden会显示原本的地方是空白的（默认不隐藏，visible）
2.实例

<body>
<p>开始</p>
<p style="display: none">test</p>
<p>上面有一个元素</p>
<p style="visibility: hidden;">test</p>
<p>上面有一个元素</p>
</body>

定位

（定位与对齐密切相关，参考http://www.runoob.com/css/css-align.html）

定位方式position

static和relative还在标准流里，relative和fixed已经脱离了标准流。在标准流i里没有位置

static定位

标准文件流的定位，从上往下走，是块级元素就独占一行，不是就不占。

relative定位

相对与自己static定位，

fixed定位

相对于已经定位的父元素的定位，并且随着滑轮的滑动元素并不改变位置

absolute定位

相对于已经定位的父元素的定位

sticky定位

正常情况下是relative定位，当元素要滑动离开页面时，像fixed一样不动

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

标准流与文字重叠

1.标准流

（1）可以设定元素的位置
left,right,bottom.top

值	描述
auto	默认值。通过浏览器计算边缘的位置。
%	设置以包含元素的百分比计的边位置。可使用负值。
length	使用 px、cm 等单位设置元素的边位置。可使用负值
inherit	规定应该从父元素继承 left 属性的值。

(2)标准流：就是从上往下排列元素，从左往右排列。如果内联元素能够挤在一行，就挤在一行，不行就换行。块级元素则独占一行。

2.z-index属性

z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
http://www.runoob.com/try/try.php?filename=trycss_zindex

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

cursor属性

可以指定鼠标移动到这个元素上的时候显示的样式
http://www.runoob.com/cssref/pr-class-cursor.html

clip裁剪元素

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值

元素内容溢出，overflow属性。

设置了固定的长度宽度后会
1.可用值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

设置元素尺寸

1.可用的值
(1)能设置尺寸的属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

（2）可以设置的值
<1>具体的数值，数值x，em，pt，ex，pc，in，mm，cm；
<2>按照百分比设置

浮动

1.概念：

脱离了标准流（从上到下，从左到右的排列，块级元素站一行，内联元素不会独占一行）

2.浮动四大特点

（1）浮动只能影响他原本标准流之后的元素和自己，不能影响标准流之前的元素
<1>如果浮动元素在原本的位置浮起来，脱离标准流。后面的元素可以占据这个浮动元素原本的位置。但是要在浮动元素会显示在后面占据他位置的元素的上面。
（2）如果想要实现同一个在多个图形在一行的效果，就要全部浮动，并且大小一样
（3）浮动会把元素的类型隐式转化为inline-block，
<1>这样就可以改变宽度和高度。也可以和其他的内联元素在同一行了。
<2>而且如果浮动元素之前元素不是块级元素那么浮动元素就可以跟在前面元素的紧紧的后面。
(4)浮动后，标准流后面的元素占据浮动元素原本的位置。背景会被挡住。但是文字不会被挡住，有可能出现文字在背景之外的现象。

<div style="font-size:50px;width: 250px;height: 200px;background-color: #FF0000;">1号</div>
<div style="font-size:50px;width: 250px;height: 300px;background-color: #00FF00;float: left">2号</div>
<div style="font-size:50px;width: 250px;height:400px;background-color: #0000FF">3号撒旦是否</div>

下图只有二号浮动

在这里插入图片描述

3.浮动的常用参数

值	描述
left	元素向左浮动。
right	元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

4.浮动常用情景

实现这样的效果肯定不能直接使用浮动,把前两个div放在一个父div里，在父div里浮动。
第三个是否浮动都可以实现效果
在这里插入图片描述

<div style="width: 500px;height: 200px">
    <div style="float: left; background-color: #00FF00;width:300px; height:200px" ></div>
    <div style="float: left; background-color: #0000FF;width:200px; height:200px"></div>
</div>
<div style="float: left; background-color: #FF0000;width:500px; height:200px" ></div>

5.浮动与普通的inline-block的区别

浮动和inlineblock都可以实现上面的情景，但有什么区别呢？
（1）inline-block使得各个元素之间有间隙并且难以消除。并且是下边对齐
（2）浮动实现没有间隙，并且上端对齐。

6.不允许浮动 clear

通常我们会有这样的效果，实现文字浮动在图片附近。实现非常简单。因为浮动本身不能覆盖元素的内容

在这里插入图片描述
但是我们不想让一些元素的旁边有浮动效果，例如上面的第二段，可以为他设置属性clear来说明不允许他的左边有浮动效果

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

在这里插入图片描述

ZT黄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS7 定位与浮动

块标签<div>和内联标签<span>初识这两个都是没有实体意义的标签，为了就是把多个html组合起来形成一个大的盒子，这也就顺应了上一章的盒子模型。不过这两者的区别说白了就是块级元素<div>会独占父元素的一行内联元素<span>不会独占父元素的一行<body><div style="background-color...
复制链接

扫一扫