标签: css

html css中block盒子模型讲解

盒子模型是什么？

可以把盒子模型看作是一个快递：

快递纸箱的厚度叫边框
快递纸箱边框与里面的物品的距离叫内填充
如果有多个快递，两个快递纸箱之间的距离叫外边距
快递纸箱是有宽高的，也就是盒子模型的宽度和高度

每一个块级元素都是一个盒子模型，都具有边框，内填充，外边距的属性。比如div、p、h1元素默认都是块级元素。

熊黎龙2022年5月26日大约 3 分钟

html css中flex容器讲解

什么是弹性布局

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

要使用flex布局，需要先给一个容器元素设置display:flex让它变成flex容器，然后其所有的直接子元素就变成flex项目。

熊大2022年5月26日大约 2 分钟

html css中float浮动详解

特性

普通流(标准流)
- 默认配置，元素自动从左往右，从上往下排列。
- 块元素
  - 独占一行
  - 可以设置宽高。宽度默认为容器的100%
- 行内元素
  - 与其他元素同行显示
  - 不可设置宽高，宽高就是文字或图片的宽高
float浮动
- 浮动元素向左或向右移动，不可上下
- 浮动元素具备inline-block(行内块元素)属性
- 浮动元素碰到包含框或另一个浮动框，浮动停止
- 浮动元素之后的元素将围绕它，之前的不受影响
- 浮动元素会脱离标准流，出现“高度坍塌”

熊大2022年5月26日大约 2 分钟

html css中position定位系统详解

静态定位 static

特点：
- 属于默认的配置。
- 使元素定位常规流中(块级垂直排列，行内水平从左到右排列)。
- 忽略top,bottom,left,right,z-index属性。
- 垂直方向外边距重叠：最终外边距=两个相邻元素外边距中最大的。
- 具有固定长宽的值的元素，如果左右外边距设置auto后会自动扩大占满剩余宽度，效果就是块水平居中

熊大2022年5月26日大约 2 分钟

html css中背景属性详解

背景颜色

属性解释	属性和值	例子
`baockground-color: transparent/颜色值`	背景颜色	`background-color: #f3f;`

注意：

背景包括内填充和边框、不包括外边距
默认背景图片位于元素左上角，并在水平和垂直方向上重复
background-position的值如果只有一个，默认第二个为50%居中

熊黎龙2022/5/24大约 1 分钟

css基础教程

教程阅读说明

CSS 指的是层叠样式表 (Cascading Style Sheets)。

本教程是css快速上手教程，尽量做到用较短的阅读时间全面了解css。

本教程会结合css最佳实践的路线，也就是css最好用的方式进行讲解。

本教程不仅可以作为快速学习css的资料，也是一本非常好的CSS查阅手册，当你在开发中忘记配置时可快速查阅本手册。

熊黎龙2022年5月24日大约 1 分钟

html css选择器详解

CSS常用的选择器

<html>
    <head>
        <!-- 通过https://cdn.bytedance.com渠道引入外部样式表 -->
        <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.3/css/bootstrap.css" type="text/css" rel="stylesheet" />
        
        <style>
            @import "media/style/custom.css"; /* 导入样式表 (必须放style标签头部)(这里css在html渲染后加载，会照成页面样式延迟从而影响体验，所以不建议这样引入) */
  
            * { margin: 0; padding: 0;}						/* 使用星号选择页面全部元素 */
            h1 { color: red; }								/* 标签选择器 */
            #title { color: yellow; }      					/* id选择器 */
            .content { color: blue; font-size: 16px; }     	/* 类选择器 */
            
            h1, #title, .content { background-color: green; } /* 同时选择用逗号 */
            .container .title { font-size; 20px; } 			/* 所有子元素选择用空格 */
            .container > .title { border: 1px solid; } 		/* 直接子元素选择用右箭头 */
        </style>
    </head>
    <body>
        <h1>这是一个h1标签</h1>
        <div class="container">
            <p id="title">这是一个p标签，它的Id是title</p>
        	<p class="content">这是一个p标签，它的class是content</p>
        </div>
        
    </body>
</html>

熊黎龙2022年5月24日大约 3 分钟

html css中文字属性详解

关于字体版权问题

在讲解字体样式前，要先了解一下字体版权。

很多字体是有版权的，如果擅自作为商用或以盈利为目的使用，很有可能会收到"惊喜"哦！

我们要尊重知识产权，哪里字体有版权，能否举例说明？列表如下：

方正
汉仪
华康
造字工房
微软雅黑
苹方
...

重点来了，哪些字体可以免费商用？开源字体列表：

熊黎龙2022年5月24日大约 4 分钟