css的学习(2)

最新推荐文章于 2024-03-02 14:50:52 发布

baidu_41669895

最新推荐文章于 2024-03-02 14:50:52 发布

阅读量364

点赞数

本文链接：https://blog.csdn.net/baidu_41669895/article/details/101614342

版权

CSS的学习

CSS层叠性

所谓层叠性是指多种CSS样式的叠加。

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。

样式冲突，遵循的原则是就近原则。那个样式离着结构近，就执行那个样式。
样式不冲突，不会层叠

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		
		div {
			color: skyblue;
			font-size: 12px;
		}

		div {
			color: hotpink;
		}
        </style>
    </head>
    <body>
    <div> 王可可 是一条狗 </div>  
    1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
    2. 样式不冲突，不会层叠
    </body>
</html>

CSS继承性

所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是：子承父业。

注意：

恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
		div {
			color: pink;
			font-size: 20px;
		}
		
        </style>
    </head>
    <body>
    <div>
    	<p>王思聪</p>
    </div>
    </body>
</html>

CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
       /*  0， 0 ， 0 ， 0  特殊性公式 */
        
        div {  /* 标签选择器  0,0,0,1*/
          color: pink;
        }
        
        :first-child {  /* 伪类选择器 0,0,1,0 */
          color: green;
        }

        .king {  /* 类选择器  0,0,1,0 */
          color: blue;
        }

        #wang {  /* id选择器   0,1,0,0 */
          color: red;
        }

        /* 最大的  不是选择器 */

        div {
          color: orange!important;  /* important就是重要的  级别最高 一旦出现优先执行*/
        }
        </style>
   
    </head>
    <body>
    <div class="king" id="wang" style="color: skyblue"> 王者农药 </div>
    </body>
</html>

盒子模型布局稳定性

什么时候用内边距，什么时候外边距

我的回答是，这两者可以混用，

width > padding > margin

1.margin外边距合并问题，ie6 margin加倍的bug，所以最后使用

2.padding会影响内盒的大小，经常使用加减法

3.width 宽度剩余法，高度剩余法

CSS3盒模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

1.content-box ：盒子模型 width + padding + boder

2.border-box：/盒子模型即为宽度 padding 和boder 都包含再width/

1.默认设置，优先保证内部的内容所占区域不变
2.boder-box  优先保证自己盒子的所占区域不变，对内容进行压缩

盒子阴影

语法格式：

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

1.前两个属性一定要有，其他的可以省略

2.外阴影(outset默认值，内阴影inset

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

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

清除浮动的方法

额外标签法
父级添加overflow属性方法
使用after伪元素清除浮动
使用before和after双伪元素清除浮动

额外标签法

w3c推荐的清除浮动方法

优点:通俗易懂，书写方便

缺点：添加了许多无意义的标签，结构化更差。

父级添加overflow属性方法

BFC（后面详细讲）

可以给父级添加overflow：hidden auto scroll

优点:代码简介

缺点：内容增多的时候，不会自动换行，无法显示溢出元素

使用after伪元素清除浮动

:after 的升级版

优点：符合闭合浮动的思想，结构语义化正确

缺点: ie6不支持after，

使用before和after双伪元素清除浮动

清除浮动：clear:both 块级元素下移，直到两边没有浮动元素

闭合浮动：使浮动元素闭合，使父元素能够包含浮动元素，从而减少浮动影响

CSS的元素的定位属性

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了，比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分类)

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

四种定位总结

定位模式	是否脱标（脱离标准流）	是否使用偏移量	移动位置基准
静态static	不脱标，正常模式	不可以	正常
相对定位relative	不脱标，占有位置	可以	相对与自己移动
绝对定位absolute	脱标，不占位置	可以	相对于定位父级移动
固定定位fixed	脱标，不占位置	可以	相对于浏览器移动

在网页设计中定位运用极为广泛

子级绝对定位，父级就用相对定位

称为子绝父相

baidu_41669895

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的学习(2)

CSS的学习CSS层叠性所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。样式冲...
复制链接

扫一扫