css的一些知识点

最新推荐文章于 2024-07-12 14:38:32 发布

@jam果酱

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量314

点赞数 10

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_78993251/article/details/136543082

版权

块级元素一个模块只能放一个元素可以设置宽度和高度容器的100%

行内元素一行可以放多个行内元素不可以设置宽度和高度它本身内容的宽度

行内块元素一行可以放多个行内块元素可以设置宽度和高度它本身内容的宽度

转换为块级元素：display:block;

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

 <style>
        a {
            color: red;
            width: 200px;
            height: 200px;
            display: block;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

运行结果如下

a本来是一个行内元素，变成了块元素

css背景

背景图片固定

background-attachment属性设置背景图像是否固定或随着页面的其余部分滚动

参数作用

scroll 随着对象滚动

fixed 背景图像固定

背景半透明

background:rgba(0,0,0,0.3)半透明

取值范围是0到1

css的三大特性

选择器优先级

继承或者*>元素选择器>类选择器>id选择器>行内样式>!important

div{
color:pink!important;
}//优先选择这个选择器

优先级注意的问题：继承的权重为0

复合选择器会有权重叠加的问题

ul li{
color:green}
li{
color:red}//最后执行结果为红色

盒子模型

边框(border)

border-width 定义边框的粗细，边框样式，边框颜色

语法：border:border-width||border-style||border-color

             border-style: solid; 
            border-style: double;
            border-style: dotted;

边框简写

border:1px solid red

单元格与单元格之间的距离cellspacing="0"

表头thead

注意：没有顺序

上下左右也可以分开来写

border-top border-left border-right border-bottom

padding

padding:10px上下左右均为10

padding:10px 20px上下为10左右为20

padding:10px 20px 30px 上10 左右20 下30

padding:10px 20px 30px 40px 上为10 右20 下30 左40

注意：padding也会改变大小 ,但是如果盒子本身没有指定宽度和高度则不会改变大小

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="index.css">
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }

        div p {
            padding: 20px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>

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


</html>

margin盒子与盒子之间的距离

使用方法和padding一致

外边距典型应用

外边距可以让盒子水平居中，但必须满足两个条件

1，盒子必须指定宽度（width）。

2，盒子左右的往外边距都设置为auto。

margin:0 auto;

左右设置为居中

块级元素：margin:0 auto;行内元素：text-align:center

@jam果酱

关注

10
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
css的一些知识点

语法：border:border-width||border-style||border-color。padding:10px 20px 30px 40px 上为10 右20 下30 左40。行内元素一行可以放多个行内元素不可以设置宽度和高度它本身内容的宽度。行内块元素一行可以放多个行内块元素可以设置宽度和高度它本身内容的宽度。padding:10px 20px 30px 上10 左右20 下30。padding:10px 20px上下为10左右为20。
复制链接

扫一扫