CSS3_Node5_box-sizing&文本设置

最新推荐文章于 2024-09-21 14:09:22 发布

loushumei

最新推荐文章于 2024-09-21 14:09:22 发布

阅读量405

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/express_yourself/article/details/52905192

版权

html/css篇专栏收录该内容

12 篇文章 0 订阅

订阅专栏

-->CSS3 box-sizing
-->CSS3 文本设置

一、box-sizing 盒大小
语法：box-sizing: content-box(默认)| border-box | inherit;

box-sizing: content-box; --浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，

当它定义width和height时，它的宽度和高度不包括border和padding。

box-sizing: border-box; --浏览器对盒模型的解释与 IE6之前的版本相同，

当它定义width和height时，border和padding则是被包含在宽和高之内的。

box-sizing: inherit 规定应从父元素继承 box-sizing 属性的值。
由父级继承还有：
字体大小 font-size: 14px;
字体类型 font-family: "微软雅黑","宋体",Arail,Tabhoma;
行高
text-align: left;

二、文本设置

1、设置文字书写顺序 （css2内容）
direction : rtl | ltr text-align ?
rtl 从右到左排列
ltr 从左到右排列
unicode-bidi:bidi-override; 重排序

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style: none;}
input{
	font-size: 30px;
	padding:2px 4px;
}
.ipt1{
	direction:rtl;
	unicode-bidi:bidi-override;
	/* 重排序-文字顺序改变 */
}
.ipt2{
	text-align: right;
}
div{
	width:400px;
	height:50px;
	line-height: 50px;
	font-size: 30px;
	border:2px solid #ccc;
	text-align: right;
}
.box1{
	direction:rtl;
	unicode-bidi:bidi-override;
}
.box2{
	text-align: right;
}
</style>
</head>
<body>
	<input class="ipt1" type="text"><br>
	<input class="ipt1" type="text">
	<div class="box1">123456</div>
	<div class="box2">123456</div>
</body>
</html>

2、 文字描边 ( -webkit-支持 )
语法： text-stroke-width：文字的描边厚度
text-stroke-color：文字的描边颜色
-webkit-text-stroke:3px red;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style: none;}
p{
	font-size: 50px;
	font-weight: 800px;
}
.box1{
	/*文字描边效果*/
	-webkit-text-stroke-width:2px;
	-webkit-text-stroke-color:red;
}
.box2{
	/*用文字阴影写文字描边*/
	text-shadow:-2px -2px 0 red,2px 2px 0 red;
}
</style>
</head>
<body>
	<p class="box1">放到了空间里的说法 分开都是拉飞机开房间都是</p>
	<p class="box2">放到了空间里的说法 分开都是拉飞机开房间都是</p>
</body>
</html>

3、 文本溢出设置
语法 :text-overflow:clip|ellipsis
clip:不显示省略标记，只是简单地裁切
ellipsis：对象内文本溢出时显示省略标记
实际上text-overflow属性仅用于决定，当文本溢出时是否显示省略标记
配合使用：
white-space:nowrap 文本不换行
overfow:hidden 超出隐藏

4、 强制文本换行显示
语法： word-wrap:normal|break-word;

长串的数字或字母，超出限定宽度时不会自动换行显示
解决这个问题，可使用
word-wrap:break-word;
主流浏览器基本都支持

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;list-style: none;}
p{
	width:400px;
	border:2px solid red;
	margin:20px 0 0 50px;
	font-size: 20px;
	font-weight: 800px;
}
.box1{
	white-space:nowrap;/*1、文本不换行*/
	overflow: hidden; /*2、超出隐藏*/
	text-overflow: clip;/* 3
	不显示省略标记，只是简单地裁切 */
}
.box2{
	white-space:nowrap;/*1、文本不换行*/
	overflow: hidden;/*2、超出隐藏*/
	text-overflow: ellipsis;/*3、对象内文本溢出时显示省略标记*/
}
.box3{
	/* white-space:nowrap;
	overflow: hidden;
	text-overflow: clip; */
	word-wrap:break-word;/*强制文本换行显示*/
}
.box4{
	white-space:nowrap;/*1、文本不换行*/
	overflow: hidden;/*2、超出隐藏*/
	text-overflow: ellipsis;/*3、对象内文本溢出时显示省略标记*/
}
</style>
</head>
<body>
	<p class="box1">111放到了空间里的说法 分开都是拉飞机开房间都是放到了空间里的说法 分开都是拉飞机开房间都是放到了空间里的说法 分开都是拉飞机开房间都是放到了空间里的说法 分开都是拉飞机开房间都是</p>
	<p class="box2">222放到了空间里的说法 分开都是拉飞机开房间都是放到了空间里的说法 分开都是拉飞机开房间都是放到了空间里的说法 分开都是拉飞机开房间都是放到了空间里的说法 分开都是拉飞机开房间都是</p>
	<p class="box3">324837564594185073298759843759823759827185723985798327598327598732857983275982759587832483756459418507329875984375</p>
	<p class="box4">ofdfjdklfjkldsjflksdjflofdfjdklfjkldsjflksdjflofdfjdklfjkldsjflksdjflofdfjdklfjkldsjflksdjflklfjkldsjflksdjfklfjkldsjflksdjf</p>
</body>
</html>