CSS(二) 三大特性、盒子模型、浮动

最新推荐文章于 2024-10-17 17:03:17 发布

爱喝水的小鼠

最新推荐文章于 2024-10-17 17:03:17 发布

阅读量940

点赞数 9

分类专栏： CSS+HTML 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_44285582/article/details/139755397

版权

CSS+HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

一、CSS三大特性
二、盒子模型
三、浮动

一、CSS三大特性

1. 层叠性

简单理解就是相同的选择器设置样式，样式会被覆盖;
哪个样式离结构更近，就执行哪个样式。

<style>
    div {
        width: 270px;
        height: 100px;
        font-size: 20px;
        color: green;
    }

    div {
        color: blue;
    }
</style>
<body>
    <div>层叠性测试div</div>
    <div>层叠性测试div2</div>
</body>

运行结果：color:blue离下边结构更近，所以会覆盖上边的color:red;
层叠性

2. 继承性

继承：子标签会继承父标签的某些与文字相关的样式
比如：text-, font-,line-这些元素开头的属性以及color样式会被子元素继承

<style>
    div {
        color: blue;
        text-indent: 2em;
    }
</style>
<body>
    <div>
        <!--p标签的文字变成蓝色-->
        <p>继承性测试p标签</p>
    </div>
</body>

注意：行高的继承性
行高的设置可带单位，可不带单位。

带单位：font: 20px/20px Microsoft YaHei (设置的属性依次是：字体大小/行高字体)

不带单位：font: 20px/1.5 Microsoft YaHei

若子元素未设置行高，则会继承父元素的行高1.5，此时子元素的行高是：当前子元素的文字大小*1.5
body行高1.5，这样写法最大的优势是里面子元素可以根据自己文字大小调整行高

  <style>
    body {
      /* body行高为30 */
      font: 20px/1.5 Microsoft YaHei;
      /* 带单位，则行高为20px */
      /* font: 20px/20px Microsoft YaHei; */
    }
    div {
      font-size: 15px;
    }
    p {
      font-size: 12px;
    }
  </style>
<body>
  <div>div文字大小为15px，行高为15*1.5</div>
  <p>p标签文字大小为12px，行高为12*1.5</p>
  <ul>
    <li>列表li未指定文字大小，行高继承body</li>
  </ul>
</body>

运行结果：

行高继承

3. 优先级

id选择器权重 > 类选择器 > 元素选择器后续补充其他选择器的优先级

就简单记为：0 ，1， 10，100，1000
注：继承的权重是0，若该元素未被选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加
如果是复合选择器，则会有权重叠加。
比如：
div ul li --------> 权重为3;
.nav ul li --------> 权重为12；
a:hover -----—> 权重为11 ；

案例一： 判断li标签里文字的颜色(慢慢划，答案在下边，以防被剧透)

<style>
    .nav {
        color: red;
    }

    li {
        color: greenyellow;
    }
</style>
<body>
    <ul class="nav">
        <li>故人西辞黄鹤楼</li>
        <li>烟花三月下扬州</li>
        <li>孤帆远影碧空尽</li>
        <li>唯见长江天际流</li>
    </ul>
</body>

答案是：
答案是：
答案是：
greenyellow；
li标签继承了父级的样式，但是li标签也被直接选中设置样式了。元素选择器的权重是1，继承的权重是0；所以最终呈现的效果是greenyellow

案例二： 要求把第一个li改成蓝色

<style>
    .nav2 li {
        color: red;
    }
</style>
<body>
 <!-- 要求把第一个li改成蓝色-->
    <ul class="nav2">
        <li class="nav2-li">故人西辞黄鹤楼</li>
        <li>烟花三月下扬州</li>
        <li>孤帆远影碧空尽</li>
        <li>唯见长江天际流</li>
    </ul>
</body>

答案是：

<style>
    .nav2 li {
        color: red;
    }
     /* 这样并不会把颜色改成蓝色 */
    /* .nav2-li的权重为10， .nav2 li的权重为11，所以仍旧是红色 */
    /* .nav2-li {
    color: blue;
    } */
    
    /* 这样权重为20，所以设置会起效果 */
    .nav2 .nav2-li {
        color: blue;
    }
</style>

总结：

选择器相同，则执行层叠性
选择器不同，则根据选择器权重来执行样式

二、盒子模型

盒子模型
盒子实际宽(图中标的width)= 设置的width + padding + border
盒子实际高(图中标的height)= 设置的height + padding + border
后续CSS新特性里还会有一种怪异盒子

1. 边框的设置

1.1 边框宽度、样式、颜色

属性	作用
border-width	定义边框粗细，px
border-style	边框样式：none(默认值)，solid(单实线)，dashed(虚线)，dotted(点线)
border-color	边框颜色

简写为（没有顺序要求）：

border: 1px solid red;

边框可以分开设置，比如设置上边框

border-top: 1px solid red;

边框会额外增加盒子的实际大小，解决方案：

测量盒子大小的时候，不量边框
若测量的时候包含了边框，则需要width/height减去边框宽度

1.2 border-collapse

border-collapse: collapse; 表示相邻边框合并在一起

两个单元格合并的时候，假设边框为1px，当红色边框合并的时候，边框宽度为1px+1px = 2px；
该属性的作用就是：1px+1px = 1px

表格练习(这部分比较陌生，还是要自己写写)

<style>
  table {
      width: 500px;
      height: 249px;
    }

    table,
    th,
    td {
      border: 1px solid red;
      /* 合并相邻的边框 注意这一行带来的效果 */
      border-collapse: collapse;
      text-align: center;
    }
</style>
<body>
     <table align="center" cellspacing="0">
    <tr>
      <th>排名</th>
      <th>关键词</th>
      <th>趋势</th>
      <th>进入搜索</th>
      <th>最近七日</th>
      <th>相关链接</th>
    </tr>
    <tr>
      <td>1</td>
      <td>鬼吹灯</td>
      <td><img src="./img/down.jpg"></td>
      <td>456</td>
      <td>123</td>
      <td>
        <a href="#">贴吧</a>
        <a href="#">图片</a>
        <a href="#">百科</a>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>三国演义</td>
      <td><img src="./img/down.jpg"></td>
      <td>456</td>
      <td>123</td>
      <td>
        <a href="#">贴吧</a>
        <a href="#">图片</a>
        <a href="#">百科</a>
      </td>
    </tr>
    <tr>
      <td>3</td>
      <td>西游记</td>
      <td><img src="./img/down.jpg"></td>
      <td>456</td>
      <td>123</td>
      <td>
        <a href="#">贴吧</a>
        <a href="#">图片</a>
        <a href="#">百科</a>
      </td>
    </tr>
  </table>
</body>

写与不写border-collapse的效果对比：
border-cpllapse

2. 内边距padding

2.1 基本内容

padding可以单独设置盒子的上下左右内边距(padding-top，padding-bottom…)
padding属性可以有一到四个值

值的个数	表达意思
padding：5px	1个值，上下左右都有5px内边距
padding：5px 10px	2个值，上下为5px，左右为10px
padding：5px 10px 20px	3个值，上为5px，左右为10px，下为20px
padding：5px 10px 20px 30px	4个值，上5px，右10px，下20px，左30px，顺时针

注意事项:

给盒子指定padding值后，padding影响了盒子的实际大小(若盒子已有宽度和高度，此时再指定内边框，会撑大盒子)。

解决方案：

让width/height 减去多出来的内边距大小 , 保证盒子与效果图大小一致。

2.2 padding不撑开盒子的情况

课程里说：若未指定width/height属性，则padding不会撑开盒子大小
我自己试着是高度无论指定还是不指定，都会被padding撑开。

<style>
    h1 {
      width: 100%;
      height: 50px;
      background-color: pink;
      padding: 50px;
    }
</style>
<body>
    <h1> </h1>
</body>

未指定width属性时，宽度为1272x150；指定width之后,宽度为1372x150;浏览器出现横向滚动条
在这里插入图片描述
2.

<style>
   .box {
      width: 300px;
      height: 100px;
      background-color: purple;
    }
    
    .box p {
      /* 未指定宽度，所以不会超出父级盒子的大小 */
      padding: 30px;
      background-color: skyblue;
     /* 若增加宽度  则p标签会超出父级盒子 */
        width:250px
    }
</style>
<body>
 <div class="box">
    <p></p>
  </div>
</body>

在这里插入图片描述

2.3 案例

案例一：
导航栏

  <style>
    .nav {
      height: 41px;
      border-top: 3px solid #ff8500;
      border-bottom: 1px solid #edeef0;
      background-color: #fcfcfc;
      /* line-height写在此处或写在.nav a处，样式会有一点点不同 */
      line-height: 41px;
    }

    .nav a {
      /* a属于行内元素 此时必须要转换 行内块元素 */
      display: inline-block;
      height: 41px;
      /* padding的应用 */
      padding: 0 20px;
      font-size: 12px;
      color: #4c4c4c;
      text-decoration: none;
    }

    .nav a:hover {
      background-color: #eee;
      color: #ff8500;
    }
  </style>
</head>

<body>
  <div class="nav">
    <a href="#">新浪导航</a>
    <a href="#">手机新浪网</a>
    <a href="#">移动客户端</a>
    <a href="#">微博</a>
    <a href="#">三个字</a>
  </div>
</body>

案例二：
侧边栏这种空隙实际开发中应该选用padding设置，而不是text-indent
在这里插入图片描述

<style>
    a {
      text-decoration: none;
      /* line-height = height  实现垂直居中 */
      height: 40px;
      line-height: 40px;
      width: 230px;
      background-color: #55585a;
      color: #fff;
      display: block;
      padding-left: 30px;
      /* text-indent: 2em; */
      font-size: 14px;
    }
</style>

3. 外边距margin

margin用于设置外边距，即控制盒子与盒子之间的距离；
单独设置上下左右外边距以及简写方式与padding一致。

3.1 应用：块级盒子水平居中

水平居中需要满足以下两个条件：

盒子必须制定了宽度(width)
盒子左右的外边距都设置为auto（以下三种写法都可以）
- margin: 0 auto (常用)
- margin-left: auto; margin-right: auto;
- margin: auto;

以上是让块级元素水平居中，行内元素或行内块元素水平居中给其父元素添加text-align:center即可

3.2 外边距合并

使用 margin 定义块元素的垂直外边距(margin-top，margin-bottom)时，可能会出现外边距的合并

1. 相邻元素垂直外边距的合并
上下两个相邻的块元素，一个设置margin-top，一个设置margin-bottom，
两者之间的距离 ≠ margin-top + margin-bottom;而是取两个值中的较大者
解决方案：尽量只给一个盒子添加margin值

<style>
    div {
        width: 150px;
        height: 150px;
    }

    .top {
        margin-bottom: 30px;
        background-color: skyblue;
    }

    .bottom {
        margin-top: 10px;
        background-color: pink;
    }
</style>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>

效果图：两个盒子的margin取了较大的30px

2. 嵌套元素垂直外边距的嵌套
父元素与子元素同时设置margin-top时，两者会一起往下移动较大的margin-top值；而不是子元素相对父元素向下移动

<style>
    .father {
        width: 250px;
        height: 250px;
        background-color: pink;
        margin-top: 50px;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-top: 100px;
    }
</style>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

只给父元素设置margin-top时，效果如左图所示；再给子元素添加margin-top时，结果如右图所示。若子元素的margin-top小于父元素的margin-top，则效果仍旧如作图所示。

解决方案：

为父元素定义边框
为父元素定义内边距
为父元素添加overlow:hidden

<style>
    .father {
        width: 250px;
        height: 250px;
        background-color: pink;
        margin-top: 50px;
        /*定义上边框*/
        /* border-top: 1px solid transparent; */
        /*定义内边距，只要和子元素隔开就行*/
        padding-top: 1px;
        /*或者*/
        /* overflow: hidden; */
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        margin-top: 100px;
    }
</style>

注：为了照顾兼容性，行内元素尽量只设置左右外边距，不要设置上下外边距。可转为块级元素或行内块元素在设置

4. 圆角边框

border-radius:length;  lenght可以是百分数或数值px

盒子的四个角均可单独设置：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 、border-bottom-left-radius 。
边框变圆角的原理： 在盒子内部画一个半径长度为length的圆，然后相切一下（就是把红色区域去掉），所以圆角边框中圆角的大小取决于圆的半径。
在这里插入图片描述
应用一：画圆
将border-radius的值设为正方形长或宽的一半即可。

<style>
    .cycle {
      width: 100px;
      height: 100px;
      background-color: skyblue;
      /*  */
      border-radius: 50%;
    }
</style>
<body>
      <div class="cycle"></div>
</body>

应用二：画圆角矩形
将border-radius的值设为长方形宽的一半即可。

<style>
    .roundRect {
      width: 150px;
      height: 50px;
      background-color: skyblue;
      /* 设置为矩形高的一半 */
      border-radius: 25px;
    }
</style>
<body>
    <div class="roundRect"></div>
</body>

5. 盒子阴影

语法：box-shadow(h-shadow v-shadow blur spread color inset);
h-shadow: 水平距离阴影；
v-shadow :垂直距离阴影；
blur：模糊；
spread：阴影的尺寸；
color：阴影颜色；rgb，rgba都可
inset：内置阴影；(不写inset则默认是外阴影)
前两个属性必须写，后边三个可选；

<style>
    .shadow {
      width: 150px;
      height: 150px;
      background-color: skyblue;
    }

    .shadow:hover {
      box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3);
    }
</style>
<body>
      <div class="shadow"></div>
</body>

默认外阴影效果
若加上inset属性，则：
内阴影

三、浮动

传统网页布局的三种方式：

标准流：标签按照规定好默认方式排列
- 块级元素会独占一行，从上向下顺序排列。
- 行内元素会按照顺序，从左到右排列，碰到父元素边缘自动换行。
浮动
定位

1、为什么要浮动

浮动主要应用于让块级元素排成一行；
其实也可以转换为行内块元素，但是行内块元素之间会有缝隙，不好控制布局，所以更常用浮动来实现。
在这里插入图片描述
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

2. 浮动语法

语法：float：属性值

属性值	描述
none	不浮动
left	向左浮动
right	向右浮动

<style>
    .box1 {
        height: 200px;
        border: 1px solid black;
        margin-top: 20px;
    }

    .floatP {
        height: 150px;
        width: 100px;
        background-color: blueviolet;
        float: right;
    }

    .floatP2 {
        height: 150px;
        width: 100px;
        background-color: blueviolet;
        float: left;
    }
</style>
<body>
    <div class="box1">
        <p class="floatP">浮动的p标签1</p>
        <p class="floatP2">浮动的p标签2</p>
    </div>

</body>

在这里插入图片描述

3. 浮动特性(重难点)

3.1 脱标

设置了浮动的元素：

脱离标准流的控制，浮到指定位置（俗称脱标）
浮动的盒子不再保留原先的位置

<style>
    .float-div {
        height: 100px;
        width: 100px;
        background-color: skyblue;
        float: left;
    }

    .nofloat-div {
        height: 200px;
        width: 200px;
        background-color: pink;
    }
</style>
<body>

    <div class="box1">
        <div class="float-div">浮动的div标签</div>
        <div class="nofloat-div">不浮动的div标签</div>
    </div>
</body>

在这里插入图片描述

2.2 一行内显示且顶端对齐排列

浮动的元素是相互贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
在这里插入图片描述

2.3 浮动元素具有行内块元素特性

浮动元素的默认宽度根据内容来决定
一行可以有多个浮动元素
浮动元素可以设置宽高、内外边距

<style>
    .box2 {
        height: 150px;
        background-color: skyblue;
        float: left;
        margin-right: 10px;
    }
</style>
<body>
    <div class="box1">
        <div class="box2">浮动的元素会具有行内块元素的特性</div>
        <div class="box2">默认宽度:文本所占宽度</div>
    </div>
</body>

在这里插入图片描述

3. 常见布局

3.1 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置.
网页布局第二准则：先设置盒子的大小，之后设置盒子的位置

3.2 浮动布局注意点

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
一个元素浮动了，其余兄弟元素也应该浮动，以防引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

<style>
    .box {
        border: 1px solid red;
        width: 400px;
        height: 300px;
        margin: 0 auto;
    }
    .one {
        width: 50px;
        height: 50px;
        background-color: skyblue;
    }

    .two {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }

    .three {
        width: 150px;
        height: 150px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="box">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
    </div>
</body>

在这里插入图片描述

two加浮动，one three 不加浮动：由于浮动只影响后方的标准流，所以three会在two的下方，one、two看起来不变
two不加浮动，one、three加浮动：one加浮动之后，标准流two移到one的下方，而three只影响后边的标准流，前边怎么与他无关，所以会飘在one的下方

4. 清除浮动(带来的影响)

4.1为什么要清除浮动

由于不确定有多少子盒子，所以父级盒子一般不会指定高度，理想状态下：父级盒子的高度随着子盒子而变化，即这样：
在这里插入图片描述
但是子元素浮动不占位置，此时父级盒子的高度为0，则会影响后方标准流的排列，现实是这样：

综上：

浮动元素不再占用原文档流的位置，所以会对后面的元素排版产生影响
清楚浮动的影响之后，父级会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

4.2 怎么清除

以这段代码为例说明清除的方法

<style>
    .box {
      width: 600px;
      border: 1px solid red;
      margin: 0 auto;
    }
    .head,
    .footer {
      height: 50px;
      background-color: orchid;
    }
    .son {
      width: 200px;
      height: 150px;
      background-color: skyblue;
      float: left;
    }
  </style>
</head>

<body>
  <div class="head">head</div>
  <div class="box">
    <div class="son">子元素1</div>
    <div class="son">子元素2</div>
    <div class="son">子元素3</div>
    <div class="son">子元素4</div>
  </div>
  <div class="footer">footer</div>
</body>

4.2.1 额外标签法

清楚浮动的策略是闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。
做法：额外添加一个空标签，并添加样式clear：both/left/right;

both：同时清除左右两侧浮动的影响（常用）
left/right：清除左/右侧浮动的影响

<body>
    <div class="head">head</div>
    <div class="box">
        <div class="son">子元素1</div>
        <div class="son">子元素2</div>
        <div class="son">子元素3</div>
        <div class="son">子元素4</div>
        <!-- 额外标签法 -->
        <div style="clear: both;"></div>
    </div>
    <div class="footer">footer</div>
</body>

缺点：添加许多无意义的标签，结构化差
注：这个新的空标签必须是块级元素

4.2.2 父级添加overflow属性

overflow: hidden/auto/scroll 都可以；

<style>
    .box {
        width: 600px;
        border: 1px solid red;
        margin: 0 auto;
        /* 添加overflow属性 */
        overflow: hidden;
    }
</style>

缺点：无法显示溢出的部分(目前代码演示这个缺点还没演示出来)

4.2.3 父级添加:after伪元素

本质上以CSS的方式是在后边添加了一个空的标签元素(额外标签的升级版)

<style>
    /* 给父元素添加这段代码即可*/
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /* IE6、7 专有，考虑兼容性 */
        *zoom: 1;
    }
    ...
</style>
<body>
    <div class="head">head</div>
    <div class="box clearfix">
        <div class="son">子元素1</div>
        <div class="son">子元素2</div>
        <div class="son">子元素3</div>
        <div class="son">子元素4</div>
    </div>
    <div class="footer">footer</div>
</body>

优：未增加标签，结构更简单
缺：照顾低版本浏览器
代表网站：百度、淘宝网、网易

4.2.4 双伪元素清除浮动

同上，这个是在前后都添加了空标签元素

<style>
    .clearfix:before,.clearfix:after { 
        content:""; 
        display:table;  
    } 
    .clearfix:after { 
        clear:both; 
    } 
    .clearfix { 
        *zoom:1; 
    }  
</style>