6.5CSS3学习笔记

最新推荐文章于 2024-07-09 15:49:17 发布

Shelysure

最新推荐文章于 2024-07-09 15:49:17 发布

阅读量225

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Shelysure/article/details/106576775

版权

自动换行

word-break 属性规定自动换行的处理方法。

<!DOCTYPE html>
<html>
<head>
<style> 
p.test1
{
width:11em; 
border:1px solid #000000;
word-break:hyphenate;
}

p.test2
{
width:11em; 
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>

<p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
<p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>

<p><b>注释：</b>目前 Opera 不支持 word-break 属性。</p>

</body>
</html>

效果图如下
在这里插入图片描述

2.word-wrap

word-wrap 属性允许长单词或 URL 地址换行到下一行。
其属性：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style> 
p.test
{
width:11em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>
</head>
<body>

<p class="test">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>

</body>
</html>

效果图

在这里插入图片描述

@font-face属性

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style> 
@font-face
{
font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')
    ,url('/example/css3/Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>
</head>
<body>

<div>
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>

</body>
</html>

效果图

在这里插入图片描述

display

display 属性规定元素应该生成的框的类型

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
在这里插入图片描述

overflow

overflow 属性规定当内容溢出元素框时发生的事情。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

在这里插入图片描述

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>

效果图：

在这里插入图片描述

overflow其他属性
在这里插入图片描述

box-shadow

box-shadow 属性向框添加一个或多个阴影。

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

在这里插入图片描述

样例：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图：
在这里插入图片描述

box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中就是width属性宽度包括边框区域等。
在这里插入图片描述

在这里插入图片描述

background-clip

background-clip 属性规定背景的绘制区域。
就如为值border-box时，border以外的背景色都会被裁掉。

在这里插入图片描述

如：

在这里插入图片描述

在这里插入图片描述
就会变为

在这里插入图片描述

Shelysure

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.5CSS3学习笔记

自动换行word-break 属性规定自动换行的处理方法。<!DOCTYPE html><html><head><style> p.test1{width:11em; border:1px solid #000000;word-break:hyphenate;}p.test2{width:11em; border:1px solid #000000;word-break:break-all;}</style&g
复制链接

扫一扫