框
目录
- p 和 span_边框
- 一、p 的边框样式
- 二、所有 html 在布局上都遵守盒子模型
- 三、p 的内边框 padding
- 四、p 的外边框 margin
p 和 span_边框
一、p 的边框样式
- 示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> www.weiyuxuan.com </title> <style type="text/css"> p { font-family: 楷体; font-size: 20px; font-weight:bold; background-color: orange; width: 100px; height: 100px; text-align: center; border-width: 6px; } </style> </head> <h1> 边框 </h1> <hr> <body> <p style="border-style: double;"><img src="test.jpg"/></p> <p style="border-style: double;"><img src="test.jpg"/></p> <p><img src="test.jpg"/></p> </body> </html>
二、所有 html 在布局上都遵守盒子模型
三、p 的内边框 padding
- 示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> www.weiyuxuan.com </title> <style type="text/css"> .outside { padding: 10px 10px 10px 10px; /*从上边距顺时针赋予宽度*/ border: 1px solid black; /*给边框设置宽度，样式，颜色 , 多个样式的值用空格分开*/ width: 800px; background-color: yellow; } .inside { width: 100%; height: 100%; background-color: orange; border: 1px solid black; } </style> </head> <h1> 内边框 </h1> <hr> <body> <p class="outside"> <p class="inside">内容</p> </p> </body> </html>
四、p 的外边框 margin
- 示例一
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> www.weiyuxuan.com </title> <style type="text/css"> span { font-size: 12px; font-family: Arail; padding: 10px; background-color: orange; border: 1px solid black; } .right { background-color: orange; margin-right: 10px; } .left { background-color: orange; margin-left: 10px; } </style> </head> <h1> 外边框 </h1> <hr> <body> <span class="right">元素1</span> <span class="left">元素2</span> </body> </html>
- 示例二
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> www.weiyuxuan.com </title> <style type="text/css"> p { font-size: 12px; font-family: Arial; padding: 10px; background-color: yellow; border: 1px solid black; } .inside { background-color: orange; margin: 10px 30px 10px 30px; } </style> </head> <h1> 外边框 </h1> <hr> <body> <p class="outside"> <p class="inside">内部 p </p> </p> </body> </html>
如有错误，欢迎指正！
相关阅读
总结一下table的使用给页面一些布局带来方便 遇到有边框的类似表格这样的布局，你就可以考虑用table布局了，这样就省去你特殊设置边
最近很多朋友咨询小编淘宝主图加边框是否属于违规，其实这个问题不是很难，只要是平时关注淘宝主图要求和规则的朋友都会知道，接下来小
小编作为一名科班出生的设计师，每年总会看到朋友圈、微博分享各种设计流行趋势，迷彩阴影、流体渐变、2.5D、大字体等等层出不穷。
有时候我们在打开或者新建一份excel电子表格的时候会发现整个表格的页面都是空白的，平时可以看到每个单元格周围的线框也不见了。
大家都知道，随着显示器全面屏的广泛运用，对于普通用户而言，一款经济实用、外观新颖、时尚纤薄的全民显示屏绝对是不二的选择，如今，AOC