Web前端入门 CSS

编程语言 2023-04-09 13:30:30 阅读次数: 0

1、初识CSS

  1. CSS是什么?
  2. CSS怎么用？
  3. CSS选择器
  4. 美化网页（文字，阴影，超链接，列表，渐变…）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

参考手册

HTML中文网

1.1、什么是CSS？

Cascading Style Sheet 层叠样式表

CSS：表现（美化网页）

字体、颜色、边框、高度、宽度、背景图片、网页浮动、网页定位

1.2、发展史

  • CSS1.0
  • CSS2.0 DIV (块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
  • CSS2.1 浮动， 定位
  • CSS3.0 圆角，阴影，动画…浏览器兼容性~

1.3、快速入门

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <!-- 规范，可以编写css的代码，每一个声明，最好以 ; 结尾
  	语法:
      选择器{
          属性:值;
          属性:值;
          属性:值;
          .....
      }
   -->
  <style>
    *{
      
      margin:0;padding:0;}
    h1{
      
      
        font-size: 16px;
        color: red;
    }
  </style>
</head>
<body>
   <h1>我是标题</h1>
</body>
</html>

建议使用link嵌入css代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <h1>我是标题</h1>
</body>
</html>

1.4、CSS的3种导入方式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
    <!--内部样式-->
  <style>
      h1{
      
      
          color: green;
      }
  </style>

  <!--外部样式-->
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!--优先级：就近原则-->

    <!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
   <h1 style="color: coral;">我是标题</h1>
</body>
</html>

扩展：外部样式两种写法

  • 链接式（先渲染样式，后加载结构 推荐使用）XHTML

    <!--外部样式-->
<link rel="stylesheet" href="css/style.css">

  • 导入式（先加载结构，后渲染样式）@importCSS2.1特有

    <!--导入式-->
<style>
     @import url("css/style.css");
</style>

2、选择器

2.1、基本选择器

html结构

作用：选择页面上的某一个或者某一类元素

  1. 标签选择器 选择一类标签 标签名{}

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
       /*
        标签选择器 标签名{}
        会选择到页面上所有的这个标签的元素
       */
       h1{
        
        
           color: red;
           font-weight: normal;
       }
       p{
        
        
           font-size:35px;
       }
  </style>
</head>
<body>
   <h1>学WEB</h1>
   <h1>学WEB</h1>
   <p>提升自己！</p>
</body>
</html>

  2. 类选择器 class：选择所有class属性一致的标签，跨标签.类名{}

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
      /*
        类选择器：.class的名称{}
        好处，可以多个标签归类，是同一个class
      */
      .one{
        
        
          color: red;
      }
      .two{
        
        
        color: green;
      }
      .three{
        
        
          color: blue;
      }
  </style>
</head>
<body>
   <h1 class="one">标题一</h1>
   <h1  class="two">标题二</h1>
   <h1 class="three">标题三</h1>
   <p class="one">p标签</p>
</body>
</html>

  3. id选择器 id：全局唯一！ #id名{}

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
      /* 
        id选择器    #id名称{}
        id必须保证全局唯一
      */
      #one{
        
        
          color: red;
      }
      .one{
        
        
          color: green;
      }
      .two{
        
        
        color: orange;
      }
      h1{
        
        
          color: skyblue;
      }
  </style>
</head>
<body>
   <h1 class="one" id="one">标题一</h1>
   <h1 class="two">标题二</h1>
   <h1>标题三</h1>
</body>
</html>

优先级：id选择器>class选择器>标签选择器（不遵循就近原则，固定的）

2.2、层次选择器

html结构

  1. 后代选择器:在某个元素的后面

    /*后代选择器*/
body p {
      
      
    background-color: green;
}

  2. 子选择器（一代，儿子）

    /*子选择器*/
body>p {
      
      
    background-color: red;
}

  3. 相邻兄弟选择器（同辈）

    /*相邻兄弟选择器 只有一个,（向下延伸）*/
.two+p {
      
      
    background-color: blue;
}

  4. 通用兄弟选择器

    /*通用兄弟选择器 当前选中的元素的向下的所有兄弟元素*/
.two~p {
      
      
    background-color: skyblue;
}

2.3、结构伪类选择器

/*ul的第一个子元素*/
ul>li:first-child {
    
    
    background-color: red;
}

/*ul的第一个最后子元素*/
ul>li:last-child {
    
    
    background-color: green;
}

/*选择当前p元素的父级元素，选择父级元素的第二个，并且是当前元素才生效！
（按照顺序！）
*/
p:nth-child(2) {
    
    
    background-color: skyblue;
}

/*选中父元素下的p元素的第二个。（按照类型！）*/
p:nth-of-type(1) {
    
    
    background-color: coral;
}

/*注：even(偶数)、odd(奇数)

详解：

选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even(偶数)、odd(奇数)
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素

2.4、属性选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
      .demo a{
      
      
          float: left;
          width: 100px;
          height: 100px;
          text-align: center;
          line-height: 100px;
          background-color: wheat;
          text-decoration: none;
          margin: 0 20px;
          border-radius: 10px;
          font-size: 20px;
          font-weight: bold;
          color: white;
      }
      /*存在id的元素*/
      .demo>a[id]{
      
      
          color: green;
      }

      /*id等于first的元素*/
      .demo>a[id="first"]{
      
      
          background-color: red;
      }
      /*class中包含links的元素
      */
      .demo>a[class*='links']{
      
      
          background-color: skyblue;
      }
      /*选择href中以http开头的元素*/
      .demo>a[href^=http]{
      
      
          background-color: yellow;
      }

      /*选择href中以jpg结尾的元素*/
      .demo>a[href$=jpg]{
      
      
          background-color: orange;
      }
  </style>
</head>
<body>
   <p class="demo">
       <a href="http://www.baidu.com" class="links item first" id="first">1</a>
       <a href="#" class="links item active" target="_blank" title="test">2</a>
       <a href="images/1.jpg" class="links item">3</a>
       <a href="images/2.jpg" class="links item">4</a>
       <a href="#" class="links item">5</a>
       <a href="#" class="links item">6</a>
       <a href="#" class="links item">7</a>
       <a href="123.pdf" class="links item">8</a>
       <a href="#" class="links item" id="k">9</a>
       <a href="#" class="links item last">10</a>
   </p>
</body>
</html>

= 绝对等于

*= 包含这个元素

^= 以……开头

$= 以……结尾

3、美化网页元素

3.1、为什么要美化网页？

  1. 有效的传递页面信息
  2. 使用CSS美化过的页面文本 ， 漂亮 、 美观 ，可以更好的吸引用户
  3. 更好的突出网站主题
  4. 增强用户体验

span标签：重点要突出的字，使用span包裹起来

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    .font{
      
      
        font-size: 26px;
        color: red;
    }
  </style>
</head>
<body>
   <p>欢迎学习<span class="font">WEB</span>前端</p>
</body>
</html>

3.2、字体样式

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <!--
    font-family  字体类型
    font-size    字体大小
    font-style   字体风格
    font-weight  字体的粗细
  -->
  <style>
    body{
      
      
        font-family: 'Courier New',"楷体";
        color: orange;
    }
    h1{
      
      
        font-size: 16px;
    }
    .p1{
      
      
        font-weight: bolder;
        font-style: oblique;
    }
  </style>
</head>
<body>
   <h1>内容介绍</h1>

   <p class="p1">金耀基尝言，自由独立是通识的基础，后者又反过来加强前者。在教育中排除掉通识，则摧毁其生命。致力通识教育，是世界范围内有抱负的大学的重要目标。关于通识教育，l946年华盛顿大学诺斯兰教授的定义是：“其主旨在个人的整体健全发展，包含提升生活的目的、提炼对情绪的反应，以及运用我们最好的知识来充分了解各种事物的本质</p>
</body>
</html>

补充：

font-weight属性

normal：正常 (默认，等同400)

bold：粗体 （等同700）

bolder：更粗 （等同900）

lighter：更细 （等同100）

font复合属性

简写：字体风格→字体粗细→字体大小→字体类型

p{
    
    font:oblique bold 12px "楷体";}

注：字体风格与字体粗细可以省略

3.3、文本样式

  1. 颜色 color rgb rgba
  2. 文本对齐方式 text-align:center;
  3. 首行缩进 text-indent:2em;
  4. 行高 line-height 单行文字上下居中 line-height = height
  5. 装饰 text-decoration:none;
  6. 文本图片垂直对齐 vertical-align:middle;

3.4、文本阴影

/* text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径 */
a{
    
    
    text-shadow: red 10px 5px 5px;
}

3.5、超链接伪类

伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:red;}
a:visited 单击访问后超链接样式 a:visited {color:green;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:blue;}
a:active 鼠标单击未释放的超链接样式 a:active {color:pink;}

注：设置伪类的顺序：a:link->a:visited->a:hover->a:active

3.6、列表

/* 
list-style: 
    none    无标记符号
    circle  实心圆
    decimal 数字
    square  实心正方形
    disc    空心圆
*/

ul>li{
    
    
    list-style: none;
    line-height: 30px;
    text-indent: 2em;
}

3.7、背景

background-color：背景颜色

background-image：背景图片

background-position：背景定位

background-repeat：背景重复

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
      /*默认全部平铺 repeat*/
    div{
      
      
        width: 1200px;
        height: 2000px;
        /*颜色 图片 定位 平铺*/
        background: skyblue url(./images/6.jpg) 200px 200px no-repeat;
    }
  </style>
</head>
<body>
   <div></div>
</body>
</html>

3.8、渐变

grabient

background的渐变色虽然看起来像颜色，但是它在渲染的时候其实是一张“图片”

body{
    
    
    background-color: skyblue;
    /*渐变的方向（或角度） 颜色值1,颜色值2,颜色值3*/
    background-image: linear-gradient(115deg,#ffffff 0%,#6284ff 50%,#ff0000 100%);
}

浏览器兼容性

  • IE浏览器是Trident内核，加前缀：-ms-

  • Chrome浏览器是Webkit内核，加前缀：-webkit-

  • Safari浏览器是Webkit内核，加前缀：-webkit-

  • Opera浏览器是Blink内核，加前缀：-o-

  • Firefox浏览器是Mozilla内核，加前缀：-moz-

4、盒子模型

4.1、什么是盒子模型？

盒子模型

margin：外边距

padding：内边距

border：边框

4.2、边框

  1. border-width：边框粗细
  2. border-style：边框样式
  3. border-color：边框颜色
#box{
    
    
    width: 200px;
    height: 200px;
    background-color: pink;
    border: 1px dashed red;
}

4.3、内外边距

外边距的妙用

/*网页居中对齐*/
#box{
    
    
    margin:0px  auto
	width:100%;
    height:600px;
}
/*
网页居中对齐的必要条件
    块元素
    固定宽度
*/

设置顺序：

  • 当四个值时：排列顺序为上 右 下 左
  • 当三个值时：排列顺序为上 左 右 下
  • 当二个值时：排列顺序为上 下 左 右
  • 当一个值时：排列顺序为上 下 左 右

盒子的间距：

内边距padding的特点：会撑大自身、不会改变自身位置
外边距margin的特点：会改变自身盒子位置，但不会改变自身大小、同时也不会改变父级

盒子模型的计算方式，你这个盒子模型到底有多大？

标准盒模型：盒子模型总尺寸=border+padding+margin+内容宽度

4.4、圆角边框

应用场景：让盒子四个角变得圆润，增加页面细节，提升用户体验

属性名：border-radius

常见取值：数字+px、百分比

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！

/*顺序：左上 右上 右下 左下*/
/*
圆形:
    必须是正方形
    元素的宽度和高度必须相同
    圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
*/
#box{
    
    
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
}

/*
半圆形:
    制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
    制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
*/
#box{
    
    
    width: 200px;
    height: 100px;
    background-color: pink;
    border-radius: 100px 100px 0 0;
}

/*
扇形:
    利用border-radius属性制作扇形遵循“三同，一不同”原则
    三同”是元素宽度、高度、圆角半径相同
    “一不同”是圆角取值位置不同
*/
#box{
    
    
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 100px 0 0 0;
}

/* 
胶囊按钮:
    必须是长方形
    盒子高度一半
*/
#box {
    
    
    width: 200px;
    height: 100px;
    background-color: pink;
    border-radius: 100px;
}

4.5、盒子阴影

img{
    
    
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 5px 5px 5px red,
        10px 10px 10px green,
        15px 15px 15px rgb(167, 22, 235);
}
/*盒子阴影: X轴位移 Y轴位移 模糊半径 颜色 阴影类型（inset内阴影）默认outset：外阴影*/

5、浮动

5.1、标准文档流

什么是标准文档流？

标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式

块级元素（block）从上往下、垂直布局、独占一行，高度由内容撑开、宽度默认继承父级宽度

<h1><h6>、<p>、<div>、<ul><li></li></ul>

内联元素（inline）从左往右、水平布局、空间不够自动折行，不独占一行，能跟其他行内元素共享一行空间、 不支持宽高

<span>、<a>、<img/>、<strong>...

行内元素可以被包含在块级元素中，反之，则不可以~

5.2、display属性

<!--
	block  块元素的默认值 前后带有换行符
	inline  内联元素的默认值 前后没有换行符
	inline-block 行内块元素 既有内联元素的特性，又有块级元素的特性
	none   设置元素不会被显示
-->
<style>
div{
    
    
    width: 100px;
    height: 100px;
    border: 1px red solid;
    display: inline-block;
}
span{
    
    
    width: 100px;
    height: 100px;
    border: 1px red solid;
    display: inline-block;
}

display也是一种实现块级元素并排的方式，但浏览器解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离，最佳解决方案：使用浮动

5.3、float属性

元素并排显示：浮动float：left | right

浮动元素的特点：

  1. 自身浮动后会脱离文档流，在标准流中不占位置
  2. 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
  3. 浮动元素不会撑开父级高度【父级高度坍塌】
  4. 如果浮动元素是行内元素，那么这个时候行内元素就可以支持宽高，支持margin和padding（浮动后的元素具备了行内块特性）

注：浮动的元素不能通过text-align:center或者margin:0 auto

5.4、浮动导致父级边框塌陷的问题(BFC)

BFC是什么？

	BFC：元素内部的所有的子元素的行为不会影响外界的元素。

BFC如何触发？

  1. 浮动
  2. overflow 只要它的值不是visible就可以触发
  3. display为inline-block、table-cell、flex、table-caption或者inline-flex 【不推荐使用】
  4. position定位absolute和fixed

清除浮动，防止父级边框塌陷的五种方法

  • 设置宽高法：设置父元素的高度

    缺点：元素固定高会降低扩展性

    .box{
      
      
    width: 100%;
    height: 500px;
    border:5px red solid;
}

  • 额外标签法：浮动元素后面加空div

    空div会造成HTML代码冗余，并设置：clear:both属性

    <div style="clear: both;"></div>

  • 单伪元素清除法：父级添加伪元素after

    写法比上面稍微复杂一点，但是没有副作用，原理同额外标签法一致，推荐使用

    .clearfix::after {
      
      
    content: '';

    /* 伪元素添加的标签默认为行内，此处需要转为块 */
    display: block;
    clear: both;

    /* 兼容性低版本浏览器 补充代码:在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

  • 双伪元素清除法：父级添加伪元素before、after

    /* 
.clearfix::before 作用：解决外边距塌陷问题 
外边距塌陷：父子标签，都是块级，子级加了margin会影响父级的位置
*/

/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
      
      
    content: '';
    display: table;
}

/* 真正清除浮动的标签 */
.clearfix::after {
      
      
    clear: both;
}

  • 父级添加overflow属性（hidden、auto）

    下拉列表框的场景不能用（会隐藏希望显示的内容）

    .box{
      
      
    width: 100%;
    overflow: hidden;
    border:5px red solid;
}

CSS的书写顺序：

  1. 定位
  2. 浮动 | display
  3. 盒子模型：margin、padding、border、width、height、背景色（bgc）
  4. 文字样式

好处：遵循上述规则编码，浏览器的执行效率会较高！

5.5、display和浮动的对比

  • display

    方向不可控制

  • float

    浮动起来的话会脱离标准文档流，所有要解决父级边框塌陷的问题~

6、定位(position)

定位可以让元素自由的摆放在网页的任意位置

一般用于盒子之间的层叠情况

6.1、相对定位

相对定位：relative

  • 参考目标为自身原来的位置，进行偏移。不会脱离标准文档流

6.2、绝对定位

绝对定位：absolute

  • 参考目标直系父辈离自己最近的一个position的值不为static的标签 ，进行偏移。 脱离标准文档流

6.3、固定定位

固定定位：fixed

  • 参考目标：根据浏览器窗口 进行上、下、左、右偏移 脱离文档流

经验：

相对定位的特性

  • 元素位置发生偏移后，它原来的位置会被保留下来
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
  • 使用场景（很少单独使用）

绝对定位的特性（通常配合相对定位一起使用~）

  • 元素位置发生偏移后，原来的位置不会被保留
  • 如果没有设置定位父级，则相对浏览器窗口来定位（父相子绝）
  • 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
  • 使用场景（下拉菜单、焦点图轮播、弹出数字气泡）

改变定位视图后会不会影响周边元素的位置？

  • 脱离文档流【脱离的程度远远大于浮动脱离的程度】

子元素在绝对定位时：选定的参考目标要基于如下的思路：

  1. 在能满足条件的基础上，选择最近的

  2. 元素脱离后，后续在文档流中的元素会上来取代当前元素的位置。（写代码时要可预见性的提前布局）

固定定位的特性

  • 相对浏览器窗口来定位
  • 使用场景（窗口左右两边的固定广告、返回顶部图标）

注：

  • 脱离标准文档流后，父级标签的height不能撑开
  • 被绝对定位或固定定位后的元素都是块级盒子特性

6.4、偏移量方向

偏移设置： left、right、top、bottom

注：如果设置偏移left和right都有，以left为准，top和bottom都有，以bottom为准，通常水平/垂直方向只设置即可！

绝对定位的盒子不能使用左右的margin auto居中，

left 50% 整个盒子会移动到浏览器中间偏右的位置，把盒子向左侧移动，移动自己盒子宽度的一半，或通过transform的translate属性动态改变元素位置

6.5、z-index

什么是z-index？

调整元素定位时重叠层的上下位置，该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远

不同布局方式元素的层级关系：定位 > 浮动 > 标准流

不同定位之间的层级关系：

  • 相对、绝对、固定默认层级相同
  • 此时HTML中写在下面的元素层级更高，会覆盖上面的元素，通过z-index属性可改变元素元素的上下位置

z-index：

  • 非定位元素和正常定位但未设置z-index值的定位元素层级都可以记为0
  • IE FireFox Safari的z-index最大值是2147483647 ，Opera的最大值是2147483584
  • 必须是定位元素才能生效

opacity ：

  • 设置元素的不透明度
  • 从 0.0 （完全透明）到 1.0（完全不透明）

注：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……

布局：

  • 布局时如果能不使用浮动和定位能实现效果，就尽量不要使用。
  • 如果是多个相同元素并排，使用浮动
  • 单一元素，不管位置在那一般就可以使用定位

6.6、垂直对齐方式

基线：浏览器文字类型元素排版中存在用于对齐的基线(baseline)

浏览器在处理行内标签和行内块标签的时候，默认按照文字的特点去解析

属性名：vertical-align

属性值

属性值 效果
baseline 默认，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐

主要用于解决行内/行内块元素垂直对齐问题

6.7、光标类型

应用场景：设置鼠标光标在元素上时显示的样式

属性名：cursor

常见的属性值：

属性值 效果
default 默认值，是一个箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动

6.8、溢出部分显示效果（overflow）

溢出部分：指的是盒子内容部分所超出盒子范围的区域

应用场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条…

属性名：overflow

常见的属性值：

属性值 效果
visable 默认值，溢出部分可见
hidden 溢出部分隐藏
scroll 无论是否溢出，都显示滚动条
auto 根据是否溢出，自动显示或隐藏滚动条

6.9、元素本身隐藏

应用场景：让某元素本身在屏幕中不可见。如：鼠标：hover之后元素隐藏

常见属性：

  • visibility：hidden
  • display：none

两者区别：

  • visibility：hidden 隐藏元素本身，并且在网页中占位置
  • display：none 隐藏元素本身，并且在网页中不占位置

7、伪元素

7.1、什么是伪元素?

伪元素指某一类非实际存在于html内的元素标签，这种标签通过css进行添加的。
作用：主要是用于做一些特殊的辅助效果
主要分为两种：before、after

  • 伪元素不能单独创建，必须基于一个实体标签才能创建
  • 伪元素的css内有一条必须存在的属性：content，该属性表示伪元素的内容，当伪元素如果没有内容时 就给一个空引号''
  • 伪元素默认为行内元素
  • 任意一个实体标签均可以创建两个附属的伪元素，伪元素是实体标签的儿子(before是现在该元素内部所有实体标签之前，after则出现在最后)

first-line 选中第一行文字

first-letter 选中第一个文字

8、继承与盒模型

8.1、继承

  • css默认值：任何标签在页面显示时，其实所有的css都已经在他身上出现了
  • 大部分css属性的默认值都是inherit，当css属性值为inherit时，意思就是当前的属性值保持跟父级同属性的值一致，依次向上级标签继承

8.2、什么是盒模型？

盒模型是浏览器解析标签的规则：标准盒模型（浏览器默认的盒模型）、IE盒模型（怪异盒模型）

标准盒模型：

标准盒模型下，width/height的值时设置给内容区，padding和border会撑大容器的占位面积
width/height（100） + padding（302）+ border（202）= 标签的真实占位空间大小

怪异盒模型：box-sizing：border-box

当开启怪异盒模型时，width、height所设置的值分别会被border、padding和content所分享。导致的结果就是会因为padding和border的出现压缩了内部的空间

猜你喜欢

转载自blog.csdn.net/zhang_0202/article/details/110292873
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022