2022.7.8 CSS入门基本规则、布局定位、常用属性

最新推荐文章于 2024-07-19 17:17:26 发布

海涵丶

最新推荐文章于 2024-07-19 17:17:26 发布

阅读量111

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/qq1830882455/article/details/125670906

版权

一、优先级

1.代码是从上往下，所以同一个样式下面的会生效。

2.选择器优先级排序（从低到高）：

通配符（*）、标签选择器（div、span、p、li等）、类选择器（class）、id选择器、行内样式、！important6（例 color: red !important; 注：尽量不要在公共代码用）。

二、继承

默认继承的属性：文字属性，文本缩进（text-indent）、对齐（text-align）、行高（line-height）。

三、练习

要求：

1.一个div标签有4个子元素div，子元素的内容分别为“苹果”、“橘子”、“橙子”、“香蕉”，子元素的宽高为100px，边框为2px，实线，红色。

2.每个子元素的上下边距为100px，子元素的宽高为设置的宽高。

3.第二个子元素鼠标悬浮时，字体为红色，背景颜色为绿色，即使子元素的个数发生改变都满足。

答案：

<!DOCTYPE html>
<html>

<head>
    <style>
        .box div {
            box-sizing: border-box;
            margin: 50px 0;
            width: 100px;
            height: 100px;
            border: solid 2px red;
        }
        
        .box div:nth-child(2):hover {
            color: red;
            background-color: green;
        }
    </style>
</head>
<div class="box">
    <div>苹果</div>
    <div>橘子</div>
    <div>橙子</div>
    <div>香蕉</div>
</div>

<body>

</body>

</html>

四、布局前置知识

1.块级元素的内容宽度是其父元素的100%，高度为内容高度。

2.行内元素的宽高和内容一致无法设置，可设置display属性。

五、浮动 float 布局

1.元素设置 float 属性后就会变为行内块元素（默认没有 margin ，可设置宽高）。

2.浮动元素会脱离文档流不占据文档流空间。

3.浮动元素彼此之间是从左往右排列，宽度超过一行自动换行。

4.在浮动元素前面的元素不浮动时，浮动元素无法上移。

5.浮动元素不会盖住文字，可以设置文字环绕效果。

六、 flex 布局