购物网站前台模板,python做网站php,wordpress5文章外链,致设计CSS架构盒子模型#xff1b;以内容区(显示文本和图像)内边距(内容区至边距的距离)边距(内容区的边界)外边距(元素的边框之间的距离)1.边距#xff1b;border属性#xff1b;简写属性用来设置边距的上(top)右(right)下(bottom)左(left)。宽度#xff0c;颜色和样式div{width…CSS架构盒子模型以内容区(显示文本和图像)内边距(内容区至边距的距离)边距(内容区的边界)外边距(元素的边框之间的距离)1.边距border属性简写属性用来设置边距的上(top)右(right)下(bottom)左(left)。宽度颜色和样式div{width: 200px;height: 200px;background-color: blue;border-right: 5px double darkgray;border-bottom: 10px dashed red;border-left: 15px dotted lime;}盒子的阴影以box-shadow属性设置盒子阴影效果offset-x表示阴影的水平方向偏移量负值为左偏移正值为右偏移offset-y表示阴影的垂直方向偏移量负值为左偏移正值为右偏移div{width:200px;height: 200px;background-color: blue;box-shadow: 3px 3px 3px black;/*设置盒子阴影*/}边框圆角以border-radius定义来设置边距的圆角直角圆角还是椭圆角div {width: 100px;height: 100px;}#qq {background-color: red;border-radius: 25px;}#ww {background-color: blue;border-radius: 50px;}#ee {background-color: lime;border-radius: 50px 25px;}img {border-radius: 50px;}边框图像以border-image定义来设置在元素的边框上的图像div {width: 100px;height: 100px;/*background-color: lightcoral;*/border: 30px solid transparent;/*边框的图像 - 类似于背景图像的设置* border-image-source - 设置边框图像的路径* border-image-width - 设置边框图像的宽度* border-image-repeat - 设置边框图像的平铺方式*/border-image: url(https://mdn.mozillademos.org/files/4127/border.png) 30;}爱新觉罗2.内边距paddying属性也属于简写属性用来设置盒子的内边距上右下左#qq{width: 200px;height: 200px;background-color: blue;padding-top: 50px;padding-right: 100px;padding-bottom: 150px;padding-left: 200px;}#hh{width: 200px;height: 200px;background-color: red;}3.外边距上外边距和左外边距以margin-left设置元素的水平方向的位置值为正数当前元素向右移动值为负数当前元素向左移动margin-top设置元素垂直方向的位置值为正数当前元素向下移动值为负数当前元素向上移动上外边距和右外边距以margin-bottom设置下一个元素的位置值为正数下一个兄弟元素向下移动值为负数下一个兄弟元素向上移动margin-right设置下一个元素的位置值为正数下一个兄弟元素向右移动值为负数下一个兄弟元素向左移动div {display: inline-block;}#d1 {width: 200px;height: 200px;background-color: lightcoral;/*margin-bottom 下外边距控制块级元素的下一个兄弟元素的位置* 如果值为正数的话下一个兄弟元素向下移动* 如果值为负数的话下一个兄弟元素向上移动*//*margin-bottom: -100px;*//*margin-right 右外边距控制内联元素或行内块级元素的下一个兄弟元素的位置* 如果值为正数的话下一个兄弟元素向右移动* 如果值为负数的话下一个兄弟元素向左移动*//*margin-right: -5px;*/}#d2 {width: 200px;height: 200px;background-color: yellowgreen;margin-left: -5px;}外边距重叠以设置两个相邻的元素的外边距第一个设置下外边距第二个设置上外边距#qq{width: 200px;height: 200px;background-color: blue;margin-bottom: 100px;/*id为ww的div元素向下移动100px*/}#ww{width: 200px;height: 200px;background-color: red;margin-top: 200px;/*id为ww的div元素向下移动200px*/}外边距传递以设置两个元素师父子元素当子元素设置上外边距该上边距会在父级元素内出现#qq{width: 200px;height: 100px;background-color: blue;/*设置背景颜色*/padding-top: 100px;/*为子级元素设置上边距*/}#ww{width:100px;height: 100px;background-color: red;/*设置背景颜色*/}内容水平居中以margin: 0 auto父级div设置在元素的水平居中p {/*该属性只对文本内容水平对齐*/text-align: center;/*文本水平方向居中*/}div{width: 100px;height: 100px;background-color: blue;margin: 0 auto;}星际战甲4.盒子模型块级元素盒子模型可设置宽高设置高度为其中内容的高度div{width: 200px;height: 200px;background-color: blue;border: 1px solid black;/*设置边框的样式*/padding: 50px;/*设置内边距*/margin: 50px;/*设置外边距*/}内块级元素盒子模型是不可设置宽和高元素的大小事其中内容撑起span{width: 200px;height: 200px;background-color: red;border: 1px solid black;padding: 30px;/*水平方向内边距是有效设置文本内容的水平方向位置*//*垂直方向内边距是有效文本内容位置没有变而内边距会向上或向下扩展*/margin: 30px;/*垂直方向上或下的外边距是无效的而水平方向的外边距是有效的*/}星际战甲行内块级元素盒子模型不自动换行可设置宽高div{width: 100px;height: 100px;border: 1px solid black;padding: 30px;/*设置内边距*/margin: 30px;/*设置外边距*/}#qq{background-color: red;}#hh{background-color: blue;}box-sizing属性以box-sizing属性设置盒子模型content-box为默认值为标准盒子模型设置为内容区内边距边框外边框border-box为怪异盒子模型设置盒子的大小外边距#qq {width: 200px;height: 200px;/*默认值标准盒子模型* 实际的宽度 width padding-left padding-right border-left border-right* 实际的高度 height padding-top padding-bottom border-top border-bottom*/box-sizing: content-box;border: 10px solid black;padding: 50px;/*设置内边距*/margin: 50px;/*设置外边距*/background-color: lightcoral;}#hh {width: 200px;height: 200px;/*怪异盒子模型* 实际宽度 width* 实际高度 height*/box-sizing: border-box;border: 10px solid black;padding: 50px;/*设置内边距*/margin: 50px;/*设置外边距*/background-color: green;}
