box-sizing: content-box; --浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准,
当它定义width和height时,它的宽度和高度不包括border和padding。
box-sizing: border-box; --浏览器对盒模型的解释与 IE6之前的版本相同,
当它定义width和height时,border和padding则是被包含在宽和高之内的。
二、文本设置
<!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>
<!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>
<!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>