CSS盒子模型、圆角边框、盒子阴影 |
您所在的位置:网站首页 › padding属性包括 › CSS盒子模型、圆角边框、盒子阴影 |
页面布局的三大核心:盒子模型、浮动、定位。 盒子模型、圆角边框 盒子模型边框border内边距padding外边距margin清除内外边距 圆角边框盒子阴影文字阴影 盒子模型网页布局的核心:通过css摆放盒子。 盒子模型的组成包括:边框、外边距、内边距、实际内容 边框包括:边框宽度(粗细)、边框样式(实线、虚线、点线)、边框颜色 div { width: 300px; height: 200px; border-width: 5px; 边框宽度 border-style: solid; 边框样式:实线 border-style: dashed; 虚线 border-style: dotted; 点线 border-style: pink; 边框颜色 }边框简写 border: 1px solid red; 没有顺序边框分开写法(用来修改某一条边): border-top: 1px solid blue; border-bottom:1px solid pink;边框只有一条不一样的时候,可以利用层叠性书写: border: 5px dashed pink; border-top: 1px solid blue; 覆盖了上面整个盒子的一条上边框表格的细线边框: 边框会影响盒子的实际大小 边框的存在会增加盒子的大小,因为有两种方案: (1)测量盒子大小的时候,不要量边框 (2)如果测量的时候包含了边框,则需要将width和height的值减去边框的宽度 内边距padding边框与内容之间的距离。 控制盒子与盒子之间的距离 ![]() 网页元素很多带有默认的内外边距,且浏览器不同默认的也不同,因为在布局前,要清除一下网页元素的内外边距。 * { margin: 0px; 清除内边距 padding: 0px; 清除外边距 }行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距,但是转换为块级和行内级元素就可以了。 圆角边框让盒子变成圆角。 border-radius属性用来设置元素的内外框圆角。 语法: border-radius:length; 参数越大弧度越明显,这个参数可以是具体数组也可以是百分比其原理: box-shadow属性为盒子添加阴影。 语法: box-shadow:h-shadow v-shadow blur spread color inset; 盒子默认外阴影
text-shadow 语法: text-shadow:h-shadow、v-shadow、blur、color |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |