html盒子模型页面居中,【静态页面架构】CSS之盒子模型

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;

}

26.jpg

边框图像;

以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;

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值