css进阶

最新推荐文章于 2024-06-01 14:57:49 发布

Luuuuuuzhu

最新推荐文章于 2024-06-01 14:57:49 发布

阅读量228

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/2202_75497210/article/details/130026931

版权

一.盒子模型

盒子模型，顾名思义，就是用来装东西的，它装的东西就是HTML元素的内容。

1.盒子的组成

1.margin外边距

2.border边框

3.padding内边距

4.content内容

2.盒子的大小

默认情况

盒子宽度=内容宽度width+左右填充padding-left padding righit+左右边框border-left+左右边距margin-left

盒子高度=内容高度height+上下填充padding-bottom+上下边框border-top+margin-top

由width和height定义盒子

box-sizing属性值

content-box默认值，在width和height之外绘制元素内外边距和边框

border-box

inherit规定从父元素继承box-sizing属性的值

3.成分分析

margin

eg：margin-top

padding盒子的内边距

可设置背景颜色和图片

padding-top/bottom/left/right

border

也可分开进行设置

当属性不明确时，如border：1px solid

边框颜色与当前元素字体color相同

也可定义

border-width
border-style
border-color

二.浮动

css提供三种传统布局方式，即为盒子如何排列

分为：普通流，浮动，定位

较普通流，浮动有很多优点

如：可让块级盒子进行水平排列，实现两个盒子的左右对齐等

浮动特性

浮动元素会脱标
浮动元素会一行内显示且元素顶部对齐
浮动元素会具有行内块元素的特性

1）浮动元素会脱标

浮动盒子便不再保留原有位置

2）浮动元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        div {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .two {
            background-color: skyblue;
            height: 249px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two">2</div>
    <div>3</div>
    <div class="four">4</div>
</body>

</html>

3）浮动的元素会具有行内元素的特性

任何元素都可以浮动，而后则具有行内块元素像素的特性

1.块级盒子：没有设置宽度时默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
2.行内盒子：宽度默认和内容一样宽，直接设置高宽无效，但是添加浮动后，它的大小可以直接设置
           浮动的盒子中间是没有缝隙的，是紧挨着一起的
即：默认宽度由内容决定，同时支持指定高宽，盒子之间无空隙

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动的元素具有行内块元素特点</title>
    <style>
              span,
        div {
            float: left;
            width: 200px;
            height: 100px;
            background-color: pink;
        }

        
        p {
            float: right;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <span>span1</span>
    <span>span2</span>

    <div>div</div>
    <p>pppppppppppppp</p >
</body>

</html>

三.定位

1）相对定位

相对定位的偏移元素参考的是元素本身，不会使得元素脱离文档流，元素的初始位置占据的空间会被保留

2）绝对定位

绝对定位是相对于已定位的最近的祖先元素，如果的最近的祖先元素没有设置定位，那么它的位置就相对于最初的包含块

3）静态定位

没有特别的设定，不脱离文档流，遵循基本的定位规定，不能通过z-index进行层级分级

4）固定定位

相对于浏览器窗口，脱离文档流，使用fixe的元素不会随窗口的滚动而滚动

四.伪类

display: block;    将元素弄成块级元素
    伪类<a>标签 ：link 没有点击过的样式
               ：visited点击过的样式
               ：hover 鼠标悬停的样式
               ：active 鼠标点击不松的样式

五.类元素

Luuuuuuzhu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
css进阶

绝对定位是相对于已定位的最近的祖先元素，如果的最近的祖先元素没有设置定位，那么它的位置就相对于最初的包含块。相对定位的偏移元素参考的是元素本身，不会使得元素脱离文档流，元素的初始位置占据的空间会被保留。浮动的元素是互相贴靠在一起的，如果父级宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐。没有特别的设定，不脱离文档流，遵循基本的定位规定，不能通过z-index进行层级分级。盒子模型，顾名思义，就是用来装东西的，它装的东西就是HTML元素的内容。3）浮动的元素会具有行内元素的特性。
复制链接

扫一扫