HTML & CSS的学习总结 & CSS实现响应式布局的基础知识

最新推荐文章于 2024-07-12 10:48:03 发布

立乱来

最新推荐文章于 2024-07-12 10:48:03 发布

阅读量912

点赞数

分类专栏：笔记 web html 文章标签： css html 学习

本文链接：https://blog.csdn.net/qq_42107431/article/details/125688607

版权

笔记同时被 3 个专栏收录

81 篇文章 1 订阅

订阅专栏

web

30 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

HTML & CSS的学习总结

HTML

简介

Html是Hypertext Markup Language缩写。即超文本标记语言是用于描述网页文档的一种标签。

HTML的基本标签

标签名称	常用属性	作用
a	href、target、tsrget	添加超链接和锚点
ul、ol、li		ul无序列表、ol有序列表、两者的子元素：li列表项；
img	src、alt	图片显示的标签，alt是指定文本、改文本作为该图片的提示信息
table	cellpadding、cellspacing	cellpadding:指定单元格内容和单元格边框之间的距离; cellspacing:指定单元格之间的距离； <caption></caption>用于定义表格标题，该标签内容可以是文本、图片、超链接、表单空间以及文本格式化元素； <tr>表示表格行 <th>表示表格表头 <td>表示表格普通单元格，该标签的属性如下： colspan=“n”：合并所少个列单元格，被合并的列单元格位置的单元格应该删除； rowspan=“n”：合并多少个行单元格，被合并的行单元格位置的单元格应该删除；
head		标签用于定义网页文档的头部，一般内容不显示给读者
title		定义文件标题，将显示在浏览器标签页
body		之间的文本是可见的页面内容
p		用来分段段落，最多只识别一个空格
h1		标题
br		换行
pre		预格式文本，保留空格和换行
hr		标签定义水平线

CSS

简介

CSS是Cascading Style Sheet的缩写。即层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS简化了HTML中各种繁琐的标签，使各标签的属性更具一般性和通用性，扩充原来的功能。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。

CSS的基本属性设置

属性名	作用
color	文字颜色
font-family	文字字体
font-size	文字大小
font-style	文字形态
font-spacing	文字间距
line-height	设定行高
font-weight	文字粗细
border	边框
border-radius	边框圆角

CSS实现响应式布局

CSS中媒体查询的作用和使用方法

MediaQuery(媒体查询)使用方法

概念：为不同尺寸的屏幕设定不同的CSS样式

示例：不同的设备宽度的时候背景颜色的不同

CODE

    <style>
        #div0 {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        @media screen and (min-device-width:0px) and (max-device-width:300px) {
            #div0 {
                background-color: red;
            }
        }

        @media screen and (min-device-width:301px) and (max-device-width:500px) {
            #div0 {
                background-color: blue;
            }
        }
    </style>
    
<body>
    <div id="div0">
        你好
    </div>
</body>

效果：

宽度大于500px的时候
在这里插入图片描述

宽度在301px到500px之间
在这里插入图片描述

宽度在0px到300px的时候
在这里插入图片描述

以此类推这样可以自行设置多种样式

@media常用的参数

属性名称	作用
width、height	浏览器可视宽度、高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

示例属性width、height：

CODE：

    <style>
        div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
        @media screen and (min-width:200px) and (max-width:900px) {
            div{
                background: red;
            }
        }
    </style>
    
    
<body>
    <div>hi</div>
</body>

效果：

可视宽度在200px到900px的时候
在这里插入图片描述

可视宽度不在范围内时：

在这里插入图片描述

示例：不同的显示宽度下布局的不同

CODE：

<!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>demo2</title>
    <style>
        #div0 {
            width: 100%;
            height: 100px;
        }

        #div0 div{
            float: left;
            border: 1px solid red;
        }
        /* 一行三个 */
        @media screen and (min-width:501px) and (max-width:900px) {
            #div0 div{
                width: 33.3%;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: blue;
            }
            #div0 div:nth-child(3){
                background-color: green;
            }
        }

        /* 两行显示三个div */
        @media screen and (min-width:301px) and (max-width:500px) {
            #div0 div{
                width: 50%;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: blue;
            }
            #div0 div:nth-child(3){
                background-color: green;
            }
        }

        /* 三行显示三个div */
        @media screen and (min-width:0px) and (max-width:300px) {
            #div0 div{
                width: 100%;
            }
            #div0 div:nth-child(1){
                background-color: red;
            }
            #div0 div:nth-child(2){
                background-color: blue;
            }
            #div0 div:nth-child(3){
                background-color: green;
            }
        }
    </style>
</head>

<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

效果：

一行三个
在这里插入图片描述

两行三个

在这里插入图片描述

三行三个
在这里插入图片描述

媒体查询其他引入方式一

style标签： 写在style标签中，有条件的执行某个内部样式表

<style media="(min-device-width:100px) and (max-device-width:300px)">
    #div0{
    background-color: red;
    }
</style>

link引入： 写在Link标签中，有条件的引入外部样式表

<link rel="stylesheet" href="t.css">
<link rel="stylesheet" href="t2.css" media="(min-device-width:100px) and (max-device-width:300px)">

flex弹性盒子的用法

概念

FlexiableBox即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题

概念
在这里插入图片描述

flex-direction

作用： 子元素在父元素盒子中的排序方式

属性值	作用
row	默认值，按从左到右的顺序显示
row-reverse	与row相同，但是以相反的顺序
column	灵活的项目将垂直显示，按从上到下的顺序。
column-reverse	与column相同，但是以相反的顺序。

flex-wrap

作用： 子元素在父元素盒子中的是否换行(列)

属性值	作用
nowrap	默认值。不换行或不换列。
wrap	换行或换列
wrap-reverse	换行或换列，但以相反的顺序。

flex-flow

作用： flex-direction和flex-wrap属性的简写形式

语法： flex-flow：<flex-direction> || <flex-wrap>

justify-content

作用： 用来在存在剩余空间时，设置为间距的方式

属性值	作用
flex-start	默认值。从左到右，挨着行的开头。
flex-end	从右到左，挨着行的结尾。
center	居中显示。
space-between	平均分布在该行上，两边不留间隔空间。
space-around	平均分布在该行上，两边留有一半的间隔空间。

align-items

作用： 设置每个flex元素在交叉轴上的默认对齐方式。

属性值	作用
flex-start	位于容器的开头
flex-start	位于容器的结尾
center	居中显示

flex的其他属性

属性值	作用
flex-basis	设置弹性盒伸缩基准值(width：将会失效)
flex-grow	设置弹性盒子的扩展比率(在基准值之上扩展)
flex-shrink	设置弹性盒子的缩小比率
flex	flex-grow、flex-shrink、flex-basis的缩写(按顺序写属性值)

特殊写法：

属性	作用
flex:auto;	flex:1 1 auto
flex:none	flex:0 0 auto(width就会生效)
flex:0%；flex:100px	flex:1 1 0%；flex:1 1 100px
flex:1	flex:1 1 0%

rem的作用和使用方法

概念

指相对于根元素的字体大小的单位

示例

<style>
    html{
        font-size: 15px;
    }
    div{
        font-size: 1rem;/*相当于写了15px 就是一倍的15px*/
    }
</style>

与em区别

rem是相对于根元素的字体大小，em是相对于父元素的字体大小

rem的作用和使用方法

概念

指相对于根元素的字体大小的单位

示例

<style>
    html{
        font-size: 15px;
    }
    div{
        font-size: 1rem;/*相当于写了15px 就是一倍的15px*/
    }
</style>

与em区别

rem是相对于根元素的字体大小，em是相对于父元素的字体大小

立乱来

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML & CSS的学习总结 & CSS实现响应式布局的基础知识

文章目录

HTML & CSS的学习总结

HTML

简介

HTML的基本标签

CSS

简介

CSS的基本属性设置

CSS实现响应式布局

CSS中媒体查询的作用和使用方法

MediaQuery(媒体查询)使用方法

@media常用的参数

媒体查询其他引入方式一

flex弹性盒子的用法

概念

flex-direction

flex-wrap

flex-flow

justify-content

align-items

flex的其他属性

rem的作用和使用方法

概念

rem的作用和使用方法

概念