关于CSS3的一些冷门属性_html/css_WEB-ITnose
有的时候是不是想在自己的网页中,用自己设计的字体呢?那么请看下面!
嵌入web字体
能够加载服务器的字体文字，让客户端显示客户端没有安装的字体
语法:@font-face{• font-family:<你的web字体的名称>;src：url(“字体路径”);font-weight:bold;}@font-face{ /*定义字体*/ font-family:"我的字体"; src:url("font/CooperBlackStd.otf"); } div{ font-family: "我的字体"; /*引用字体*/ } p{ font-family: "CooperBlackStd";}你还在为特殊的边框效果而苦恼吗?
box-sizing:border-box;怪异盒模型(为元素指定任何内边距和边框都将在已设定的宽度和高度进行绘制)
outline外轮廓效果 跟border呈现效果极其相似，但不占网页布局空间。它在元素取得焦点或者被激活时呈现,下面的例子你可以试试.div{ width: 100px; height: 100px; background-color: red; border: 10px dashed black; } p{ width: 100px; height: 100px; background-color: red; outline: 10px dashed black; /*box-sizing:border-box 怪异盒模式 outline 外轮廓效果 修饰样式 不占文本空间*/}还记当年的报纸排版吗?当你的网页样式也有此样式需求时,看看下面吧!
分栏布局
/分栏属性/column-count：number；栏的数量控制column-gap：长度单位；栏之间的距离column-rule：宽度，颜色；栏栏之间的见隔线，类似border div{ /栏（列）的属性 分成几栏/ -webkit-column-count:3; -moz-column-count:3; -o-column-count:3; column-count:3;
下面的是代码实例,去试试吧!
/*栏之间的宽度*/ -webkit-column-gap:100px; -moz-column-gap:100px; -o-column-gap:100px; column-gap:100px; /*栏之间的分隔线 宽度 颜色*/ -webkit-column-rule:5px dashed red; column-rule:5px dashed red;
}
flex-box：弹性布局
优点：
1适应性强，在做不同屏幕分辨率的界面式都非常实用2.可以随意按照宽度。比例划分元素宽高3，可以轻松改变元素的顺序4.自适应布局实现快捷，易维护
弹性盒模型
display：box;将一个元素的子元素以弹性布局进行布局-webkit-box-orient:vertical;子元素的排列顺序（横向或竖向）horizontalbox-diraction:normal|reverse(倒序)子元素的排列顺序-webkit-box-flex:1;子元素如何分配剩余空间box-align:start|end|center 子元素垂直对齐方式box-pack:start|end|center 子元素的水平对齐方式flexbox是布局模块，它包含父元素和子元素的属性flexbox布局的主题思想是元素改变大小适应可用空间，当空间变大时，flex元素将伸展大小以填充可用空间，当flex元素超出可用空间时将自动缩小，总之，flex元素是可以让你的布局根据浏览器的大小变化自动进行伸缩的弹性布局flex-box
注意:优先以横向布局代码实例!!!!!!(如有不懂自行理解) *{ margin: 0; padding: 0; } html,body{ height: 100%; } .wrap{ height: 100%; /*在父级声明弹性盒模型*/ display: -webkit-box; /*弹性盒模型默认是水平布局 可以设置为垂直布局*/ /*-webkit-box-orient:vertical;*/ } .wrap div{ /*width: 200px;*/ /*height: 100px;*/ } .con1{ background-color:red; -webkit-box-flex:2; } .con2{ background-color:blue; -webkit-box-flex:1; /*设置当前快变成弹性模型，填充剩余内容 必要条件父级设置弹性盒模型*/ } .con3{ background-color: yellow; /*填充比例*/ -webkit-box-flex:1; }Copy after login
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
