CSS学习笔记2

最新推荐文章于 2024-08-29 21:44:06 发布

Just Yoghurt

最新推荐文章于 2024-08-29 21:44:06 发布

阅读量77

点赞数 1

文章标签： css 学习

本文链接：https://blog.csdn.net/qq_37852350/article/details/125291560

版权

本文详细介绍了CSS中的样式继承、权重计算、长度单位、文档流和盒子模型等核心概念。通过实例展示了如何设置元素样式，以及处理样式冲突和布局问题。重点讲解了盒子模型的组成部分，包括内容区、内边距、边框和外边距，并讨论了overflow属性的用法。此外，还提到了行内元素的盒模型特点以及display属性在调整元素显示类型上的作用。

摘要由CSDN通过智能技术生成

1、样式的继承

为一个元素设置的样式可以应用到它的后代元素上。

2、样式的权重

当使用不同的选择器对同一个元素设置不同的样式时，就产生了样式冲突。产生样式冲突时根据样式的权重来决定使用哪一个样式。

权重：内联样式>id选择器>类和伪选择器>元素选择器>通配选择器>继承的样式

比较优先级需要先把所有选择器的优先级相加再比较。

分组选择器是单独计算的

如果在一个样式后面添加！important，则这个样式的优先级变为最高。

3、长度单位

百分比

<head>
    <style>
        .box1{
            width: 300px;
            height: 300px;
            background-color: brown;
        }
        .box2{
            width:50%;
            height:50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
        </div>
    </div>
</body>

百分比

em:相对于元素的字体大小来计算的；1em = 1font-size。

rem:相对于根元素的字体大小来计算。会随html标签的字体大小的改变而改变。

RGB值： 0-255

HSL值：H-色相 0-360；S-饱和度 0%-100%；L-亮度 0%-100% HSLA：A-不透明度

background-color: rgb(255,0,0);
/*十六进制rgb表示法，#红色绿色蓝色*/
background-color: #ff0;
background-color: hsl(12,100%,100%);

4、文档流

块元素会在页面中独占一行（自上向下垂直排列）。

行内元素只占自身大小，不会独占一行。

5、盒子模型

（1）盒子的组成：

内容区（content）

内边距（padding）

边框（border）

外边距（margin）

style中设置的overflow属性（设置X，y两个方向）：

取值：visible 默认值子元素会从父元素溢出

hidden：溢出内容将会被裁剪

scroll:生成两个滚动条来查看完整内容

auto:根据需要生成滚动条

overflow-x和overflow-y属性和overflow属性取值一样。

（2）存在的问题：

兄弟元素的外边距折叠不需要处理；

父子元素的外边距折叠需要处理。两种除了方案：

1）、在父元素增加一个padding-top属性。

2）、在父元素增加board属性，在子元素增加margin-top属性，相应的height 或者width需要根据情况计算并修改像素数。

<head>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: rgb(44, 145, 106);
            /* padding-top: 100px; */
            border:2px red solid
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: rgb(255, 255, 0);
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="box1">
        <div class="box2"></div>
    </div>

</body>

（3）行内元素的盒模型

行内元素不支持设置宽高。board，padding，margin值对垂直方向的布局没有影响，只对水平方向有影响。

超链接是行内元素。

style元素的属性：display 用来设置元素显示的类型

取值：inline：将元素设为行内元素。

block：将元素设置为块元素。

inline-block：将元素设置为行内块元素。（既可以设置宽度和高度，又可以独占一行）

table：将元素设置为一个表格。

none：元素不在页面中显示。不占位置

visibility：用来设置元素的显示状态。

取值：visible:默认值，正常显示

hidden：不显示，但是占位置

Just Yoghurt

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记2

1、样式的继承为一个元素设置的样式可以应用到它的后代元素上。2、样式的权重当使用不同的选择器对同一个元素设置不同的样式时，就产生了样式冲突。产生样式冲突时根据样式的权重来决定使用哪一个样式。权重：内联样式>id选择器>类和伪选择器>元素选择器>通配选择器>继承的样式比较优先级需要先把所有选择器的优先级相加再比较。分组选择器是单独计算的如果在一个样式后面添加！important，则这个样式的优先级变为最高。3、长度单位百分比百分比
复制链接

扫一扫