CSS 进阶（盒子模型、浮动、定位、伪类、伪元素）

最新推荐文章于 2024-07-23 14:07:14 发布

LI_0311_

最新推荐文章于 2024-07-23 14:07:14 发布

阅读量411

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/LI_0311_/article/details/130016124

版权

一，盒子模型

盒子的组成

在这里插入图片描述

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

内容的宽度和高度

1，属性：width，height

2，作用：利用 width 和 height 默认设置的是内容区域的宽度和高度

3，常见取值：数字+px

border

1，作用：设置边框的宽度，样式，颜色

2，单个属性

border-width：边界宽度 (数字+px）
border-style：边界样式（实线 solid，虚线 dashed，点线 dotted）
border-color：边界颜色（颜色取值）

3，border属性

使用方式例如： border：10px solid red；

padding内边距

1，作用：设置边框与内容区域之间的距离

2，取值

取值	示例	含义
一个值	padding：10px；	上右下左都为10px
两个值	padding：10px 20px；	上下为10px，左右为20px
三个值	padding：10px 20px 30px；	上为10px，左右为20px，下为30px
四个值	padding：10px 20px 30px 40px；	上为10px，右为20px，下为30px，左为40px

也可单独设置内边距

padding-top：上部填充
padding-bottom：下部填充
padding-left：左部填充
padding-right：右部填充

margin外边距
也可单独设置外边距

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

清除默认边距

浏览器通常会给网页标签设置默认边距，一般不为0，所以当我们些项目前需要清楚默认边距

*{
  margin：0；
  padding：0；
}

二，浮动

在css中用float属性定义浮动，基本语法格式如下

选择器 {
	float:属性值;
}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

浮动详细特性

浮动脱离标准流，脱标不占位置，会影响标准流。浮动只有左右浮动。

1，浮动首先创建包含块的概念（包裹）。就是说，浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
2，一个父盒子里面的子盒子，如果需要所有子元素一行对齐显示，就需要所有子元素都进行浮动。
3，元素添加浮动后，元素会变为块元素。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。
浮动的目的就是为了让多个块级元素同一行上显示。最核心的关键点就是怎么排列的，是否占有位置

清除浮动

选择器{clear:属性值;}   clear 清除

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

内容溢出时处理 overflow

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

三，定位

静态定位
```
选择器 { position：static；}
```
相对定位
```
选择器 { position：relative；}
```
绝对定位
```
选择器 { position：absolute；}
```
固定定位
```
选择器 { position：fixed；}
```

四，伪类

概念

CSS伪类（Pseudo-classes）用于定义元素的特殊状态，用来添加一些选择器的特殊效果。下面我们分四种了解伪类，分别是first-child伪类、超链接伪类、CSS类和伪类、其他伪类。

first-child伪类

概念：first-child 伪类来选择父元素的第一个子元素，选择器匹配作为任何元素的第一个子元素的 <p> 元素。

语法：子元素（选择器）+ 空格 + first-child + {定义的样式}；

看看下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类 伪元素</title>
    <style>
        h4:first-child{color: olivedrab;}
    </style>
</head>
<body>
    <h4>我是html父标签的第一个元素，且为h4标签，所以我是变绿了</h4>
    <h4>我是html标签的第二个元素，所以我不变色</h4>
    <hr>
    <div>
        <h4>我是第一个div标签里的第一个元素，且为h4标签，所以我变绿了</h4>
        <h4>我是第一个div标签里的第二个h4标签内容，所以我不变色</h4>
    </div>
    <hr>
    <div> 
        <p>我是第二个div标签里的第一个元素，但是我是p标签，所以我不变色</p>
        <h4>我是第二个div标签里的第一个h4标签，但我不是div的第一个元素，所以我不变色</h4>
       
    </div>
    
</body>
</html>

五，伪元素

1、概念

CSS 伪元素用于设置元素指定部分的样式。伪对象语言创造的元素不存在在DOM文档中，是虚拟的元素。伪元素代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

语法规制为：选择器 :: 伪元素{属性：值}

CSS中的伪对象如下表：

伪元素	说明
:after	与content属性一起使用，定义在对象后的内容
:before	与content属性一起使用，定义在对象前的内容
:first-letter	定义对象内第一个字符的样式
:first-line	定义对象内第一行的样式

LI_0311_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
CSS 进阶（盒子模型、浮动、定位、伪类、伪元素）

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding）、content（内容）。会发现margin、border、padding是，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
复制链接

扫一扫