震惊 CSS浮动定位快速入门！！！

李恩泽的博客
167 阅读6分钟

Css浮动

通过浮动操作float，可以使dom元素脱离文档流，在页面上具备居左、中和右的效果特点

移动后的元素，会导致其他元素随之重新排列在页面上的顺序位置，就相当于你不在的位置，别人会抢占

浮动通常利用与图像元素，或是对元素进行布局

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

如果浮动方向空间不足，元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止

  • 浮动常见属性
float:none;  /* 不使用浮动 */
float:left;  /* 靠左浮动  */
float:right; /* 靠右浮动  */
  • 清除浮动
clear: both;

元素浮动之后，周围的元素会重新排列，为了避免这种情况，可以为浮动的元素使用clear属性

clear属性指定元素两侧不会出现浮动元素，也实现了独占一行的额效果

Css元素溢出

当子元素的大小超过所承载的父元素大小时，此时需要设置父元素对于溢出的子元素显示方式

<p>123456789</p>

p{
	width:10px; 
	border: 1px solid blue;
	overflow:auto;
}

可以通过overflow属性进行溢出属性的控制，可选项有如下这些

  • visible: 默认值，内容不会被修剪，会呈现在元素框之外
  • hidden: 内容会被修剪，并且其余内容是不可见的
  • scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
  • auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

Css-Display

display属性可以控制标签元素的类型显示方式，常见的有如下选项

p{
    display: inline;
}

  • none: 元素不会显示，也就是藏起来

  • block: 元素将显示为块级元素，此元素前后会带有换行符

  • inline: 此元素被显示为内联元素，元素前后没有换行符

  • inline-block: 此元素将成为行内块级元素，是取消了换行的块级元素

  • list-item: 元素作为列表显示

  • table: 元素作为块级表格来显示（类似 <table>），表格前后带有换行符

  • inline-table: 元素作为内联表格来显示（类似 <table>），表格前后没有换行符

  • table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

  • table-caption: 此元素会作为一个表格标题显示（类似 <caption>）

每个元素都有一个默认 display 值，可以覆盖

除了display: none可以隐藏元素之外，也可以使用visibility: hidden，但是visibility: hidden隐藏的元素还会在文档流中占据自己的一席之地，虽然元素被隐藏，但是还会影响实际的布局效果

.hidden{
    visibility: hidden;
}

Css定位

先理解一下文档流？

​ 文档流，是指每个标签的元素盒子按照html标签编写的顺序依次从上到下，从左到右排列

​ 块元素占一行，行内元素在一行之内从左到右排列

​ 先写的先排列，后写的排在后面，每个盒子都占据自己的位置

CSS定位通过position属性进行规定，可选项有如下这些

h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}

static

属于css的默认值，默认定位方式，遵循标签元素的块、行特点

从上到下，从左到右

relative

是相对定位方式，会按照元素的原始位置对该元素进行移动

可以通过方向移动其位置，并且原本位置也会保留，不会被周围元素侵占

absolute

绝对定位元素，当前元素会脱离文档流，相当于飘起来了

可以通过方向移动其位置，原本位置会被周围元素侵占，而他本身将会覆盖在侵占元素之上

设置了absolute的元素将会基于当前元素的父元素进行偏移，而且这个父元素还是设置过定位的

如果父元素均未设置position属性，那么将相对于body元素进行位置偏移

fixed

固定定位元素，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行定位

不管页面如何滚动，都会固定在页面的位置，比如导航条

sticky

是一种新的定位方式，相当于包含fixed与relative结合，元素最初会被处理为相对定位

当元素距离浏览器窗口一定位置时，可以使当前元素固定在一定位置，成为固定定位

其余情况，则还可以跟随窗口滚动

设置了定位的元素的偏移方式

  • top:

    定位元素的上外边距边界与其包含块上边界之间的偏移

  • bottom

    定位元素下外边距边界与其包含块下边界之间的偏移

  • right:

    定位元素右外边距边界与其包含块下边界之间的偏移

  • left:

    定位元素左外边距边界与其包含块下边界之间的偏移

除此之外，还可以通过z-index属性设置元素的堆叠属性，当两个或多个元素因为定位导致叠在一起时

z-index

​ 设置堆叠元素的层级，数值越大，优先级越高，未设置，默认按照最后的html代码进行展示

Css伪类

css伪类可以定义元素的特殊状态，比如设置鼠标悬停在元素上时的样式，或者控制连接访问前后的样子

  • 基本语法
selector: link{
  property: value;
}

锚伪类

可以控制连接在不同的访问情况下的显示样式

  • 未访问的连接
a:link {
    color: red;
    /* 没访问过，是红色*/
}
  • 访问过的连接
a:visited {
    color: blue;
    /* 访问过，就会变成蓝色*/
}
  • 悬停在元素处
a:hover {
    color: gray;
    /* 鼠标飘到元素上，就会变成灰色*/
}
  • 已选择的连接
a:active {
 	 color: green;
    /* 你选择的连接，会变成绿色，并且绿色会笼罩你*/
}

first-child

匹配元素是另一个元素的第一个子元素

任何一个子元素，并且是第一个，且是p标签，将被如下规则匹配

p : first-child {
  color: blue;
}

比如如下的html，所有第一个元素为p的，将会生效上面的效果

<div>
	<a href="https://baidu.com">因为有我，所以不变</a>
	<p>不变</p>
</div>

<p>不变</p>
<div>
	<p>变变变</p>
	<div>
		<p>变变变</p>
    </div>
</div>
<p>不变</p>
avatar
文章
阅读
粉丝