Css学习笔记(五)

最新推荐文章于 2024-01-22 21:50:59 发布

mikw999

最新推荐文章于 2024-01-22 21:50:59 发布

阅读量151

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/mikw999/article/details/101448928

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

盒子模型布局的稳定性

按照优先使用宽度（width）其次使用内边距（padding）再使用外边距（margin）。

原因
1，margih会有外边距合并等bug所以最后使用
2，pading会影响盒子大小，需要惊醒加减计算，所以其次是用
3，width没有别的问题，所以我们尝试用宽度剩余法高度剩余法来做。

css3盒模型

css3中可以通过box-sizing来指定盒模型，即可指定content-box border-box。这样我们计算盒子大小的方式就分为两种

1，box-sizing :content-box 盒子大小为width+padding+border
此值是默认值

2，box-sizing : border-box 盒子大小为width ，padding和border包含到width里面。
上面的标注是指CSS属性里面的width：length ，content的值会自动调整

盒子阴影

语法格式

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

在这里插入图片描述

注意：前2个必写，后面的可以省略，外阴影是默认的不用写

浮动

普通流

CSS的定位机制有3种，普通流（标准流），浮动和定位。
其中标准流实际上就是一个网页内标签元素正常从上到下，从左到右顺序的意思，比如块级元素会独占一行，行内元素会按照顺序依次前后排列，按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局
在这里插入图片描述

浮动

在这里插入图片描述
浮动一开始是用来做文字环绕效果的，后来可以是div排列成一行

元素的浮动是指设置了浮动的匀速会脱离标准流的控制，移动到其父元素中指定的位置的过程，
在css中。通过float属性来定义浮动，其基本语法格式如下；

选择器{float：属性值；}

在这里插入图片描述

浮动详细内幕特性

浮动首先创建包含快的概念（包裹）。就是说，浮动的元素总是找理他最近父元素对齐，但是不会超出内边距的范围。
在这里插入图片描述

浮动的元素排列位置，跟上一个元素（块级）有关系，如果上一个元素有浮动，则A元素会和上一个元素的顶部对齐，如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐

在这里插入图片描述

由此可以推断出，一个父盒子里面的子盒子，如果其中有一个子级有浮动的，则其他都需要浮动，这样才能在一行显示对齐。

元素添加浮动后，会具有行内块元素的特性，元素的大小完全取决于定义的大小或者默认的大小，

浮动根据元素书写的位置显示相应的浮动

总结：浮动的主要目的让多个块级元素在一行内显示。
加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上，不占位置，原来的位置就漏给了标准流

版心和布局流程

版心是指网页中主题内容所在的区域，一般在浏览器窗口中水平居中显示，常见宽度为960px，980px，1000px，1200px等

布局流程

为了提高网页制作的效率，布局时通常遵守一定的布局流程，具体如下：
1，确定页面的版心（可视区）
2，分析页面中的行模块，以及每个行模块中的列模块
3，制作HTML结构
4，CSS初始化，然后开始运用盒子模型的源里，通过DIV+CSS布局来控制网页的各个模块

一列固定宽度且居中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top,
        .banner,
        .main,
        .footer
        {
            width: 960px;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 10px;
            background-color: pink;
        }
        .top{
           
            height: 80px;
        }
        .banner
        {
            height: 1000px;
        }
        .main{
            height: 50px;
        }
        .footer
        {
            height: 20px;
        }

    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main</div>
    <div class="footer">footer</div>
</body>
</html>

两列做窄右宽型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .top,
        .banner,
        .main,
        .footer
        {
            width: 960px;
            border: 1px,dashed black;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 10px;
            background-color: pink;
        }
        .top{
           
            height: 80px;
        }
        .banner
        {
            height: 1000px;
        }
        .main{
            height: 50px;
        }
        .left{
            
            width: 300px;
            background-color:red;
            float: left;
          
        }
        .right{
            margin-left: 10px;
            width: 480px;
            background-color:blue;
            float: left;
        }
        .footer
        {
            height: 20px;
        }

    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="main">main
       <div class="left">left</div>
       <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

通栏平均分布型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .top{
            height: 60px;
            background-color: pink;
            margin-bottom: 10px;
        }
        .banner{
            height: 60px;
            width: 960px;
            margin: 0 auto;
            background-color: pink;
            border-radius: 15px;
            margin-bottom: 10px;
        }
        ul{
            list-style: none;
        }
        .main{
            width: 960px;
            height: 200px;
            margin: 0 auto;
            margin-bottom: 10px;
            background-color: pink;
            clear: both;
        }
        .main ul li{
            width: 240px;
            height: 200px;
            background-color: blue;
            float: left;
        }
        .main ul li:nth-child(even){
            background:red
        }
          .footer{
            height: 60px;
            background-color: pink;
            margin-bottom: 10px;
        }

    </style>
</head>

<body>
  <div class="top">top</div>
  <div class="banner">banner</div>
  <div class="main">
      
      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
      </ul>
  </div>
  <div class="footer">footer</div>
</body>
</html>

清除浮动

由于浮动元素不会再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题就要再该元素中清除浮动的影响，

清除浮动的本质

本质是为了解决父级元素因为子级浮动引起内部高度为0的问题
在这里插入图片描述

清除浮动的方法

本质上叫做闭合浮动会更好一些，记住清除浮动就是把浮动的盒子圈到盒子里面，让父盒子闭合出口和入口，不让他们出来影响其他元素。再CSS中Clear属性用于清除浮动，语法格式如下

Clear属性

选择器 {clear: 属性值 ;}

在这里插入图片描述
一般都用both。

父级添加overflow属性方法

可以通过触发BFC方式，可以是实现清除浮动效果，代码如下

给父级添加 overflow为 hidden | auto | scroll 都可以实行

优点：代码简洁
缺点：内容增多的时候容易造成能不会自动换行，导致内容被隐藏掉无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素的升级版，好处是不用单独加标签
使用方法

 .clearFix:after{
            content:".";   /*内容为点 经量不要为空*/
            display: block;   /* 转为块级元素*/
            height: 0;  /* 高度为0*/
            clear:  both ;  /*隐藏盒子*/
            visibility: hidden;  /*清除浮动*/
        }
        
 .clearFix{* zoom:1;}  /* IE 6 7专有*/

优点：复合闭合浮动的思想，结构语义正确
缺点：由于IE6-7不支持：after ，使用zoom：1 触发haslayout

使用before和after双为元素清除

使用方法

 .clearFix:before ,.clearFix:after
        {
            content: "";
            display: table;/*触发BFC   防止外边距合并*/
        }
        .clearFix:after
        {
            clear: both;
        }
        .clearFix
        {
            *zoom: 1;
        }