版权声明:转载声明原作者及链接 https://blog.csdn.net/ICY___/article/details/84339753
在网页制作中,盒子标签的使用无处不在且相当重要,本文将全面的带你认识盒子,了解盒子,运用盒子!
在HTML中,每个元素或者标签都可看作落在一个个盒子中,我将在此介绍:
- 控制盒子的大小
- 创建盒子的边框
- 设置盒子的内外边距
- 隐藏盒子 显示盒子
多说无益,现在开始
盒子的大小
- width , height 属性 利用给定的像素控制或者使用百分数控制大小 em值控制(利用盒子内文本为标准,灵活的设计方案,可以用来针对不同的屏幕大小)
- 宽度限制 min-width,max-width min-height,max-height 属性(可以使页面内容在不同的屏幕大小下不至于过小或过大)
- 超出部分(内容溢出) overflow hidden/scroll属性(hidden属性将溢出内容直接隐藏/scroll属性在盒子上添加一个滚动条,用来显示溢出的内容)
- 一个常用的居中盒子的方法 margin:0 auto;
创建盒子的边框 设置内外边距
- border 复合属性 1.宽度 2.样式 3.颜色
- border-style solid 一套直线 dotted 一串方形点 dashed 一条虚线(还有很多,但没用过)
- border-width 不可以使用百分数 可以设置瘦胖或边框上下左右等
- padding 内边距 可以使用像素或em或百分比 其中内边距为其外部的盒子的百分比
- margin 外边距 使用方法同上,如果一个盒子位于另一个盒子的上方 就会出现一个bug,margin重叠 就是较大的外边会生效,小的将被忽略 如果盒子已经指定了宽度 ,外边距就会加到盒子的宽度
隐藏盒子 显示盒子
- 将内联元素于块级元素进行转化 display:inline/block/inline-block/none(行元素/块级元素/兼具两者/完全隐藏)
- 盒子的隐藏 visibility:hidden/visible(隐藏/显示元素)
- 盒子的投影 box-shadow
- 圆角 border-radius(其中50%为圆,也可以用像素)