H5学习_番外篇_CSS3其他属性_html/css_WEB-ITnose
二维码.jpg
0.今日课程大纲
- 服务器端字体: font-face
- 轮廓: outline
- 缩放属性: resize
- 分栏布局: column
- 弹性布局: flex-box
1. 服务器端字体 font-face
我们在第三天CSS 样式中，学习了一个属性叫做 font-family,他的作用是定义你所使用的字体具体是哪一种，但是仅对有对应字体的电脑有效。例如常见的字体有宋体或者黑体等，这些我们的电脑一般系统自带的字体库中都会直接安装好。
但是我们假如想更改一下字体什么的？让我们的用户看到的字体和我们在自己电脑上设置的字体是一样的，那又该怎么做呢？
我们在这里介绍一个概念，就是服务器字体，属性为 @font-face。它的作用是能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。那具体该怎么实现？
首先，你需要在网上下载你所需要的字体文件库，放入你的 font（字体目录，根据自己电脑情况来） 目录中。
其次就是将下载的文件放入你的页面中，这时候也就要用到我们的属性 font-face了。
@font-face{ font-family:“你的web字体名称”; src:url(“字体路径”); font-weight:bold; }来看看具体实现过程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*@font-face { font-family: "唐菜也体"; src: url("fonts/FuturaBTLtIt.otf"); } div{ font-family: "唐菜也体"; font-size: 50px; }*/ @font-face{ font-family: "郜慧姣体"; src: url("fonts/FuturaBTHv.otf"); } div{ font-family: "郜慧姣体"; font-size: 30px; } </style> </head> <body> <div>hello world!!</div> </body> </html>2. 轮廓 outline
轮廓是绘制于元素周围的一条线，，位于位置边缘的外围，可以起到突出元素的作用。
根据定义可以发现和边框 border 是非常类似的一个东西。
border 的语法是 border 后面有三个属性，分别是：
- 边框颜色
- 边框宽度
- 边框类型
outline是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。
outline不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。
需要注意：
我在某网站上查询，说是请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 ,但是在实际的测试过程中，我发现网站给出的效果并没有生效，无论你是在你 style 之前设置，还是之后设置，实际都会发生颜色的改变，当然也可能是我个人出错，如果有读者发现存在问题，请及时联系我。
效果演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; border: 10px red solid; outline: dotted green 10px; } p{ width: 50px; height: 50px; background: pink; } </style> </head> <body> <div></div> <p></p> </body> </html>3. 缩放属性 resize
我们可以通过给一个元素的宽度和高度去固定这个元素的大小，有时候我们需要去拉伸这个元素的宽度和高度。我们可以到源代码中去改变他的宽度和高度，但是这样显得非常麻烦，那么我们该如何去在页面中直接调节他的宽度和高度呢？
在 CSS3 中添加了一个新的属性 resize ，它叫做 缩放属性，它适用于所有元素，方便之处在于用户可以直接到页面中调节元素的宽度和高度。
| 属性值 | 解释 |
|---|---|
| none | 用户不能调节元素的尺寸（默认值） |
| both | 用户可以调节元素的宽度和高度 |
| horizontal | 用户可以调节元素的宽度 |
| vertical | 用户可以调节元素的高度 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> textarea{ resize:both; } div{ width: 100px; height: 100px; background-color: #ccc; resize: both; } </style> </head> <body> <textarea></textarea> <div></div> </body> </html>我们给一个 textarea 元素还有一个 div 元素分别设置了resize:both 之后，按照语法来说，这两个元素都可以进行拉伸，但实际上，只有 textarea 元素可以进行拉伸，而 div 元素却不可以，原因是，除了 textarea 元素之外，其他元素想要使用缩放，必须设置 overflow 属性（overflow:visible 除外）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> textarea{ resize:both; } div{ width: 100px; height: 100px; background-color: #ccc; resize: both; overflow: auto; } </style> </head> <body> <textarea></textarea> <div></div> </body> </html>4. 分栏布局 column
在我们经常阅读的报纸中，一般下一个版面会被分成多个列去进行排版，在 CSS3出台之前，实现这个效果需要非常多的代码，而CSS3规范中对多栏布局进行了定义，我们可以使用 CSS表单样式轻松搞定这个效果。
| 属性 | 解释 |
|---|---|
| column-count:number; | 栏的数量控制 |
| column-gap:长度单位； | 栏与栏之间的距离 |
| column-rule | 宽度，颜色 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分栏</title> <style type="text/css"> body{ /*设置分栏数*/ -webkit-columns: 3; -moz-columns: 3; -o-columns: 3; columns: 3; /*设置间距 100px*/ -webkit-column-gap: 100px; -moz-column-gap: 100px; -o-column-gap: 100px; column-gap: 100px; /*设置分栏间隔线*/ -webkit-column-rule: 10px solid red; -moz-column-rule: 10px solid red; -o-column-rule: 10px solid red; column-rule: 10px solid red; } div{ height: 50px; margin-top: 10px; background-color: cyan; } </style> </head> <body> <div>我是divA</div> <div>我是divB</div> <div>我是divC</div> </body> </html>但是我们发现，随着我们将窗口去拉伸，我们的 column-rule还停留在原位置，需要重新刷新才能适应界面，这是我们现在不好解决的，所以接下来要介绍另外一种布局方式，弹性布局。
5. 弹性布局 flex-box
引用一下别人打得比方，“box-flex”直译为“房子-分配”，假如马林大叔省吃俭用一辈子，终于在上海郊外买了间150平米的商品房。后来，马林大叔想回老家养老，决定把房子分配给他的三个儿子。
ok，先暂停下，这里提到的“房子”就是”box-flex”中的”box”，“分配”就是”box-flex”中的”flex”，于是，这个“分配房子”的举动就称为”box-flex”，而box-flex属性的值就是说的如何分配，分配比例是什么。
继续我们的例子，马林大叔的三个儿子分别叫做大马，中马和小马，其中大马已经结婚多年，有一堆双胞胎女儿，拖家带口的人多；而中马和小马是优秀的光棍人士。
所以，大马要求分配更多的房子，最终，家人一番协商有了下面的分配结果，就是：
#大马 { 房子-分配: 2; } #中马 { 房子-分配: 1; } #小马 { 房子-分配: 1; }如果装换成CSS表示就是：
#first_boy { box-flex: 2; } #second_boy { box-flex: 1; } #three_boy { box-flex: 1; }box-flex的含义与作用理解瞬间柳暗花明：用来按比例分配父标签的宽度(或高度)空间。
box-flex的值为至少为1的整数时起作用。但是，仅仅一个box-flex属性是不足以实现子元素间的空间分配，因为还要看其老爸的意思。
只有父元素同意了，几个孩子才能分配这房子，所以，父元素中也是需要添加声明的，体现在代码中就是：
#father { display: box; }display: box;的声明其实就是弹性盒模型的声明。
我们试着将上面的案例写成代码：
弹性布局1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ display: box; display: -webkit-box; display: -moz-box; display: -o-box; } .one{ box-flex:2; -webkit-box-flex:2; -moz-box-flex:2; -o-box-flex:2; background: red; } .two{ background: pink; } .three{ background: blue; } .two,.three{ box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; -o-box-flex:1; } </style> </head> <body> <div class="father"> <div class="son one">11111</div> <div class="son two">22222</div> <div class="son three">33333</div> </div> </body> </html>上面的案例是三个子元素按照一定的比例去分配父元素的宽度，接下来再来看第二个案例，
当第一个头元素和最后一个尾部元素给了固定的高度之后，中间的内容元素如何自适应屏幕的高度，
使得三个子元素占据满屏的高度。
弹性布局2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性布局</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } body,html,.wrap{ height: 100%; } .wrap{ /*开启弹性盒子 让子元素弹性自适应布局*/ display: -webkit-box; /*弹性布局盒子中 子元素的排列方式（横向或者竖向）horizontal(默认横向)*/ -webkit-box-orient:vertical; /*翻转 子元素的排列顺序*/ -webkit-box-direction:reverse; } .header{ height: 100px; background-color: cyan; } .content{ background-color: #ccc; /*占据剩余的空间*/ -webkit-box-flex:2; } .footer{ height: 100px; background-color: orange; } </style> </head> <body> <div class="wrap"> <div class="header">头部</div> <div class="content">内容</div> <div class="footer">底部</div> </div> </body> </html>当然，除了按比例分配父元素的宽度或者高度之后，我们还有一些其他的属性。这里不做更多介绍。
| 属性 | 含义 |
|---|---|
| box-orient | 子元素的方向,默认是横排(horizontal:横着排；vertical:竖着排。) |
| box-direction | 子元素的排列顺序，默认是正常（normal：正常；reverse：反转。） |
| box-align | 子元素在垂直方向上的对齐表现（start 、end、center） |
| box-pack | 子元素在水平方向上的对齐表现（start、end、center） |
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7773
15
1644
14
1399
52
1296
25
1234
29
HTML은 초보자를 위해 쉽게 배우나요?
Apr 07, 2025 am 12:11 AM
HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임
Apr 08, 2025 pm 07:05 PM
HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML의 시작 태그의 예는 무엇입니까?
Apr 06, 2025 am 12:04 AM
anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류?
Apr 04, 2025 pm 11:54 PM
GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...
CSS3 및 JavaScript를 사용하여 클릭 후 주변 사진을 흩어지고 확대하는 효과를 얻는 방법은 무엇입니까?
Apr 05, 2025 am 06:15 AM
이미지를 클릭 한 후 주변 이미지를 산란 및 확대하는 효과를 얻으려면 많은 웹 디자인이 대화식 효과를 달성해야합니다. 특정 이미지를 클릭하여 주변을 만들 수 있습니다 ...
웹 주석에서 y 축 위치의 적응 형 레이아웃을 구현하는 방법은 무엇입니까?
Apr 04, 2025 pm 11:30 PM
웹 주석 기능에 대한 Y 축 위치 적응 알고리즘이 기사는 Word 문서와 유사한 주석 기능을 구현하는 방법, 특히 주석 간격을 다루는 방법을 모색합니다 ...
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구
Apr 09, 2025 am 12:12 AM
HTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
