css三大特性：1.继承性、2.层叠性等

最新推荐文章于 2023-10-12 21:13:58 发布

偏执带点小放纵

最新推荐文章于 2023-10-12 21:13:58 发布

阅读量436

点赞数

文章标签： css三大特性

本文链接：https://blog.csdn.net/weixin_45562774/article/details/100171011

版权

css三大特性

继承性
层叠性
优先级（权重）

1.继承性

子元素可以继承父元素的样式，也就是包含在内部的标签可以拥有外部标签的样式
在css中只有以text-、font-、color、line-的属性才可以被继承
继承不仅仅局限于子元素，后代元素都可以继承
特殊性：
- a标签：字体颜色和下划线是不能被继承的，必须单独的设置a的颜色和下划线
- h标签：字体大小和粗细也不能被继承，需要单独设置

<style>
    p{
        /* text-decoration:underline; */
        color:chocolate;
    }
    a{
        text-decoration: none;
        color:cyan;
    }
    div{
        font-weight: lighter;
    }
    </style>
</head>
<body>
    <P>我是p<a href="">超链接</a></P>
    <p>我是p<b>我是b</b></p>
    <div>
        <h3>我是h3</h3>
    </div>
</body>

效果
[外链图片转存失败(img-ZTQYMVAP-1567222895235)(./1559963093217.png)]

2.层叠性

两种选择器设置同一个样式到同一个元素身上，（权重相同时）那么后面的样式会覆盖前面的样式，相同的样式被覆盖，不同的样式会叠加
效果一：

<style>
    [name]{
          color:green;
    }
    .box{
        color:red;
        text-decoration:underline;
    }
    </style>

<body>
    <div class="box" name="div">我是div</div>
</body>

[外链图片转存失败(img-SyVshiVf-1567222895237)(./1559962812912.png)]

效果二：

 .box{
        color:red;
        text-decoration:underline;
    }
    [name]{
          color:green;
    }
    
<body>
    <div class="box" name="div">我是div</div>
</body>

[外链图片转存失败(img-dF1rQu1W-1567222895239)(./1559962950376.png)]

###3.优先级（权重）（面试题）

!important>行内样式>id选择器>类选择器/属性选择器>标签选择器>通配符选择器>继承
注意：!important 写在；前面,而且！不能省略

##html元素分类

根据css的规定，每一个元素都有一个display属性，用来决定该元素的类型，每个元素都有默认的display属性

1.块元素（display：block；）

特点：独占一行，自上而下排列
可以设置宽高、padding、margin以及盒子模型的相关css属性
在不设置宽时，其宽度会自动填满整个父元素的宽度，高度由本身内容决定
可以嵌套嵌套元素
|标签|作用|
|–|--|
|div|大容器|
|h1~h6|标题|
|p|段落|
|ul>li|无序列表|
|ol>li|有序列表|
|dl>dt>dd|自定义列表|
|form|表单|
|table|表格|
|pre|预格式化|

2.行内元素（display：inline）

特点：
- 不独占一行，在一排显示，从左到右排列，到达父元素的最大宽度时，自动折行
- 不能直接设置宽度和高度
- 高度和宽度由本身内容决定的
- 在编辑代码时行内元素出现回车或者换行时会默认有间隙
  - 解决办法一：把所有行内元素放到一行
  - 解决办法二：给行内元素加注释（注释法）
  - 解决办法三：给行内元素的父元素设置font-size：0；因为行内元素（子元素）会继承父元素的样式，所以我们要单独给子元素设置字体大小（最常用）
  - 基线对齐问题
    - 解决办法是给元素加vertical-align 属性
    -
    |标签|作用|
    |–|--|
    |span|小容器|
    |b|加粗|
    |strong|粗体字|
    |i|斜体|
    |em|斜体|
    |sub、sup|下标、上标|
    |ins|插入字|
    |del|删除字|
    |a|超链接|
    |small|小字|

###３．行内块元素（display：inline-block；）

特点：
- 不独占一行，从左到右排列，到达父元素的最大宽度时，会自动折行
- 可以设置宽高，以及css所有的盒子模型的所有属性，
- 在不设置高宽时，高宽会由本身决定
- 间隙问题
- 基线对齐问题
  |标签|作用|
  |–|--|
  |img|图片|
  |input|输入框|
  |textarea|文本域|
  |select|下拉列表|
  |button|按钮|

块元素、行内元素和行内块元素的相互转换

通过改变display属性值
- 块元素： display:block
- 行内元素：display：inline；
- 行内快元素：display：inline-block
- 让元素隐藏：display:none
  ###css 盒子模型
  ####1.padding：内边距
padding是定义元素内容与元素边框之间的距离（相当于我们快递盒子里面的白色填充物）
####2.margin：外边距

####3.margin常见问题（面试题）

margin塌陷问题
- 现象：一个父元素里面嵌套了一个子元素，给子元素加上margin-top值，想让子元素与父元素有一个距离，但是子元素没有和子元素分离反而子元素把margin-top值传递给了父元素，结果父元素跟着子元素一起下移
- 解决方法一：给父元素加overflow：hidden代表溢出隐藏
- 解决办法二：将子元素的margin-top改写成父元素的padding-top。这样父元素的高度会多出一个padding-top的值，所以我们还需要手动的将父元素的高度减去padding-top的值
margin重叠
- 现象：上下垂直排列两个块元素，我们给上面的元素设置了margin-bottom，下边的元素设置了margin-top，这样会出现margin值重叠，而且是设置的最大的边距值是两个元素之间的间距
- 解决办法：只给其中一个元素设置margin值

盒子模型计算公式

盒模型的宽度等于内容宽度+左右padding+左右border
盒模型的高度等于内容高度+上下padding+上下border
盒子模型的高度和宽度与margin无关

偏执带点小放纵

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css三大特性：1.继承性、2.层叠性等

css三大特性继承性层叠性优先级（权重）1.继承性子元素可以继承父元素的样式，也就是包含在内部的标签可以拥有外部标签的样式在css中只有以text-、font-、color、line-的属性才可以被继承继承不仅仅局限于子元素，后代元素都可以继承特殊性：a标签：字体颜色和下划线是不能被继承的，必须单独的设置a的颜色和下划线h标签：字体大小和粗细也不能被继承，需要单独设置...
复制链接

扫一扫