前端入门第四周

最新推荐文章于 2024-09-13 21:00:00 发布

橙柒1

最新推荐文章于 2024-09-13 21:00:00 发布

阅读量134

点赞数 2

文章标签：前端 css html

本文链接：https://blog.csdn.net/m0_73638967/article/details/128364263

版权

四.HTML进阶

5.表格元素

在css技术出现之前，网页通常使用表格布局。

后台管理系统中可能会使用表格。

前台：面向用户

后台：面向管理员。对界面要求不高，对功能性要求高。

表格不再适用于网页布局？浏览器必须把表格的内容全部读完之后，才能进行渲染，所以表格的渲染速度过慢。

display:table;
border-collapse:separate;(边框之间的距离是分离的)
border-collapse:collapse;(相邻边框合并)

单元格的合并

跨列：
<td colspan="5">合计:XXXX</td>
跨行：
<td rowspan="2">数据1</td>

说明
请添加图片描述

6.其他元素

1. abbr(在文献可能会用到)

缩写词

2. time

提供给浏览器或搜索引擎阅读的时间

3. b （bold）

以前是一个无语义元素，主要用于加粗字体

4. q

一小段引用文本属性cite=“引用文献的地址”——给浏览器看的

5. blockquote(加了margin)

大段引用的文本属性cite=“引用文献的地址”——给浏览器看的

6. br

无语义
主要用于在文本中换行,该元素的样式是不能调的

7. hr

无语义
主要用于分割

8. meta

还可以用于搜索引擎优化（SEO），

 <meta name="keywords" content="在线商城,美容,微整形">有可能被搜索引擎搜索到，根据这些关键字，可以搜索到我们的网页
 <meta name="autor" content="yuanjin,3371746937@qq.com">
 <meta name="description" content="gasudfksbgvjufksj">
<font color=#ffb3a7 size=3 face="黑体">9.  link

链接外部资源（CSS、图标）

rel属性：relation，链接的资源和当前网页的关系例：stylesheet

type属性：链接的资源的MIME类型

可以链接网页的图标

1）<link rel="icon" type="image/x-icon" href="./favicon.ico">
2）<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
3)或者把该图标以favicon.ico的形式放在该目录的最下方
如果没有出现 按住ctrl+shift+R——强制刷新

五.CSS进阶

1.@规则

at-rule: @规则、@语句、CSS语句、CSS指令

1. import

@import “路径”;

导入另外一个css文件

2. charset

@charset “utf-8”;

告诉浏览器该CSS文件，使用的字符编码集是utf-8，样式中有中文的，必须写且要写到第一行,

2.web字体和图标

1.web字体

用户电脑上没有安装相应字体，强制让用户下载该字体

使用@font-face指令制作一个新字体

 <style>
        /* 制作一个新的字体，名字叫做good night */
        @font-face{
             font-family:"good night";
             src:url("font/晚安体.ttf")
        }
        p{
            font-family: "good night";
        }
    </style>

2.字体图标

iconfont.cn

通常用i元素作为图标，i元素为行盒

Font class

在线使用CSS：

   <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3818927_xs9u1gdyhka.css">——href写的是图标的链接
</head>
<body>
    <p>
        <!-- 箭头的类名 -->
        <i class="iconfont icon-jinrujiantouxiao-"></i>
        <!-- icon-jinrujiantouxiao- 是箭头的类名，悬浮在图标上复制链接 -->
        <span>asdffghjskl</span>
        i.iconfont.icon-ditu                           
    </p>
</body>
</html>

离线使用CSS：
在网页中点击下载至本地——另存到桌面，然后html引用其中的css

字体图标的本质是字体，可以设置字体大小，字体颜色等，字体大小放大之后不会模糊
Unicode

    <style>
   @font-face {
  font-family: 'iconfont';  /* Project id 3818927 */
  src: url('//at.alicdn.com/t/c/font_3818927_xs9u1gdyhka.woff2?t=1670587458016') format('woff2'),
       url('//at.alicdn.com/t/c/font_3818927_xs9u1gdyhka.woff?t=1670587458016') format('woff'),
       url('//at.alicdn.com/t/c/font_3818927_xs9u1gdyhka.ttf?t=1670587458016') format('truetype');
}
.icofont{
    font-family:"iconfon";
    font-style:normal;
}
    </style>
</head>
<body>
    <i class="iconfont">
        &#xe788;
    </i>
</body>
</html>

注意：在iconfont网站中添加新的图标至项目时，需要更新，并且需要复制新的地址代码

3.块级格式化上下文

视觉格式化模型包含了块级格式化上下文
全称Block Formatting Content,简称BFC
它是一块独立的渲染区域，它规定了在该区域中，常规流的布局

常规流块盒在在水平方向上，必须撑满包含块。
常规流块盒在包含块的垂直方向上依次摆放
常规流块盒若外边距无缝相邻，则进行外边距合并
常规流块盒的自动高度和摆放位置，无视浮动元素。

1.BFC渲染区域：

这个区域由某个HTML元素创建，以下元素会在其内部创建BFC区域：

根元素意味着，元素创建的BFC区域，覆盖了网页中所有的元素
浮动和绝对定位元素
overflow不等于visible的块盒
display=table
行块盒

2.独立的

不同的BFC区域，他们进行渲染时互不干扰
创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部

具体的规则：：
创建BFC的元素，它的自动高度需要计算浮动元素
创建BFC的元素，它的边框盒不会与浮动元素重叠
创建BFC的元素，不会和它的子元素进行外边距合并(处在不同的BFC中的元素的外边距是不可能合并的，只有在同一个BFC的元素的外边距才能合并)

但是创建BFC的元素的子元素如果为绝对，固定定位元素，则以上无效。

4.布局

1.多栏布局

两栏布局

  .aside{
        float:left;
        background:#008c8c;
        color:#fff;
        width:300px;
        margin-right:30px;
     }
     .main{
        /* 定宽 float:right; width:600px; */
        /* 不定宽 ，宽度自适应的话 overflow:hidden; */
        overflow:hidden;
        background:gray;
     }

想要让主区域和边栏有一定的距离，就要设置浮动元素的margin 并非overflow的

三栏布局

<style>
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
        .container{
            padding:30px;
            border:3px solid black;
        }
        .left{
            float:left;
            width:300px;
            background:lightblue;
            margin-right:20px;
        }
        .right{
            float:right;
            width:300px;
            background:lightblue;
            margin-left:20px;
        }
        .middle{
            overflow:hidden;
            border:2px solid black;
        }
    </style>

2.等高

CSS3的弹性盒
JS控制
伪等高

 <style>
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
        }
     .container{
        background:lightblue;
          width:90%;
            margin:0 auto;
            /* 伪等高步骤2 */
            overflow:hidden;
     }
     .aside{
        float:left;
        background:#008c8c;
        color:#fff;
        width:300px;
        margin-right:30px;
        /* 伪等高步骤1 */
        height:10000px;
        margin-bottom:-9000px;
     }
     .main{
        /* 定宽 float:right; width:600px; */
        /* 不定宽 ，宽度自适应的话 overflow:hidden; */
        overflow:hidden;
        background:gray;
     }
    </style>

3.元素书写顺序

先写浮动，再写常规流

若要求主要内容尽量靠前出现：
主区域留出空间，不定宽可以适应包含块的尺寸；
将侧边栏进行绝对定位；
坏处：外边的包含快不知道侧边栏的高度；

4.后台页面的布局

高度设置百分比的条件；
外面的高度和里面的高度没什么关系；

设置padding会影响盒子的的大小
需设置：box-sizing:border-box;

5.行盒的垂直对齐

1.多个行盒垂直方向上的对齐

如果两个行盒之间没有对齐，就可以设置vertical-align

给没有对齐元素设置vertical-align——设置在行盒上

预设值
数值(数字和百分比)

2.图片的底部白边

发生的情况：图片的父元素是一个块盒，块盒高度自动或者没有设置，图片底部和父元素底边之间往往会出现空白。

右面的白变处理方式
图片外面的常规流盒子改成浮动或绝对定位

设置图片父元素的字体大小为0 副作用里面的文字看不见
将图片设置为块盒【推荐】

6.浏览器兼容性

有些属性在某些浏览器里可以识别，在另一些浏览器里不可以识别

1.问题产生原因

市场竞争
标准版本的变化

chrome 54 支持部分CSS3的功能
chrome 74 基本支持全部CSS3功能

2.厂商前缀

比如：box-sizing，谷歌旧版本浏览器中使用-webkit-box-sizing:border-box(前缀表示该属性并非标准，但是我这个浏览器支持该属性)

原因：

市场竞争，标准没有发布
标准仍在讨论中（草案），浏览器厂商希望先支持

前缀是不会被消灭的，为了高版的浏览器兼容低版的浏览器

IE： -ms-
Chrome，safari: -webkit-
opera： -o-
firefox: -moz-

浏览器在处理样式或元素时，使用如下的方式：
当遇到无法识别的代码时，直接略过。

当写完所有的CSS代码的时候，再fn+f1键就自己生成厂商前缀

谷歌浏览器的滚动条样式

<!-- 设置的是div的滚动条的整体样式，原来的样式都会消失，需要全部自己手动设置 -->
div::-webkit-scrollbar{
            width:30px;
            background: red;;
        }

<!-- 设置的是div滚动条滑块的样式 -->
 div::-webkit-scrollbar-thumb

<!-- 设置的是div滚动条轨道的样式 -->
  div::-webkit-scrolllbar-track{
            background:#74c0c0;
        }

<!-- 设置的是div滚动条两端按钮的样式 -->
div::-webkit-scrollbar-button{
            background:red;
        }

实际上，在开发中使用自定义的滚动条，往往是使用div+css+JS实现的

多个背景图中选一个作为背景

1x 1个显像单元

3.css hack

根据不同的浏览器（主要针对IE），设置不同的样式和元素

样式

IE中，CSS的特殊符号

*属性，兼容IE5、IE6、IE7
_属性，兼容IE5~IE6
属性值\9，兼容IE5~IE11
属性值\0，兼容IE8~IE11
属性值\9\0，兼容IE9~IE10

IE5、6、7的外边距bug，浮动元素的左外边距翻倍

条件判断

  <!-- 只有IE可以识别 -->
   <!--[if lt IE8]>
    <p>
       这是IE浏览器
   </p>
   <link href="">
  <![endif] -->
   

   <!-- [if !(IE)]><-->
    <p>
    这是非IE浏览器
   </p>
  <!--[endif] -->