CSS优先级&CSS盒子模型

1、CSS继承

  • 文字相关的样式可以被继承【作用在父元素上面,子元素可以继承】
  • 布局相关的样式不可以被继承【可以通过inherit值进行继承】

2、CSS优先级

  • 书写了相同样式时,后写的样式优先级较高
  • 当内部样式和外部样式有相同的样式时,后写的样式优先级较高
  • style行间 > id > class > 标签 > * > 继承
  • 通过权重来表示优先级:
    • style行间 权重 1000
    • id 权重 100
    • class 权重 10
    • 标签 权重 1

3、CSS盒子模型

  • content:物品 【width和height组成】
  • padding:填充物 【写两个值代表上下、左右,写四个值为上、右、下、左】 不能为负值
  • border:包装盒
  • margin:盒子与盒子之间的间距 【外边距,写两个值代表上下、左右,写四个值代表上、右、下、左】 可以为负值
  • 注意:
    • 背景色填充到除了margin以外所有的盒子区域
    • 文字在content区域
      CSS优先级&CSS盒子模型_第1张图片
  • box-sizing:
    • 盒尺寸,可以改变盒子模型的展示形态
    • content-box:width、height是作用于content部分
    • border-box:width、height是作用于content、padding、border三部分
  • 盒子模型的一些问题:
    • 1、margin叠加问题,当上下盒子同时存在margin的时候,会取上下两个margin中较大的作为叠加的值。(解决方案:1.给一个margin取值,另一个不取。2.BFC规范)
    • 2、margin传递问题,当两个盒子嵌套在一起的时候,内部盒子如果有margin-top,就会牵连外部盒子一起存在margin-top(解决方案:1.BFC规范,2.给父容器加边框,3.给父容器添加padding取代子容器的margin-top)
    • 3、盒子模型添加到不同标签会有不同的问题,以上问题是盒子模型添加到div标签之后出现的问题。
  • 盒模型拓展:
    • 1.将margin-left设置为auto,则左边占据剩余部分全部,同理margin-right设置为auto,则右边占据剩余部分全部。如果两个都设置为auto,则盒子会居中。【注意,margin左右自适应可以,上下自适应不行】
    • 2.在嵌套的两个盒子中,外部盒子设置宽高,内部盒子不设置width,内部盒子会自动根据所给的值填充整个外部盒子宽度范围,不需要计算,节省代码。
    • 3.在行内定义一个区域,也就是一行内可以被划分成好几个区域,从而实现某种特定效果。本身没有任何属性。

4、练习

  • 代码:
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        #box1{ width: 350px; height: 350px; border: 1px black dashed; 
            padding: 27px;}
        #box2{ border:5px #d7effe solid; padding: 20px;}
        #box3{ background-color: #ffa0df; padding: 41px;}
        #box4{ border:1px white dashed; padding: 3px;}
        #box5{ border:1px white dashed; padding: 49px;}
        #box6{ width: 100px; height: 100px; background-color: #96ff38; border: #fcff00 5px solid;}
    style>
head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6">div>
                    div>
                div>
            div>
        div>
    div>
body>
html>
  • 结果
    CSS优先级&CSS盒子模型_第2张图片
  • 问题:
    • 通过padding的方式可以很简单做出以上盒子模型
    • 通过margin的方式去做的话做到第三个盒子就会出现问题

你可能感兴趣的:(web前端,css,前端,css3)